在使用vue绘制echarts图标后,想要动态更新图表data数据该怎么实现呢?如果你还不会Vue整合echarts可以参考:Vue整合echarts使用案例。接下来我们看下如何动态更新echart……
在使用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数据的全部内容,希望对你有帮助!
还没有评论呢,快来抢沙发~