vue echart折线图,echarts折线图图例
本文主要详细介绍了几种折线图在vue echarts中的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue echarts实现多折线图的具体代码，供大家参考。具体内容如下
数据直接写在页面上，没有json格式。
大致效果
页面代码：
模板
！-准备一个集装箱dom -大小适合echarts-
div id= main style= width:100%；高度：300像素；/div
/模板
脚本
从“电子海图”导入电子海图
导出默认值{
名称： ，
data() {
返回{
图表： ，
/*意见：[1 ， 3 ， 3 ， 4 ， 5]，*/
扩展数据：[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/30 ， 1/31 ， 2/1 ， 2/2 ， 2/3 ， 2/4 ， 2/5 ， 2/6 ， 2/7 ， 2/8 ， 2/9 ， 2/10 ，
数据：【0，0，0，291，440，571，830，1287，1975，2744，4515，5974，7710，9689，11790，14376，17203，20437，24324，28018，31147，34542，37109，40158，42633
bdata: [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 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 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 ]
}
},
方法：{
绘制线(id) {
this . charts=echarts . init(document . getelementbyid(id))
this.charts.setOption({
标题：{
正文：“中国流行病统计”
},
工具提示：{
触发器：“轴”
},
图例：{
数据：[累计诊断，累计死亡，累计治愈]//图例
},
网格：{
左：“3%”，
对：“4%”，
底部："3%",
containLabel: true
},
工具箱：{
功能：{
saveAsImage: {}
}
},
xAxis: {//横坐标
名称： 日期，
类型："类别",
边界差距：假，
数据：this.xdata
},
亚西斯：{
名称： 数量，
类型："值"
},
//三条折线就有三种系列，可以更改类型以改变是否为折线
系列：[{
名称： 累计确诊，
类型："行",
数据：this.adata，
},{
名称： 累计死亡，
类型："行",
数据：this . b数据
},{
名称： 累计治愈，
类型："行",
数据：this.cdata
}]
})
}
},
//调用
已安装(){
这个. nextTick(function() {
this.drawLine(main )
})
}
}
/脚本
样式范围
* {
边距：0;
填充：0;
列表样式：无；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。