vue+echarts實(shí)現(xiàn)多條折線圖
本文實(shí)例為大家分享了vue+echarts實(shí)現(xiàn)多條折線圖的具體代碼,供大家參考,具體內(nèi)容如下
數(shù)據(jù)未使用json格式,直接寫在頁面
大致效果
頁面代碼:
<template> ?? ?<!--為echarts準(zhǔn)備一個(gè)具備大小的容器dom--> ?? ?<div id="main" style="width: 100%;height: 300px;"></div> </template> <script> ?? ?import echarts from 'echarts' ?? ?export default { ?? ??? ?name: '', ?? ??? ?data() { ?? ??? ??? ?return { ?? ??? ??? ??? ?charts: '', ? ? ? /*?? ?opinion: ["1", "3", "3", "4", "5"],*/ ? ? ? ? xdata:["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","4/1","4/2","4/3","4/4","4/5","4/6","4/7","4/8","4/9","4/10","4/11","4/12","4/13","4/14","4/15","4/16","4/17","4/18","4/19","4/20","4/21","4/22","4/23","4/24","4/25","4/26","4/27","4/28","4/29","4/30","5/1","5/2","5/3","5/4","5/5"], ?? ??? ?adata: [0,0,0,0,291,440,571,830,1287,1975,2744,4515,5974,7710,9689,11790,14376,17203,20437,24324,28018,31147,34542,37109,40158,42638,44653,58761,63851,66491,68500,70550,72436,74185,75002,75891,76288,76741,77150,77658,78064,78497,78824,79251,79824 ?? ?,80026 ?? ?,80151 ?? ?,80270 ?? ?,80409 ?? ?,80552 ?? ?,80651 ?? ?,80695 ?? ?,80735 ?? ?,80754 ?? ?,80778 ?? ?,80793 ?? ?,80813 ?? ?,80824 ?? ?,80844 ?? ?,80860 ?? ?,80881 ,80894,80928,80967,81008,81054,81093,81171,81218,81285,81340,81394,81439,81470,81518,81554 ,81589,81620,81639,81669,81708,81740,81802 ,81865,81907 ?? ?,81953 ?? ?,82052 ?? ?,82160,82249,82295,82341,82692,82719,82735,82747,82758,82788,82798,82804,82816,82827,82830,82836,82858,82862,82874,82875,82877,82880,82881,82883 ], ? ? ? ? bdata: [0,0,0,0,0,9 ,17 ,25 ,41 ,56 ,80 ,106 ,132 ,170 ,213 ,259 ,304 ,361 ,425 ,490 ,563 ,636 ,722 ,811 ,908 ,1016 ,1113 ,1259 ,1380 ,1523 ,1665 ,1770 ,1868 ,2004 ,2118 ,2236 ,2345 ,2442 ,2592 ,2663 ,2715 ,2744 ,2788 ,2835 ,2870 ,2912 ,2943 ,2981 ,3012 ,3042 ,3070 ,3097 ,3119 ,3136 ,3158 ,3169 ,3176 ,3189 ,3199 ,3213 ,3226 ,3237 ,3245 ,3248 ,3255 ,3261 ,3270 ,3277 ,3281 ,3287 ,3292 ,3295 ,3300 ,3304 ,3305 ,3312 ,3318 ,3322 ,3326 ,3329 ,3331 ,3331 ,3333 ,3335 ,3336 ,3339 ,3339 ,3341 ,3341 ,3342 ,3342 ,4632 ,4632 ,4632 ,4632 ,4632 ,4632 ,4632 ,4632 ,4632 ,4632 ,4633 ,4633 ,4633 ,4633 ,4633 ,4633 ,4633 ,4633 ,4633 ,4633 ], ? ? ? ? cdata: [0,0,0,0,0,0,28 ,34 ,38 ,49 ,51 ,60 ,103 ,124 ,171 ,243 ,328 ,475 ,630 ,892 ,1153 ,1540 ,2049 ,2649 ,3280 ,3996 ,4740 ,5642 ,6723 ,8096 ,9419 ,10851 ,12552 ,14376 ,16157 ,18266 ,20658 ,22888 ,24734 ,27323 ,29745 ,32495 ,36117 ,39002 ,41625 ,44462 ,47204 ,49856 ,52045 ,53726 ,55404 ,57065 ,58600 ,59897 ,61475 ,62793 ,64111 ,65541 ,66911 ,67749 ,68679 ,69601 ,70420 ,71150 ,71740 ,72244 ,72703 ,73159 ,73650 ,74051 ,74588 ,74971 ,75448 ,75770 ,76052 ,76238 ,76408 ,76571 ,76751 ,76964 ,77078 ,77167 ,77279 ,77370 ,77455 ,77525 ,77575 ,77663 ,77738 ,77816 ,77892 ,76979 ,77029 ,77062 ,77084 ,77123 ,77151 ,77207 ,77257 ,77346 ,77394 ,77474 ,77555 ,77578 ,77610 ,77642 ,77685 ,77713 ,77766 ,77853 ,77911 ] ?? ??? ??? ?} ? ? }, ? ?? ??? ?methods: { ?? ??? ??? ?drawLine(id) { ?? ??? ??? ??? ?this.charts = echarts.init(document.getElementById(id)) ?? ??? ??? ??? ?this.charts.setOption({ ? ? ? ? ? title: { ? ? ? ? ? ? text: '中國疫情統(tǒng)計(jì)' ? ? ? ? ? }, ?? ??? ??? ??? ??? ?tooltip: { ?? ??? ??? ??? ??? ??? ?trigger: 'axis' ?? ??? ??? ??? ??? ?}, ?? ??? ??? ??? ??? ?legend: { ?? ??? ??? ??? ??? ??? ?data: ['累計(jì)確診','累計(jì)死亡','累計(jì)治愈']//圖例 ?? ??? ??? ??? ??? ?}, ?? ??? ??? ??? ??? ?grid: { ?? ??? ??? ??? ??? ??? ?left: '3%', ?? ??? ??? ??? ??? ??? ?right: '4%', ?? ??? ??? ??? ??? ??? ?bottom: '3%', ?? ??? ??? ??? ??? ??? ?containLabel: true ?? ??? ??? ??? ??? ?}, ? ?? ??? ??? ??? ??? ?toolbox: { ?? ??? ??? ??? ??? ??? ?feature: { ?? ??? ??? ??? ??? ??? ??? ?saveAsImage: {} ?? ??? ??? ??? ??? ??? ?} ?? ??? ??? ??? ??? ?}, ?? ??? ??? ??? ??? ?xAxis: {//橫坐標(biāo) ? ? ? ? ? ? ??? ??? ??? ?name: "日期", ?? ??? ??? ??? ??? ??? ?type: 'category', ?? ??? ??? ??? ??? ??? ?boundaryGap: false, ?? ??? ??? ??? ? ??? ??? ?data: this.xdata ?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ?}, ?? ??? ??? ??? ??? ?yAxis: { ? ? ? ? ? ? ??? ??? ??? ?name: "數(shù)量", ?? ??? ??? ??? ??? ??? ?type: 'value' ?? ??? ??? ??? ??? ?}, ?? ??? ??? ??? ??? ?//三條折線就有三種series,可以更改type以改變是否為折線 ?? ??? ??? ??? ??? ?series: [{ ?? ??? ??? ??? ??? ??? ?name: '累計(jì)確診', ?? ??? ??? ??? ??? ??? ?type: 'line', ?? ??? ??? ??? ??? ??? ?data: this.adata, ?? ??? ??? ??? ??? ?},{ ?? ??? ??? ??? ??? ??? ?name: '累計(jì)死亡', ?? ??? ??? ??? ??? ??? ?type: 'line', ?? ??? ??? ??? ??? ??? ?data: this.bdata ?? ??? ??? ??? ??? ?},{ ?? ??? ??? ??? ??? ??? ?name: '累計(jì)治愈', ?? ??? ??? ??? ??? ??? ?type: 'line', ?? ??? ??? ??? ??? ??? ?data: this.cdata ?? ??? ??? ??? ??? ?}] ?? ??? ??? ??? ?}) ?? ??? ??? ?} ?? ??? ?}, ?? ??? ?//調(diào)用 ?? ??? ?mounted() { ?? ??? ??? ?this.$nextTick(function() { ?? ??? ??? ??? ?this.drawLine('main') ?? ??? ??? ?}) ?? ??? ?} ?? ?} </script> <style scoped> ?? ?* { ?? ??? ?margin: 0; ?? ??? ?padding: 0; ?? ??? ?list-style: none; ?? ?} </style>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐
本文主要介紹了Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11Vite結(jié)合Vue刪除指定環(huán)境的console.log問題
這篇文章主要介紹了Vite結(jié)合Vue刪除指定環(huán)境的console.log問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue+Element樹形表格實(shí)現(xiàn)拖拽排序示例
本文主要介紹了Vue+Element樹形表格實(shí)現(xiàn)拖拽排序示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08十個(gè)有用的自定義Vue鉤子函數(shù)總結(jié)
這篇文章主要為大家介紹了十個(gè)Vue.js中有用的自定義鉤子,讓我們的代碼更加好看。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2022-04-04Electron-vue開發(fā)的客戶端支付收款工具的實(shí)現(xiàn)
這篇文章主要介紹了Electron-vue開發(fā)的客戶端支付收款工具的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05