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(
{......}
);
}