欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+echarts實(shí)現(xiàn)多條折線圖

 更新時(shí)間:2022年03月21日 16:39:40   作者:dengdengchen  
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)多條折線圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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ù)據(jù)頁面不更新的問題

    Vue之修改數(shù)據(jù)頁面不更新的問題

    這篇文章主要介紹了Vue之修改數(shù)據(jù)頁面不更新的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • 詳解vue.js的devtools安裝

    詳解vue.js的devtools安裝

    本篇文章主要介紹了詳解vue.js的devtools安裝 ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-05-05
  • Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐

    Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐

    本文主要介紹了Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • 解決vue-cli?卸載不掉的問題

    解決vue-cli?卸載不掉的問題

    這篇文章主要介紹了vue-cli?卸載不掉的問題解決方法,文中給大家介紹了安裝后問題分析及解決方案,需要的朋友可以參考下
    2023-01-01
  • Vite結(jié)合Vue刪除指定環(huán)境的console.log問題

    Vite結(jié)合Vue刪除指定環(huán)境的console.log問題

    這篇文章主要介紹了Vite結(jié)合Vue刪除指定環(huán)境的console.log問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • Vue+Element樹形表格實(shí)現(xiàn)拖拽排序示例

    Vue+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鉤子函數(shù)總結(jié)

    這篇文章主要為大家介紹了十個(gè)Vue.js中有用的自定義鉤子,讓我們的代碼更加好看。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下
    2022-04-04
  • Electron-vue開發(fā)的客戶端支付收款工具的實(shí)現(xiàn)

    Electron-vue開發(fā)的客戶端支付收款工具的實(shí)現(xiàn)

    這篇文章主要介紹了Electron-vue開發(fā)的客戶端支付收款工具的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-05-05
  • Vue組件渲染與更新實(shí)現(xiàn)過程淺析

    Vue組件渲染與更新實(shí)現(xiàn)過程淺析

    這篇文章主要介紹了Vue組件渲染與更新實(shí)現(xiàn)過程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-03-03
  • 簡單說說如何使用vue-router插件的方法

    簡單說說如何使用vue-router插件的方法

    這篇文章主要介紹了如何使用vue-router插件的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04

最新評論