这篇文章主要给大家介绍了关于vue+echarts实现动态折线图的方法与注意事项,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
之前公司有个绘制实时盈利率折线图的需求,实现的还不错,今天来分享下vue+echarts实现动态折线图的方法。
实现代码
// 设定宽高,不然超出windows会显示不出来 #myChart{ width: 100%; height: 500px; margin: 0 auto; }
要注意的有三点:
- mounted中init并setOption初始化echarts
- echartsOption里的data绑定数组
- setInterval中要更新数组并重新将数组赋值给echarts选项
效果图
总结
以上就是vue+echarts实现动态折线图的方法与注意的详细内容,更多请关注本站其它相关文章!