前言
最近的项目使用了 vue-chartjs 图表和 echarts 图表。昨天联调接口发现接口返回数据后，图表没有根据数据更新。还是默认数据渲染的图表。
排查
确认了接口没问题和代码也没报错后。审查代码发现是图表的渲染是在 mounted 中执行的，而这个生命周期函数只执行一次，所以数据更新了，图表没有响应式更新也是正常的。本来还以为是要调用专门的 API 去刷新图表。
解决
经过网上查找资料发现，其实只要使用 watch 检测数据，然后当数据更新后调用图表的绘制方法就可以了。就这么简单。
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| props: {
chartsData: {
type: Array,
required: true,
validator: function(value) {
return value.length > 0;
}
}
},
computed: {
counts() {
let count = [];
this.chartsData.forEach(item => {
count.push(item.allAmountTotalDay);
});
return count;
},
days() {
let day = [];
this.chartsData.forEach(item => {
day.push(item.day);
});
return day;
},
// all 计算属性的用途是将需要 watch 的两个属性合并到一起再进行监测
all() {
return { counts: this.counts, days: this.days };
}
},
watch: {
all(curVal) {
// 数据发生改变，便调用图表绘制方法传入最新数据绘制
this.drawLine(curVal.counts, curVal.days);
}
},
mounted() {
this.drawLine(this.counts, this.days);
},
methods: {
drawLine(counts, days) {}
}
|
总结
将绘制方法定义在 methods 中便于复用，首先第一次在 mounted 中调用。然后使用 watch 属性监测处理过后的 chartsData ,数据改变时调用绘制方法，传入最新数据绘制。🆗 了。