vue+echarts实现动态折线图的方法与注意

2022-01-14,,,,

这篇文章主要给大家介绍了关于vue+echarts实现动态折线图方法与注意事项,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

之前公司有个绘制实时盈利率折线图的需求,实现的还不错,今天来分享下vue+echarts实现动态折线图的方法。

实现代码

   // 设定宽高,不然超出windows会显示不出来 #myChart{ width: 100%; height: 500px; margin: 0 auto; } 

要注意的有三点:

  • mounted中init并setOption初始化echarts
  • echartsOption里的data绑定数组
  • setInterval中要更新数组并重新将数组赋值给echarts选项

效果图

总结

以上就是vue+echarts实现动态折线图的方法与注意的详细内容,更多请关注本站其它相关文章!

《vue+echarts实现动态折线图的方法与注意.doc》

下载本文的Word格式文档,以方便收藏与打印。