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

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(

       {......}

   );    

}





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值