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

转载于:https://www.cnblogs.com/Sherlock09/p/7486211.html