echarts如何动态更新图表data数据

IT 文章1周前更新小编

0 0 0

在使用vue绘制echarts图标后，想要动态更新图表data数据该怎么实现呢？如果你还不会Vue整合echarts可以参考：Vue整合echarts使用案例。接下来我们看下如何动态更新echarts图标数据。

其实想要更新图表data数据非常简单，只要更新option中的data属性就行，案例如下：

以下是一张饼图的初始化代码：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

// vue data
data() {
    return {
      myChart: undefined,
      myOption: {},
    }
  },

// 挂载初始化
mounted() {
    this.myChart = echarts.init(this.$refs.djchart)
      this.myOption = {
        title: {
          text: 'demo',
          subtext: 'demo占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '叠件',
            type: 'pie',
            radius: '50%',
            data: this.stackChartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
   this.myChart.setOption(this.myOption)
},

接着我们发请求获取动态数据然后更新到饼图的data，代码实现：

listMyPieChart(this.pieChartQuery).then(response => {
        // 主要就是这个设值
        this.myChart.setOption({
          series: [{
            data: response.data
          }]
        })
})

这样我们就可以实现动态更新echarts图标数据了，data改变后，图标也会自动重新绘制。

以上就是echarts如何动态更新图表data数据的全部内容，希望对你有帮助！