可视化例子(13)——ECharts堆叠直方图(根据时间动态变化)
程序员文章站
2022-06-15 12:05:58
...
这是之前做的堆叠柱状图，根据时间进行变化，在这里记录下，等以后需要的时候可以直接在这里面拿代码。
柱状图是线性渐变，主要是这个属性：
itemStyle: {
color: new echarts.graphic.LinearGradient( //柱子渐变效果
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
}全部代表如下（其中关键地方做了标注）：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/echarts-gl.min.js"></script>
<script type="text/javascript" src="../js/theme/dark.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom,'dark');
var app = {};
option = null;
var dataMap = {};
//处理数据
function dataFormatter(obj) {
//26天--跟时间轴一一对应
var pList = ['1/23','1/24','1/25','1/26', '1/27',
'1/28', '1/29', '1/30', '1/31', '2/1', '2/2', '2/3',
'2/4', '2/5', '2/6', '2/7', '2/8', '2/9', '2/10',
'2/11','2/12','2/13','2/14','2/15','2/16','2/17']
var temp;
for (var year = 3; year <= 29; year++) {
temp = obj[year];
for (var i = 0, l = temp.length; i < l; i++) {
obj[year][i] = {
name: pList[i],
value: temp[i]
};
}
}
return obj;
}
//每日确诊人数
//中括号里面是每一天每一市的数据，比如：
//3:[15,7,8,6,0,2,5,0,2,0,1,0,3,0,1,0,3,0,0,0,0],中是横坐标dataX里面各个市对应的值，这是第一天01/23的数据
dataMap.dataGDP = dataFormatter({
3:[15,7,8,6,0,2,5,0,2,0,1,0,3,0,1,0,3,0,0,0,0],
4:[20,
14,
10,
9,
1,
2,
7,
1,
2,
0,
2,
0,
5,
0,
2,
0,
3,
0,
0,
0,0
],
5:[27,
14,
10,
10,
2,
2,
8,
2,
4,
0,
4,
0,
6,
0,
3,
3,
3,
0,
0,
0,0
],
6:[36,
39,
12,
14,
2,
4,
8,
2,
5,
0,
4,
1,
8,
0,
3,
3,
4,
1,
0,
0,0
],
7:[49,
51,
12,
18,
2,
6,
11,
5,
5,
0,
4,
3,
8,
0,
5,
4,
4,
1,
0,
0,0
],
8:[63,
63,
14,
18,
7,
12,
12,
6,
7,
0,
5,
4,
10,
2,
6,
6,
4,
1,
0,
1,0
],
9:[86,
79,
18,
25,
7,
16,
17,
12,
9,
1,
5,
5,
10,
3,
6,
6,
4,
1,
0,
1,0
],
10:[110,
106,
26,
32,
16,
18,
17,
12,
11,
1,
6,
5,
10,
3,
6,
6,
4,
3,
0,
1,0
],
11:[170,
137,
38,
38,
21,
18,
20,
14,
13,
3,
6,
5,
10,
3,
6,
6,
4,
4,
3,
1,0
],
12:[196,
175,
41,
39,
27,
21,
23,
14,
14,
3,
7,
6,
10,
3,
6,
6,
5,
4,
3,
1,0
],
13:[226,
189,
51,
43,
31,
25,
28,
17,
14,
4,
7,
7,
10,
4,
6,
6,
5,
5,
4,
1,0
],
14:[269,
216,
64,
46,
37,
31,
29,
18,
15,
6,
10,
9,
12,
5,
8,
6,
6,
5,
4,
1,0
],
15:[289,
237,
69,
49,
44,
35,
31,
20,
18,
7,
11,
10,
12,
6,
10,
6,
6,
5,
4,
1,0
],
16:[314,
255,
73,
50,
47,
44,
35,
20,
19,
9,
13,
12,
13,
6,
10,
7,
6,
5,
5,
1,0
],
17:[334,
284,
73,
57,
53,
46,
39,
22,
19,
11,
14,
12,
13,
6,
10,
7,
6,
5,
5,
2,0
],
18:[351,
298,
82,
60,
56,
46,
41,
25,
20,
14,
14,
13,
13,
6,
10,
7,
6,
5,
5,
3,0
],
19:[364,
304,
83,
65,
58,
51,
47,
25,
21,
17,
14,
13,
13,
9,
10,
7,
6,
5,
5,
3,0
],
20:[368,
313,
85,
68,
60,
56,
50,
25,
21,
19,
14,
13,
13,
10,
10,
7,
6,
5,
5,
3,0
],
21:[375,
317,
86,
70,
62,
58,
53,
25,
21,
20,
15,
13,
13,
11,
10,
8,
7,
5,
5,
3,0
],
22:[386,
323,
87,
78,
67,
62,
54,
25,
21,
21,
16,
13,
13,
13,
12,
8,
7,
5,
5,
3,0
],
23:[391,
327,
89,
81,
70,
64,
55,
25,
21,
22,
16,
13,
13,
13,
12,
8,
8,
5,
5,
3,0
],
24:[400,
328,
91,
82,
73,
64,
56,
25,
22,
22,
17,
14,
13,
13,
12,
8,
8,
5,
5,
3,
0
],
25:[406,
335,
95,
84,
81,
65,
58,
25,
22,
22,
17,
15,
13,
13,
12,
8,
10,
5,
5,
3,
0
],
26:[414,
338,
96,
84,
89,
65,
58,
25,
22,
23,
17,
16,
13,
13,
12,
8,
10,
5,
5,
3,
0
],
27:[415,
339,
97,
84,
89,
66,
58,
25,
22,
23,
17,
16,
13,
14,
12,
8,
10,
5,
5,
4,
0
],
28:[416,
339,
98,
84,
91,
66,
59,
25,
22,
23,
18,
16,
13,
14,
12,
8,
10,
5,
5,
4,
0
],
29:[416,
339,
98,
84,
91,
66,
62,
25,
22,
23,
18,
16,
13,
14,
12,
8,
10,
5,
5,
4,
0
]
});
//每日新增确诊人数
//中括号里面是每一天每一市的数据，比如：
//3:[0,2,4,5,0,1,4,0,0,0,0,0,3,0,1,0,1,0,0,0,0],中是横坐标dataX里面各个市对应的值，这是第一天01/23的数据
dataMap.dataFinancial = dataFormatter({
3:[0,2,4,5,0,1,4,0,0,0,0,0,3,0,1,0,1,0,0,0,0],
4:[5,
7,
2,
3,
1,
0,
2,
1,
0,
0,
1,
0,
2,
0,
1,
0,
0,
0,
0,
0,0
],
5:[7,
0,
0,
1,
1,
0,
1,
1,
2,
0,
2,
0,
1,
0,
1,
3,
0,
0,
0,
0,0
],
6:[9,
25,
2,
4,
0,
2,
0,
0,
1,
0,
0,
1,
2,
0,
0,
0,
1,
1,
0,
0,0
],
7:[13,
12,
0,
4,
0,
2,
3,
3,
0,
0,
0,
2,
0,
0,
2,
1,
0,
0,
0,
0,0
],
8:[14,
12,
2,
0,
5,
6,
1,
1,
2,
0,
1,
1,
2,
2,
1,
2,
0,
0,
0,
1,0
],
9:[23,
16,
4,
7,
0,
4,
5,
6,
2,
1,
0,
1,
0,
1,
0,
0,
0,
0,
0,
0,0
],
10:[24,
27,
8,
0,
9,
2,
0,
0,
2,
0,
1,
0,
0,
0,
0,
0,
0,
2,
0,
0,0
],
11:[60,
31,
12,
6,
5,
0,
3,
2,
2,
2,
0,
0,
0,
0,
0,
0,
0,
1,
3,
0,0
],
12:[26,
38,
3,
1,
6,
3,
3,
0,
1,
0,
1,
1,
0,
0,
0,
0,
1,
0,
0,
0,0
],
13:[30,
14,
10,
4,
4,
4,
5,
3,
0,
1,
0,
1,
0,
1,
0,
0,
0,
1,
1,
0,0
],
14:[43,
27,
13,
3,
6,
6,
1,
1,
1,
2,
3,
2,
2,
0,
2,
0,
1,
0,
0,
0,0
],
15:[20,
21,
5,
3,
7,
4,
2,
2,
3,
1,
1,
1,
0,
1,
2,
0,
0,
0,
0,
0,0
],
16:[25,
18,
4,
1,
3,
9,
4,
0,
1,
2,
2,
2,
1,
0,
0,
1,
0,
0,
1,
0,0
],
17:[20,
29,
0,
7,
6,
2,
4,
2,
0,
2,
1,
0,
0,
0,
0,
0,
0,
0,
0,
1,0
],
18:[17,
14,
9,
3,
3,
0,
2,
3,
1,
3,
0,
1,
0,
0,
0,
0,
0,
0,
0,
1,0
],
19:[13,
6,
1,
5,
2,
5,
6,
0,
1,
3,
0,
0,
0,
3,
0,
0,
0,
0,
0,
0,0
],
20:[4,
9,
2,
3,
2,
5,
3,
0,
0,
2,
0,
0,
0,
1,
0,
0,
0,
0,
0,
0,0
],
21:[7,
4,
1,
2,
2,
2,
3,
0,
0,
1,
1,
0,
0,
1,
0,
1,
1,
0,
0,
0,0
],
22:[11,
6,
1,
8,
5,
4,
1,
0,
0,
1,
1,
0,
0,
2,
2,
0,
0,
0,
0,
0,0
],
23:[5,
4,
2,
3,
3,
2,
1,
0,
0,
1,
0,
0,
0,
0,
0,
0,
1,
0,
0,
0,0
],
24:[9,
1,
2,
1,
3,
0,
1,
0,
1,
0,
1,
1,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
25:[6,
7,
4,
2,
8,
1,
2,
0,
0,
0,
0,
1,
0,
0,
0,
0,
2,
0,
0,
0,
0
],
26:[8,
3,
1,
0,
8,
0,
0,
0,
0,
0,
0,
1,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
27:[1,
1,
1,
0,
0,
1,
0,
0,
0,
0,
0,
0,
0,
1,
0,
0,
0,
0,
0,
1,
0
],
28:[1,
0,
1,
0,
2,
0,
1,
0,
0,
0,
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
29:[0,
0,
0,
0,
2,
0,
3,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
});
//21个地级市----X轴坐标
dataX = ['深圳市','广州市','珠海市','佛山市','东莞市','中山市','惠州市','汕头市',
'湛江市','江门市','肇庆市','梅州市','阳江市','茂名市','清远市','揭阳市','韶关市',
'汕尾市','潮州市','河源市','云浮市'];
option = {
baseOption: {
timeline: {
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay: true,
// currentIndex: 2,
playInterval: 500,
label:{
interval: 1,
fontSize: 10
},
// data是时间轴的数据
data: [
'01/23','01/24','01/25','01/26','01/27','01/28','01/29','01/30','01/31',
'02/01','02/02','02/03','02/04','02/05','02/06','02/07','02/08','02/09',
'02/10','02//11','02/12','02/13','02/14','02/15','02/16','02/17','02/18'
]
},
title: {
text: '广东省各市每日确诊和新增人数变化',
top:20,
left: 'center',
textStyle:{
fontSize: 30
}
},
legend: {
right: 130,
top:25,
data: ['确诊总人数', '新增人数']
},
calculable : true,
grid: {
top: 80,
bottom: 100,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
formatter: function (params) {
return params.value.replace('\n', '');
}
}
}
}
},
xAxis: [
{
'type':'category',
'axisLabel':{'interval':0},
'data': dataX,
splitLine: {show: false}
}
],
yAxis: [
{
type: 'value',
name: '人数'
}
],
series: [
{
name: '确诊总人数',
type: 'bar',
stack: '广告',
barMinHeight: 2,
label : {
show: true, //显示数值
fontSize: 14
},
itemStyle: {
color: new echarts.graphic.LinearGradient( //柱子渐变效果
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
}
},
{
name: '新增人数',
type: 'bar',
stack: '广告',
barMinHeight: 2,
label : {
show: true, //显示数值
fontSize: 14
},
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#FCB3A7'},
{offset: 0.5, color: '#FA816D'},
{offset: 1, color: '#E07361'}
]
)
}
}
]
},
options: [
{
series: [
{data: dataMap.dataGDP['3']},
{data: dataMap.dataFinancial['3']}
]
},
{
series : [
{data: dataMap.dataGDP['4']},
{data: dataMap.dataFinancial['4']}
]
},
{
series : [
{data: dataMap.dataGDP['5']},
{data: dataMap.dataFinancial['5']}
]
},
{
series : [
{data: dataMap.dataGDP['6']},
{data: dataMap.dataFinancial['6']}
]
},
{
series : [
{data: dataMap.dataGDP['7']},
{data: dataMap.dataFinancial['7']}
]
},
{
series : [
{data: dataMap.dataGDP['8']},
{data: dataMap.dataFinancial['8']}
]
},
{
series : [
{data: dataMap.dataGDP['9']},
{data: dataMap.dataFinancial['9']}
]
},
{
series : [
{data: dataMap.dataGDP['10']},
{data: dataMap.dataFinancial['10']}
]
},
{
series : [
{data: dataMap.dataGDP['11']},
{data: dataMap.dataFinancial['11']}
]
},
{
series : [
{data: dataMap.dataGDP['12']},
{data: dataMap.dataFinancial['12']}
]
},
{
series: [
{data: dataMap.dataGDP['13']},
{data: dataMap.dataFinancial['13']}
]
},
{
series : [
{data: dataMap.dataGDP['14']},
{data: dataMap.dataFinancial['14']}
]
},
{
series : [
{data: dataMap.dataGDP['15']},
{data: dataMap.dataFinancial['15']}
]
},
{
series : [
{data: dataMap.dataGDP['16']},
{data: dataMap.dataFinancial['16']}
]
},
{
series : [
{data: dataMap.dataGDP['17']},
{data: dataMap.dataFinancial['17']}
]
},
{
series : [
{data: dataMap.dataGDP['18']},
{data: dataMap.dataFinancial['18']}
]
},
{
series : [
{data: dataMap.dataGDP['19']},
{data: dataMap.dataFinancial['19']}
]
},
{
series : [
{data: dataMap.dataGDP['20']},
{data: dataMap.dataFinancial['20']}
]
},
{
series : [
{data: dataMap.dataGDP['21']},
{data: dataMap.dataFinancial['21']}
]
},
{
series : [
{data: dataMap.dataGDP['22']},
{data: dataMap.dataFinancial['22']}
]
},
{
series: [
{data: dataMap.dataGDP['23']},
{data: dataMap.dataFinancial['23']}
]
},
{
series : [
{data: dataMap.dataGDP['24']},
{data: dataMap.dataFinancial['24']}
]
},
{
series : [
{data: dataMap.dataGDP['25']},
{data: dataMap.dataFinancial['25']}
]
},
{
series : [
{data: dataMap.dataGDP['26']},
{data: dataMap.dataFinancial['26']}
]
},
{
series : [
{data: dataMap.dataGDP['27']},
{data: dataMap.dataFinancial['27']}
]
},
{
series : [
{data: dataMap.dataGDP['28']},
{data: dataMap.dataFinancial['28']}
]
},
{
series : [
{data: dataMap.dataGDP['29']},
{data: dataMap.dataFinancial['29']}
]
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>