记录用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>
循环遍历的数据加载成功: