图表示这样的

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

 

vue echarts 遇到的bug之一 无法渲染的问题
页面上有很多个图表,由于没有查询按钮,就只是点击发送ajax数据,所以把所有图表的方法放在updated中,

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

 

vue echarts 遇到的bug之一 无法渲染的问题
功能是实现了没问题,但是加载页面的时候会发送很多的ajax请求,而且点击修改的时候整个页面的图表都会重绘,
目前考虑的解决办法是做一个判断,如果当前的的这个对象的数值发生改变了再出发DOM更新 ,大家有没有更好的方法,谢啦
感谢@zhaokang 的回答,我在设置watch监听数组之后,已经可以动态的更新echarts图表,

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

 

vue echarts 遇到的bug之一 无法渲染的问题
效果如下 touchComparison是一个数组

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

 

vue echarts 遇到的bug之一 无法渲染的问题
但是新的问题又来了,之前的需求是进入页面自动加载六个图表。之前写在updated是没问题,但是会导致发送大量重复的请求,以及整体的更新。
这次watch之后,写在mounted里进入页面渲染图表

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

 

vue echarts 遇到的bug之一 无法渲染的问题
但是报错,提示无效的dom

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

 

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

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

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

 

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

个人猜测是否由于页面结构比较复杂,导致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);
                });
        },

页面中的引用

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

 

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

mounted方法的调用

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

 

vue echarts 遇到的bug之一 无法渲染的问题
把这个问题解决了,在这里写一下吧,很多bug也是查别人文档才解决的,这个问题我注意打断点调试了一下,页面的第一个例子是展示汇总数据的一个表格
这个表格用的语法是{{this.属性}},这样的话会产生一个阻塞,因为是双向绑定的数据,这个请求的数据必须返回之后,才能渲染页面,由于进入页面渲染echarts是写在mounted

当中的,所有的请求会同时发送。
这就导致请求的时候获取不到页面上的id,事实证明打印这id也是无法找到的。
没有找到页面对应的元素,也就是产生这个报错。
我的解决方案是写一个公共的组件,把这个图表单独做了一个引用的公共组件。

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

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

 


也考虑过写在其他的钩子函数当中,考虑到复用的问题,所以写成了公用组件,方便下次调用。

注:本人原创,欢迎转载,记得转出处。 Sherlock09

分类:

技术点:

相关文章: