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