在使用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数据的全部内容，希望对你有帮助！
