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

前端 潘老师 1个月前 (01-09) 47 ℃ (0) 扫码查看

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

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

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

// 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数据的全部内容,希望对你有帮助!

 


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12743.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】