初始化数据可视化项目
This commit is contained in:
187
experiment_5/task4/echarts模板/4_sales_manager对照模板.html
Executable file
187
experiment_5/task4/echarts模板/4_sales_manager对照模板.html
Executable file
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>绘制第一个图表</title>
|
||||
<script src="../js/echarts.min.js"></script>
|
||||
<script src="../js/d3.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
|
||||
<div id="main" style="width: 400px;height:300px;"></div>
|
||||
<script>
|
||||
var myChart = echarts.init(document.getElementById('main')); // 初始化一个图表实例
|
||||
var names = ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6'];
|
||||
var sales_data = [
|
||||
{ value: 50, name: 'rose1' },
|
||||
{ value: 55, name: 'rose2' },
|
||||
{ value: 35, name: 'rose3' },
|
||||
{ value: 65, name: 'rose4' },
|
||||
{ value: 80, name: 'rose5' },
|
||||
{ value: 105, name: 'rose6' },
|
||||
]
|
||||
var profit_data = [
|
||||
{ value: 10, name: 'rose1' },
|
||||
{ value: 5, name: 'rose2' },
|
||||
{ value: 15, name: 'rose3' },
|
||||
{ value: 25, name: 'rose4' },
|
||||
{ value: 20, name: 'rose5' },
|
||||
{ value: 35, name: 'rose6' },
|
||||
];
|
||||
|
||||
option = {
|
||||
// 颜色数组，包括6种不同的颜色值
|
||||
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
|
||||
// 图表的标题，文本为"销售情况 利润情况"，位置在左侧，字体颜色为蓝色（#0099FF），字体大小为10。
|
||||
title: {
|
||||
text: ' 销售情况 利润情况',
|
||||
left: 'left',
|
||||
textStyle: {
|
||||
color: '#0099FF',
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
// 提示框配置
|
||||
tooltip: {
|
||||
// 表示当鼠标悬停在数据项上时触发提示框
|
||||
trigger: 'item',
|
||||
// 定义了提示框的显示格式，包括数据系列的名称（{a}）、数据项的名称（{b}）、数值（{c}）和百分比（{d}%）
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center', // 图例水平居中显示
|
||||
top: 'bottom', // 图例位于图表底部
|
||||
data: names, // 图例的数据项为names数组，即每个数据项的名称
|
||||
// 图例文本的样式，包括颜色数组
|
||||
textStyle: {
|
||||
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
|
||||
},
|
||||
padding: 0, // 图例的内边距为0
|
||||
itemGap: 3, // 图例项之间的间距为3
|
||||
itemWidth: 30, // 图例项的宽度为30
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售额', // 图表的名称
|
||||
type: 'pie', // 饼图
|
||||
radius: [5, 85], // 饼图的半径范围，从5到85
|
||||
center: ['30%', '50%'], // 饼图的中心位置在容器的30%宽度和50%高度处
|
||||
roseType: 'area', // 使用面积模式绘制玫瑰图
|
||||
// 标签的显示方式，这里设置为不显示标签
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
// 标签线的显示方式，这里设置为不显示标签线
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
// 高亮状态下的样式，这里设置为不显示高亮状态下的标签
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: sales_data, // 饼图的数据为sales_data数组
|
||||
},
|
||||
{
|
||||
name: '利润', // 图表的名称
|
||||
type: 'pie', // 饼图
|
||||
radius: [5, 85], // 饼图的半径范围，从5到85
|
||||
center: ['80%', '50%'], // 饼图的中心位置在容器的80%宽度和50%高度处
|
||||
roseType: 'area', // 使用面积模式绘制玫瑰图
|
||||
// 标签的显示方式，这里设置为不显示标签
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
// 标签线的显示方式，这里设置为不显示标签线
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: profit_data, // 饼图的数据为profit_data数组
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
|
||||
// 这段代码是用于在 ECharts 图表中实现自动轮播的效果。
|
||||
// 每隔2秒钟，图表会自动切换到下一个数据项，并高亮显示当前数据项以及显示对应的提示框（tooltip）。
|
||||
var currentIndex = -1;
|
||||
var pie_index = -1;
|
||||
var pie_index1 = 0
|
||||
setInterval(function () {
|
||||
var dataLen = option.series[1].data.length;
|
||||
console.log(option.series[1].data);
|
||||
console.log(dataLen); // 6
|
||||
/*
|
||||
pie_index
|
||||
-1 0
|
||||
0 1
|
||||
1 2
|
||||
...
|
||||
10 11
|
||||
11 0
|
||||
*/
|
||||
pie_index = pie_index == 11 ? 0 : (pie_index + 1)
|
||||
// console.log(currentIndex1)
|
||||
// 取消之前高亮的图形
|
||||
myChart.dispatchAction({
|
||||
type: 'downplay',
|
||||
/*
|
||||
seriesIndex
|
||||
0
|
||||
*/
|
||||
seriesIndex: pie_index1,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
/*
|
||||
currentIndex
|
||||
-1 0
|
||||
0 1
|
||||
1 2
|
||||
...
|
||||
5 0
|
||||
*/
|
||||
currentIndex = (currentIndex + 1) % dataLen;
|
||||
/*
|
||||
pie_index
|
||||
0 0
|
||||
1 0
|
||||
...
|
||||
5 0
|
||||
6 1
|
||||
...
|
||||
11 1
|
||||
*/
|
||||
pie_index1 = parseInt(pie_index / 6)
|
||||
// 高亮当前图形
|
||||
myChart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: pie_index1,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
// 显示提示框
|
||||
myChart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: pie_index1,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user