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>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。