可视化结果如下：
实现代码：
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>