vue echarts 遇到的bug之一 没法渲染的问题

图表示这样的

 

页面上有不少个图表，因为没有查询按钮，就只是点击发送ajax数据，因此把全部图表的方法放在updated中，

 

功能是实现了没问题，可是加载页面的时候会发送不少的ajax请求，并且点击修改的时候整个页面的图表都会重绘，
目前考虑的解决办法是作一个判断，若是当前的的这个对象的数值发生改变了再出发DOM更新 ，你们有没有更好的方法，谢啦
感谢@zhaokang 的回答，我在设置watch监听数组以后，已经能够动态的更新echarts图表，

 

效果以下 touchComparison是一个数组

 

可是新的问题又来了，以前的需求是进入页面自动加载六个图表。以前写在updated是没问题，可是会致使发送大量重复的请求，以及总体的更新。
此次watch以后，写在mounted里进入页面渲染图表

 

可是报错，提示无效的dom

 

尝试了写在vue $nexttick created()当中仍是有问题。
以前项目中这样写是没问题的

 

我的猜想是否因为页面结构比较复杂，致使dom还没生成的时候就触发了渲染
这是methods里图表的方法

drawLineChart2() {
            this.chartLine2 = echarts.init(document.getElementById('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', }, series: [] }); let params = new URLSearchParams(); params.append("days", this.touchComparisonUser.days); params.append("is_licai_new", this.touchComparisonUser.is_licai_new); params.append("trans_type", this.touchComparisonUser.trans_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