Echarts中series循环添加数据

310 阅读1分钟

向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

如图所示:

image.png

问题代码:

var myChart1 = echarts.init(document.getElementById('demo1'));

//首先初始化Echarts实例

image.png 1.option配置图表属性。

image.png 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>

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

image.png