vue+echarts实现多条折线图
本⽂实例为⼤家分享了vue+echarts实现多条折线图的具体代码，供⼤家参考，具体内容如下
数据未使⽤json格式，直接写在页⾯
⼤致效果
页⾯代码：
<template>
<!--为echarts准备⼀个具备⼤⼩的容器dom-->
<div id="main" ></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        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,7        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 ,30        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 ,8
096 ,9419 ,10851 ,12552 ,14376 ,16157 ,18266 ,20658 ,22888 ,24734 ,27323 ,29745 ,32495 ,36117 ,39002 ,41625 ,            }
},
methods: {
drawLine(id) {
this.charts = echarts.ElementById(id))
this.charts.setOption({
title: {
text: '中国疫情统计'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['累计确诊','累计死亡','累计治愈']//图例
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {//横坐标
name: "⽇期",
type: 'category',
boundaryGap: false,
data: this.xdata
},
yAxis: {
name: "数量",
type: 'value'
},
//三条折线就有三种series，可以更改type以改变是否为折线
series: [{
name: '累计确诊',
type: 'line',
data: this.adata,
},{
name: '累计死亡',
type: 'line',
data: this.bdata
},{
setoption
name: '累计治愈',
type: 'line',
data: this.cdata
}]
})
}
},
//调⽤
mounted() {
this.$nextTick(function() {
this.drawLine('main')
})
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。