echarts实现动态加载series

最新推荐文章于 2025-06-17 22:50:31 发布

原创最新推荐文章于 2025-06-17 22:50:31 发布 · 7.8k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue.js

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ECharts实现动态加载Series数据，并确保图表能够实时更新。通过将Series设置为数组并利用myChart.setOption(option,true)的方式，可以实现在未知数据数量的情况下动态更新图表，适合用于需要实时展示数据变化的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setOptions({ xData, yData ,zData} = {}) {
    let colorArr=['#88bafe','#ffa304','#8bbb51','#FB7653','#73D0F7'];
    this.chartBar.setOption({
        /.......其他设置/
        series:function(){
           let serie=[]
           yData.forEach((element,index) => {
              serie.push(
                  {
                       data: yData[index],
                       name:zData[index],
                       type: "line",
                       itemStyle: {
                           color: colorArr[index]
                       },
                       symbol:'circle',
                       symbolSize:6,
                       smooth: true
                   }
               )
           });
          return serie;
       }()


    },true)
}

在不知道有多少条数据的情况下，echarts动态加载series。在option中设置series值为一个数组，通过动态改变series值来动态更新图表。注意，设为数组时echarts会默认将更新的数据和之前数据合并。解决办法：myChart.setOption(option,true)。