vue工程中需要用到echarts显示柱形图,而echarts有个对vue很友好的开源封装项目叫v-charts,而使用v-charts的过程中碰到了数据更新但是v-charts图形不刷新的问题,也就是没监听到数据,下面是未更新图形的代码写法:
export default {
name: "...",
props: {
...
},
computed: {
...
},
data() {
return {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: this.categroy
},
...
category:[],
...
}
},
created() {
},
watch: {
...
},
methods: {
loadData() {
// 发起请求得到数据
this.apiRmp.cmcApi.getCt7AvgTimeSummaryMetrics(this.params)
.then(data => {
...
this.populateData();
}).catch(e => this.$cdpMsgAlert('Failed to load CT7 average time summary metrics',
e)).finally(() => {
});
},
populateData() {
// 这里对数据进行更新,domUtils是项目封装的工具模块不用关心
if (domUtils.isNotEmptyArray(data)) {
data.forEach(i => {
// 更新 category 数据,这样v-charts不会监听到
this.category.push(i.name);
});
}
},
...
}
}
populateData对this.category进行更新,但是发现y轴的维度没有更新,很奇怪,查了很久没有答案,后来尝试以下写法得以成功:
export default {
name: "...",
props: {
...
},
computed: {
...
},
data() {
return {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
// 直接初始化yAxis.data为数组
data: []
},
...
// 去掉category
// category:[],
...
}
},
created() {
},
watch: {
...
},
methods: {
...
populateData() {
if (domUtils.isNotEmptyArray(data)) {
data.forEach(i => {
// 直接使用到yAxis中要更新的数组
this.yAxis.data.push(i.name);
});
}
},
...
}
}
成功更新数据刷新v-charts图形。是个挺麻烦的问题,这里记录下,希望能给有困扰的人一些帮助^.^