記錄用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>
循環遍歷的數據加載成功: