echart图表清空上一次数据
echart图表清空上一次数据问题
·
问题描述:
后台接口查询数据
图表然后渲染出来
再次查询想要用新的数据重新渲染图表
问题它来了:图表一直保留老数据!!!但是神奇的是可以叠加。已经重新setOption了还是不行,在这里卡了许久找bug,我真的傻。
解决!!!
清空图表数据-----将option里的series里的data和name都删除!!(有些代码可忽略)
clear () { // 清空上次echart数据
for (var i = 0; i < this.option.series.length; i++) { //置空关键!!! 清空名字和数据
this.option.series[i].data = []
this.option.series[i].name = ''
}
this.myGridBarChart = echarts.init(this.$refs.gridBarChartElem) //再次初始化
this.myGridBarChart.setOption(this.option, true) //重新setOption
this.legendList = [] //清空之前
this.dataList = [] //清空之前
},
我这里是调用了图表组件,在这里用props接受后台查询的图表数据且用watch侦听变化,watch使用对象侦听形式,如下仅供参考 (option 为echart基本配置)
props:{
barData: {
type: Array,
default: () => {
return []
}
}
},
watch:{
'barData': {
handler (newVal) {
this.clear()
newVal.forEach((item, i) => {
this.legendList.push(item.card)
this.dataList.push(item.values)
})
this.option.yAxis[0].data = newVal[0].dates
this.legendList.forEach((item, index) => {
this.seriesData[index] = {
name: item,
type: 'bar',
stack: 'num',
emphasis: {
focus: 'series'
},
data: this.dataList[index]
}
})
this.option.series = this.seriesData
this.myGridBarChart.setOption(this.option) // 刷新图表
},
deep: true
}
}
更多推荐
所有评论(0)