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动态折线图内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！