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>

循環遍歷的數據加載成功:

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM