vueecharts遇到的bug之⼀⽆法渲染的问题
图表⽰这样的
页⾯上有很多个图表，由于没有查询按钮，就只是点击发送ajax数据，所以把所有图表的⽅法放在updated中，
功能是实现了没问题，但是加载页⾯的时候会发送很多的ajax请求，⽽且点击修改的时候整个页⾯的图表都会重绘，
⽬前考虑的解决办法是做⼀个判断，如果当前的的这个对象的数值发⽣改变了再出发DOM更新，⼤家有没有更好的⽅法，谢啦
感谢@zhaokang 的回答，我在设置watch监听数组之后，已经可以动态的更新echarts图表，
效果如下 touchComparison是⼀个数组
但是新的问题⼜来了，之前的需求是进⼊页⾯⾃动加载六个图表。之前写在updated是没问题，但是会导致发送⼤量重复的请求，以及整体的更新。
这次watch之后，写在mounted⾥进⼊页⾯渲染图表
但是报错，提⽰⽆效的dom
尝试了写在vue $nexttick created()当中还是有问题。
之前项⽬中这样写是没问题的
个⼈猜测是否由于页⾯结构⽐较复杂，导致dom还没⽣成的时候就触发了渲染
这是methods⾥图表的⽅法
drawLineChart2() {
this.chartLine2 = echarts.ElementById('chartLine2'));
this.chartLine2.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
x: 'center',
y: 'bottom',
data: ['A', 'B', 'C', 'D']
},
grid: {
left: '',
right: '7%',
bottom: '7%',
containLabel: true
},
toolbox: {
feature: {
restore: {},
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value',
setoption
},
series: []
});
let params = new URLSearchParams();
params.append("days", uchComparisonUser.days);
params.append("is_licai_new", uchComparisonUser.is_licai_new);
params.append("trans_type", ans_type);
this.chartLine2.showLoading();
this.$ajax.post(this.baseURL + "/findiff", params, {
})
.then((res) => {
this.chartLine2.hideLoading();
let date = [];
let date1 = [];
let date2 = [];
let date3 = [];
let date4 = [];
let dataList = res.data.data;
for (let key in dataList) {
for (let key2 in dataList[key]) {
if (key == "A") {
date.push(key2);
date1.push(dataList[key][key2]["uv"]);
}
if (key == "B") {
date2.push(dataList[key][key2]["uv"]);
}
if (key == "C") {
date3.push(dataList[key][key2]["uv"]);
}
if (key == "D") {
date4.push(dataList[key][key2]["uv"]);
}
}
}
this.chartLine2.setOption({        //加载数据图表
xAxis: {
data: date
},
series: [
{
name: 'A',
type: 'line',
data: date1
},
{
name: 'B',
type: 'line',
data: date2
},
{
name: 'C',
type: 'line',
data: date3
},
{
name: 'D',
type: 'line',
data: date4
},
]
});
})
.catch((err) => {
console.log("获取数据失败", err);
});
},
页⾯中的引⽤
mounted⽅法的调⽤
把这个问题解决了，在这⾥写⼀下吧，很多bug也是查别⼈⽂档才解决的，这个问题我注意打断点调试了⼀下，页⾯的第⼀个例⼦是展⽰汇总数据的⼀个表格
这个表格⽤的语法是{{this.属性}}，这样的话会产⽣⼀个阻塞，因为是双向绑定的数据，这个请求的数据必须返回之后，才能渲染页⾯，由于
进⼊页⾯渲染echarts是写在mounted
当中的，所有的请求会同时发送。
这就导致请求的时候获取不到页⾯上的id，事实证明打印这id也是⽆法到的。
没有到页⾯对应的元素，也就是产⽣这个报错。
我的解决⽅案是写⼀个公共的组件，把这个图表单独做了⼀个引⽤的公共组件。
也考虑过写在其他的钩⼦函数当中，考虑到复⽤的问题，所以写成了公⽤组件，⽅便下次调⽤。注：本⼈原创，欢迎转载，记得转出处。 Sherlock09

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。