记录用Echarts构建图表所遇到的问题。
向series配置循环添加数据的方法:
var series=[]; //定义一个数组变量用于存放配置 for(var i = 0;i<data.length;i++){ series.push({ name: data[i], type: 'line', stack: '总量', data: data[i].data }); } //...echarts配置 series: series //讲数组变量赋值即可
用以上方法写入数据后,装载配置信息时,报如下错误:
Uncaught TypeError: Cannot read property 'get' of undefined
如图所示:
问题代码:
var myChart1 = echarts.init(document.getElementById('demo1'));
//首先初始化Echarts实例
1.option配置图表属性。
2.在按开头方法循环遍历series的数据
3.setOption添加新的配置信息(即循环遍历的series数据)
以上,在第三步时出现问题,setOption时没有装入数据,具体原因暂时没发现。
解决方式:
将遍历完的series1配置信息数组直接赋值给第一次的配置信息。
<html>
<body>
<div id="demo1" class="layui-col-sm12" style="height: 280px;"></div>
</body>
</html>
<script>
var series1 = []; //建立series1数组,用于存放遍历的series的数据配置信息
var myChart1 = echarts.init(document.getElementById('demo1')); //初始化Echarts实例
myChart1.showLoading(); //显示等待画面
$.ajax({ …… success:funcation(data){ myChart1.hideLoading(); //隐藏加载动画
var countMax=0; for(var key in data.Maxdata){ //push向series1数组添加数据
series1.push( { name: keyword[countMax], type: 'bar', data: data.Maxdata[key] } ); countMax++; } //配置图表信息,以柱形图为例
var option1={ tooltip: { trigger: 'axis', axisPointer: { //坐标轴指示器,坐标轴触发有效
type: 'shadow' } }, legend:{ data:data.Keyword //装载ajax请求的数据 }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ['第一季度', '第二季度', '第三季度', '第四季度'] } ], yAxis: [ { type: 'value' } ], series: series1 //将配置信息数组,赋给series
}; myChart1.setOption(option1,true); //加载数据图表
//第二个参数为true的原因是防止多次请求造成数据错乱。
//true:覆盖掉之前的配置信息。
series1=[]; //清空数组,避免多次请求,数据重复添加。
} }) </script>
循环遍历的数据加载成功: