武汉echarts 折线配置项内容和展示
武汉疫情预测
配置项如下
var timedata = ['1-11',
'1-12',
'1-13',
'1-14',
'1-15',
'1-16',
'1-17',
'1-18',
'1-19',
'1-20',
'1-21',
'1-22',
'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',
'2-18',
'2-19',
'2-20',
'2-21',
'2-22',
'2-23',
'2-24',
'2-25',
'2-26',
'2-27',
'2-28',
'2-29',
'3-1',
'3-2',
'3-3',
'3-4',
'3-5',
'3-6',
'3-7',
'3-8',
'3-9',
'3-10',
'3-11',
'3-12',
'3-13',
'3-14',
'3-15',
'3-16',
'3-17',
'3-18',
'3-19',
'3-20',
'3-21',
'3-22',
'3-23',
'3-24',
'3-25',
'3-26',
'3-27',
'3-28',
'3-29',
'3-30',
'3-31',
];
var mean_value = [0,
10,
10,
11,
14,
18,
24,
32,
44,
60,
81,
111,
104,
130,
277,
388,
487,
587,
695,
818,
963,
1333,
1564,
2071,
2362,
2529,
2620,
2661,
2668,
2652,
2619,
2574,
3852,
3912,
2035,
1724,
1472,
1263,
1084,
932,
801,
688,
592,
509,
438,
377,
325,
280,
242,
209,
180,
156,
135,
117,
102,
88,
77,
67,
58,
51,
45,
39,
34,
30,
27,
24,
21,
19,
17,
15,
13,
12,
11,
10,
9,
8,
7,
7,
6,
6,
5,
];
var up_CI = [0,
20,
12,
13,
16,
21,
27,
36,
49,
67,
91,
126,
104,
237,
355,
476,
580,
681,
787,
910,
1070,
1333,
2085,
2367,
2681,
2842,
2900,
2908,
2900,
2894,
2891,
2883,
3852,
4227,
2291,
1870,
1598,
1372,
1178,
1013,
872,
752,
651,
564,
491,
428,
374,
328,
289,
255,
226,
200,
178,
159,
142,
128,
115,
104,
95,
86,
79,
72,
66,
61,
56,
52,
48,
45,
42,
39,
36,
34,
32,
30,
28,
27,
25,
24,
22,
21,
20,
];
var down_CI = [0,
0,
8,
10,
12,
16,
21,
29,
39,
53,
71,
96,
104,
23,
198,
301,
394,
492,
603,
727,
856,
1333,
1044,
1775,
2043,
2216,
2340,
2415,
2437,
2410,
2348,
2265,
3852,
3597,
1778,
1579,
1345,
1154,
991,
851,
729,
624,
533,
454,
386,
327,
276,
232,
195,
163,
135,
112,
92,
75,
61,
48,
38,
29,
22,
16,
11,
6,
3,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
];
var actual_value = [0,
0,
0,
0,
0,
6,
25,
88,
115,
89,
157,
92,
104,
115,
69,
119,
1330,
470,
531,
564,
859,
1333,
1540,
1852,
2933,
2633,
2238,
2960,
2056,
2864,
2314,
1646,
3852,
3910,
1923,
1548,
1690,
1600,
1660,
615,
319,
314,
541,
348,
464,
370,
383,
313,
420,
565,
193,
111,
114,
131,
126,
74,
41,
36,
17,
13,
8,
5,
4,
4,
4,
1,
1,
0,
0,
0,
0,
0,
1,
0,
0,
0,
0,
0,
0,
0,
0,
];
option = {
tooltip: {
trigger: 'axis'
},
legend: {
color: ["#F58080", "#47D8BE", "#F9A589", "#F9A589"],
data: ['均值', '置信上限', '置信下限', '实际数据'],
textStyle: {
color: ["#F58080", "#47D8BE", "#F9A589", "#F9A589"],
},
left: 'center',
top: '1%'
// bottom: 'bottom'
},
grid: {
// show:'',
top: 'middle',
left: '10%',
right: '4%',
bottom: '5%',
height: '85%',
containLabel: false,
backgroundColor: "#f74914",
},
xAxis: {
type: 'category',
data: timedata,
axisLine: {
lineStyle: {
color: "#999"
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#DDD'
}
},
axisLine: {
// show: false,
lineStyle: {
color: "#999"
},
},
nameTextStyle: {
color: "#999"
},
splitArea: {
show: false
}
},
series: [{
name: '均值',
symbol: 'circle',
type: 'line',
data: mean_value,
color: "#14f7a0",
lineStyle: {
normal: {
width: 3,
color: '#14f7a0',
shadowColor: 'rgba(245,128,128, 0.5)',
shadowBlur: 10,
shadowOffsetY: 7
}
},
// itemStyle: {
// normal: {
// color: '#F58080',
// borderWidth: 3,
// /*shadowColor: 'rgba(72,216,191, 0.3)',
// shadowBlur: 100,*/
// borderColor: "#F58080"
// }
// },
smooth: true
},
{
name: '置信上限',
type: 'line',
symbol: 'circle',
data: up_CI,
lineStyle: {
normal: {
width: 1,
color: {
type: 'linear',
colorStops: [{
offset: 0,
color: '#f66fc2' // 0% 处的颜色
},
{
offset: 0.4,
color: '#f66fc2' // 100% 处的颜色
}, {
offset: 1,
color: '#f66fc2' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
// shadowColor: 'rgba(249,165,137, 0.5)',
// shadowBlur: 10,
// shadowOffsetY: 7
// colorStops: [{
// offset: 0,
// color: '#AAF487' // 0% 处的颜色
// },
// {
// offset: 0.4,
// color: '#47D8BE' // 100% 处的颜色
// }, {
// offset: 1,
// color: '#47D8BE' // 100% 处的颜色
// }
// ],
// globalCoord: false // 缺省为 false
// },
// shadowColor: 'rgba(71,216,190, 0.5)',
// shadowBlur: 10,
// shadowOffsetY: 7
}
},
itemStyle: {
normal: {
color: '#f714cd',
borderWidth: 1,
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/
// borderColor: "#f66fc2"
}
},
smooth: true
},
{
name: '置信下限',
symbol: 'circle',
type: 'line',
data: down_CI,
color: '#F9A589',
lineStyle: {
normal: {
width: 1,
color: '#F9A589',
// shadowColor: 'rgba(249,165,137, 0.5)',
// shadowBlur: 10,
// shadowOffsetY: 7
// colorStops: [{
// offset: 0,
// color: '#AAF487' // 0% 处的颜色
// },
// {
// offset: 0.4,
// color: '#47D8BE' // 100% 处的颜色
// }, {
// offset: 1,
// color: '#47D8BE' // 100% 处的颜色
// }
// ],
// globalCoord: false // 缺省为 false
// },
// shadowColor: 'rgba(71,216,190, 0.5)',
// shadowBlur: 10,
// shadowOffsetY: 7
}
},
// itemStyle: {
// normal: {
// color: '#f7e814',
// borderWidth: 1,
// /*shadowColor: 'rgba(72,216,191, 0.3)',
// shadowBlur: 100,*/
// // borderColor: "#f66fc2"
// }
// },
smooth: true
},
{
name: '实际数据',
type: 'scatter',
data: actual_value,
symbol: 'triangle',
itemStyle: {
normal: {
color: '#148df7',
borderWidth: 1,
/*shadowColor: 'rgba(72,216,191, 0.3)',
shadowBlur: 100,*/
// borderColor: "#f66fc2"
}
},
smooth: true
},
]
};
截图如下
