Echarts中series循环添加数据

记录用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>

循环遍历的数据加载成功:

 

猜你喜欢

转载自www.cnblogs.com/yisanx/p/12469933.html