echarts实现动态加载series

最新推荐文章于 2024-10-08 08:40:47 发布

安忘

最新推荐文章于 2024-10-08 08:40:47 发布

阅读量7.5k

点赞数 5

分类专栏： echarts 文章标签： js vue.js

本文链接：https://blog.csdn.net/u012637258/article/details/108717107

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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)。