echart异步初始化报getAttribute方法错误


64x64
匿名 2017-11-04 23:47 472

按照官方例子调用代码执行写demo时,在初始化时,在 echarts/build/source/echarts.js文件,出现 不能调用getAttribute方法错误。

self.init = function (dom, theme) {  
        var zrender = require('zrender');  
        if ((zrender.version || '1.0.3').replace('.', '') - 0 < self.dependencies.zrender.replace('.', '') - 0) {  
            console.error('ZRender ' + (zrender.version || '1.0.3-') + ' is too old for ECharts ' + self.version + '. Current version need ZRender ' + self.dependencies.zrender + '+');  
        }  
        dom = dom instanceof Array ? dom[0] : dom;  
        var key = <span style="color:#FF0000;">dom.getAttribute(DOM_ATTRIBUTE_KEY);</span>  //这里的dom对象是空  
        if (!key) {  
            key = _idBase++;  
            dom.setAttribute(DOM_ATTRIBUTE_KEY, key);  
        }  
        if (_instances[key]) {  
            _instances[key].dispose();  
        }  
        _instances[key] = new Echarts(dom);  
        _instances[key].id = key;  
        _instances[key].canvasSupported = _canvasSupported;  
        _instances[key].setTheme(theme);  
        return _instances[key];  
    };



echartelement-uivue 回答问题

2 个解决方案


1
匿名 2017-11-04T23:55:38

使用echart的按需加载,在异步初加载文件时,如果 对象并没有马上构造成功,就直接调用init方法就会出错。

如:

require(  
            [  
                'echarts',  
                'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载  
            ],  
            function (echart) {  
  
               var chart=echart.init(document.getElementById('xxxx')); 
//在这里的时候,异步初始化,对象并没有马上构造成功,如果直接调用 echart.init()就会报错,图表刷不出来。
...... } );

解决方法:

轮询等待确认echart对象构造完成,再调用其相关的方法实现图表渲染。

<span style="color:#6633FF;">var echartConfig = null;</span>  
  
require(  
            [  
                'echarts',  
                'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载  
            ],  
            function (echart) {  
//全局变量指向配置对象 echartConfig = echart;</span>
} ); //这里调用轮询器,间隔检查echartConfig配置对象是否完成初始化。 var timeId = window.setInterval(checkEChartInit,1000); //轮询器,定时调用查看配置对象是否非空 function checkEChartInit(){ //判断echartConfig配置对象是否完成初始化 if(echartConfig){ //消除轮询函数 clearInterval(timeId); //统计查询渲染图表 showEchart(); } } function showEchart(){ //初始化图表对象 var mychart = echartConfig.init(document.getElementById('xxx')); //设置图表的显示属性 mychart.setOption( {......} ); }



2
匿名 2017-08-07T17:56:11

这个是window操作系统的问题,检查你import文件的路径跟你项目文件路径,大小写是否一致,

如:E:\App\src\views\Home.vue和E:\App\src\views\home.vue的就存home和Home大小写不一致。


评论