Echart配置对象异步初始化问题

来源：互联网发布：白金数据电影天堂编辑：程序博客网时间：2024/06/05 04:52

echart效果与功能非常强大，在实用调用中，存在一个问题，按官方简单入门例子调用代码执行，如果是使用 echarts/build/source/echarts.js文件，会在

1711行报，空错不能调用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];    };

原因是

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

解决方法：

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

示例代码如下：

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

0 0