可视化结果如下：
实现代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>测试折线图</title>
6 <style>
7 body{
8 background-color: #00bda3;
9 }
10 #main{
11 }
12 </style>
13 <script src="../echarts.js"></script>
14 </head>
15 <body>
16 <div id="main" style="width: 1800px;height: 800px"></div>
17 <script type="text/javascript">
18 var sureData=[
19 4535,
20 5997,
21 12167,
22 15238,
23 17988,
24 19544,
25 21558,
26 23214,
27 24363,
28 28060
29 ];
30 var guessData=[
31 6973 ,
32 9239 ,
33 7736 ,
34 9720 ,
35 11821,
36 14411,
37 17238,
38 20471,
39 23260,
40 24702
41 ];
42 var cureData=[
43 60,
44 103,
45 124,
46 171,
47 243,
48 328,
49 475,
50 632,
51 892,
52 1153
53 ];
54 var deathData=[
55 106,
56 132,
57 170,
58 213,
59 259,
60 304,
61 361,
62 425,
63 490,
64 564
65 ];
66 function getUpData(data) {
67 let dataArray=[];
68 for (let i = 0; i <data.length-1; i++) {
69 dataArray.push(data[i+1]-data[i])
70 }
71 return dataArray
72 }
73 var sureUpData=getUpData(sureData);
74 var guessUpData=getUpData(guessData);
75 var cureUpData=getUpData(cureData);
76 var deathUpData=getUpData(deathData);
77
78 var myChart=echarts.init(document.getElementById('main'))
79 var option={
80 title:[
81 {
82 // id:
83 show:true,
84 text:'{bugText|新 型 冠 状 病 毒 肺 炎}\n1月29日至2月4日每日新增{sureText|确诊病例}和新增{guessText|疑似病例}数柱状图',
85 link:'https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_3',
86 target:'blank',
87 textStyle:{
88 color:'#dffffe',
89 fontStyle:'normal',
90 fontWeight:'bold',
91 fontFamily:'黑体',
92 fontSize:26,
93 // lineHeight:10,
94 // width:
95 // height:
96 textBorderWidth:4,
97 textBorderColor:'black',
98 textShadowColor:'black',
99 textShadowBlur:10,
100 textShadowOffsetY:4,
101 textShadowOffsetX:8,
102 rich:{
103 bugText:{
104 padding:[10,0,0,0],
105 fontSize:16,
106 color:'white',
107 textBorderColor:'#333',
108 textBorderWidth:2,
109
110 textShadowColor:'#2efcfb',
111 },
112 sureText:{
113 color:'#dffffe',
114 fontStyle:'normal',
115 fontWeight:'bold',
116 fontFamily:'黑体',
117 fontSize:28,
118 padding:[0,5],
119 // lineHeight:10,
120 // width:
121 // height:
122 textBorderWidth:2,
123 textBorderColor:'red',
124 textShadowColor:'red',
125 textShadowBlur:10,
126 textShadowOffsetY:0,
127 textShadowOffsetX:0,
128 },
129 guessText:{
130 color:'#dffffe',
131 fontStyle:'normal',
132 fontWeight:'bold',
133 fontFamily:'黑体',
134 fontSize:28,
135 padding:[0,5],
136 // lineHeight:10,
137 // width:
138 // height:
139 textBorderWidth:2,
140 textBorderColor:'orange',
141 textShadowColor:'orange',
142 textShadowBlur:10,
143 textShadowOffsetY:0,
144 textShadowOffsetX:0,
145 },
146 cureText:{
147 color:'#dffffe',
148 fontStyle:'normal',
149 fontWeight:'bold',
150 fontFamily:'黑体',
151 fontSize:24,
152 // lineHeight:10,
153 // width:
154 // height:
155 textBorderWidth:2,
156 textBorderColor:'green',
157 textShadowColor:'green',
158 textShadowBlur:10,
159 textShadowOffsetY:0,
160 textShadowOffsetX:0,
161 },
162 deathText:{
163 color:'#dffffe',
164 fontStyle:'normal',
165 fontWeight:'bold',
166 fontFamily:'黑体',
167 fontSize:24,
168 // lineHeight:10,
169 // width:
170 // height:
171 textBorderWidth:2,
172 textBorderColor:'black',
173 textShadowColor:'black',
174 textShadowBlur:10,
175 textShadowOffsetY:0,
176 textShadowOffsetX:15,
177 },
178
179 }
180 },
181 subtext:'（每日新增数）',
182 // sublink:
183 // subtarget:
184 subtextStyle: {
185 color: 'white',
186 fontStyle: 'normal',
187 fontWeight: 'bold',
188 fontSize: 22,
189 textBorderColor: "black",
190 textBorderWidth: 2,
191 rich: {}
192 },
193 textAlign:'left',
194 textVerticalAlign:'top',
195 padding:18,
196 itemGap:15,
197 x:'center',
198 // zlevel:
199 // z:
200 // left:
201 // right:
202 // bottom:
203 top:40,
204
205 backgroundColor:'#c8fffa',
206
207 borderWidth:5,
208 borderColor:'#96e9ff',
209 borderRadius:20,
210 shadowBlur:2,
211 shadowColor:'#2efcfb',
212 shadowOffsetX:0,
213 shadowOffsetY:0,
214
215
216
217
218
219
220
221
222 }
223 ],
224 legend:[
225 {
226 type:'plain',
227 // id:
228 show:true,
229 // zlevel:
230 // z:
231 // y:'bottom',
232 x:'center',
233 // left:
234 // right:
235 // top:220,
236 bottom:20,
237 orient:'horizontal',
238 align:"left",
239 padding:[8,100],
240 itemGap: 10,
241 itemHeight:24,
242 itemWidth: 35,
243 formatter:'{name}病例',
244 formatter:function(name){
245 if (name=='确诊'){
246 return '{sureText|'+name+'}'
247 }
248 else if(name=='疑似'){
249 return '{guessText|'+name+'}'
250 }
251 else if(name=='治愈'){
252 return '{cureText|'+name+'}'
253 }
254 else if(name=='死亡'){
255 return '{deathText|'+name+'}'
256 }
257 else {
258 return name
259 }
260 },
261 selectedMode:true,
262 inactiveColor:'blue',
263 selected:{
264 '治愈':false,
265 '死亡':false,
266 },
267 textStyle: {
268 fontSize:20,
269 fontWeight:'normal',
270 rich:{
271 sureText:{
272 color:'red',
273 fontSize:20,
274 fontWeight:'normal',
275 },
276 guessText:{
277 color:'orange',
278 fontSize:20,
279 fontWeight:'normal',
280 },
281 cureText:{
282 color:'green',
283 fontSize:20,
284 fontWeight:'normal',
285 },
286 deathText:{
287 color:'black',
288 fontSize:20,
289 fontWeight:'normal',
290 },
291
292 }
293 },
294 backgroundColor:'#c8fffa',
295 borderWidth:5,
296 borderColor:'#96e9ff',
297 borderRadius:20,
298 shadowBlur:2,
299 shadowColor:'#2efcfb',
300 shadowOffsetX:0,
301 shadowOffsetY:0,
302
303 selector:true,
304 selectorLabel:{
305 padding:[5,10],
306 color:'black',
307 fontSize:15,
308 borderWidth:1,
309 borderColor:'black'
310 },
311 selectorButtonGap:20,
312 data:[
313 '确诊','疑似','治愈','死亡'
314 ]
315 }
316 ],
317 grid:[
318 {
319 show:true,
320 bottom:100,
321 top:200,
322 containLabel:true,
323 backgroundColor:'white',
324 borderWidth:1,
325 borderColor:'black'
326 }
327 ],
328 toolbox:[
329 {
330 show:true,
331 // orient:'vertical'
332 showTitle:true,
333 itemSize:25,
334 feature:{
335 saveAsImage:{
336 type:'jpeg',
337 backgroundColor:'white',
338 pixelRatio:3
339 },
340 restore:{
341
342 },
343 dataView:{
344 readOnly:true,
345
346 },
347 // dataZoom:{
348 //
349 // },
350 magicType:{
351 type:['line','bar','stack', 'tiled'],
352 seriesIndex:{
353
354 }
355 },
356 // brush:{
357 //
358 // }
359 },
360 iconStyle:{
361 // color:'white',
362 borderColor:'white',
363 borderWidth:4,
364
365 },
366
367 emphasis:{
368 iconStyle:{
369 // color:'white',
370 borderColor:'black',
371 borderWidth:4,
372
373 },
374 },
375 right:'13%',
376 top:'10%'
377 }
378 ],
379 tooltip:[
380 {
381 show:true,
382 trigger:'axis',
383 axisPointer:{
384 type:"shadow",
385 snap:true,
386 label:{
387 // show:true,
388 },
389 lineStyle:{
390 color:'red'
391 }
392 },
393 alwaysShowContent:true,
394 enterable:true,
395
396
397 }
398 ],
399 xAxis:[
400 {
401 type:'category',
402 // offset:[10,]
403 nameGap:50,
404 name:'时间',
405 nameTextStyle:{
406 color:'white',
407 fontWeight:'bold',
408 fontSize:22,
409 padding:[12,20],
410 textBorderColor:'black',
411 textBorderWidth:5,
412
413 backgroundColor:'#c8fffa',
414 borderWidth:5,
415 borderColor:'#96e9ff',
416 borderRadius:20,
417 shadowBlur:2,
418 shadowColor:'#2efcfb',
419 shadowOffsetX:0,
420 shadowOffsetY:0,
421 },
422 axisLine:{
423 symbol:['none','arrow'],
424 lineStyle:{
425 width:2,
426 }
427 },
428 axisTick:{
429 length:10,
430 alignWithLabel:false,
431 // inside:true,
432 },
433 axisLabel: {
434 interval:0,
435 color:"white",
436 fontWeight:'bold',
437 fontSize:20,
438
439 textBorderWidth:4,
440 textBorderColor:'black',
441 textShadowColor:'black',
442 textShadowBlur:2,
443 textShadowOffsetX:2,
444 },
445
446
447 data:[
448 // '2020/1/27',
449 '2020/1/28',
450 '2020/1/29',
451 '2020/1/30',
452 '2020/1/31',
453 '2020/2/1',
454 '2020/2/2',
455 '2020/2/3',
456 '2020/2/4',
457 '2020/2/5',
458 ]
459
460 }
461 ],
462 yAxis:[
463 {
464 type:'value',
465 name:'(确诊|疑似)新增人数',
466 nameGap:20,
467 nameTextStyle:{
468 color:'white',
469 fontWeight:'bold',
470 fontSize:22,
471 padding:[12,20],
472 textBorderColor:'black',
473 textBorderWidth:5,
474
475 backgroundColor:'#c8fffa',
476 borderWidth:5,
477 borderColor:'#96e9ff',
478 borderRadius:20,
479 shadowBlur:2,
480 shadowColor:'#2efcfb',
481 shadowOffsetX:0,
482 shadowOffsetY:0,
483 },
484 axisLabel: {
485 interval:0,
486 color:"white",
487 fontWeight:'bold',
488 fontSize:20,
489
490 textBorderWidth:4,
491 textBorderColor:'black',
492 textShadowColor:'black',
493 textShadowBlur:2,
494 textShadowOffsetX:2,
495 },
496 splitArea:{
497 show:true,
498
499 color:['rgba(250,250,250,0.3)','rgba(94,236,255,0.56)'],
500
501
502 }
503
504 },
505 {
506 type:'value',
507 name:'(治愈|死亡)新增人数',
508 // max:3000,
509 nameGap:20,
510 nameTextStyle:{
511 color:'white',
512 fontWeight:'bold',
513 fontSize:22,
514 padding:[12,20],
515 textBorderColor:'black',
516 textBorderWidth:5,
517
518 backgroundColor:'#c8fffa',
519 borderWidth:5,
520 borderColor:'#96e9ff',
521 borderRadius:20,
522 shadowBlur:2,
523 shadowColor:'#2efcfb',
524 shadowOffsetX:0,
525 shadowOffsetY:0,
526 },
527 axisLabel: {
528 interval:0,
529 color:"white",
530 fontWeight:'bold',
531 fontSize:20,
532
533 textBorderWidth:4,
534 textBorderColor:'black',
535 textShadowColor:'black',
536 textShadowBlur:2,
537 textShadowOffsetX:2,
538 },
539 // max:800,
540 min:-200,
541 max:800
542 }
543 ],
544 series:[
545 {
546 type:'bar',
547 name:'确诊',
548 data:sureUpData,
549 symbol:'emptyCircle',
550 symbolSize:14,
551 // step:true,
552 label:{
553 show:true,
554 fontSize:19,
555 position:'top'
556 },
557 lineStyle:{
558 color:'red',
559 width:4,
560 },
561 itemStyle:{
562 color:'red',
563 },
564 barGap:2,
565 // barCategoryGap:220,
566 },
567 {
568 type:'bar',
569 name:'疑似',
570 data:guessUpData,
571 symbol:'emptyCircle',
572 symbolSize:14,
573 label:{
574 show:true,
575 fontSize:19,
576 position:'top',
577 offset:[0,-10]
578
579 },
580 lineStyle:{
581 color:'orange'
582 },
583 itemStyle:{
584 color:'orange'
585
586 },
587
588 },
589 {
590 type:'bar',
591 name:'治愈',
592 data:cureUpData,
593 yAxisIndex:1,
594 symbol:'emptyCircle',
595 symbolSize:14,
596 label:{
597 show:true,
598 fontSize:19,
599 position:'top',
600 },
601 lineStyle:{
602 color:'green',
603 width:4,
604 },
605 itemStyle:{
606 color:'green'
607
608 }
609 },
610 {
611 type:'bar',
612 name:'死亡',
613 data:deathUpData,
614 yAxisIndex:1,
615 symbol:'emptyCircle',
616 symbolSize:14,
617 label:{
618 show:true,
619 fontSize:19,
620 position:'top',
621 offset:[0,-5]
622
623 },
624 lineStyle:{
625 color:'black',
626 width:2,
627 },
628 itemStyle:{
629 color:'black'
630
631 }
632 },
633
634 ],
635
636
637 };
638 myChart.setOption(option)
639 </script>
640 </body>
641 </html>
来源：https://www.cnblogs.com/RedDragon/p/12292182.html