ECharts獲取後臺json資料
阿新 • • 發佈:2019-02-16
ECharts給的例項中,資料都是固定的,如果想要動態繫結資料,就需要從後臺查詢,然後返回資料給echarts來生成圖表。本文以柱狀圖為例,介紹了前臺如何獲取後臺返回的資料,來顯示圖表的流程。本文分為前臺和後臺兩部分敘述:
前臺:
1. 為圖示的顯示宣告一個具有寬高的DOM元素
2. 引入echarts主檔案,同時引入jquery包,用於傳送ajax請求到後臺
3. 為模組載入器配置echarts的路徑
4. ajax傳送請求
5. ajax獲取資料後,使用自定義函式,畫出圖表(其實就是對ECharts中例項進行封裝,利用後臺的資料動態替換部分內容:圖例、橫座標、資料內容)
<pre name="code" class="javascript">// 生成圖示函式 // divId 為 DOM元素的id // data 為 返回的json資料,包括三個部分:圖例、橫座標、資料內容陣列 function drawBar(divId,data){ // 載入需要使用到的echarts包 require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function(ec){ var myChart = ec.init(document.getElementById(divId)); myChart.setOption({ tooltip : { trigger: 'axis' }, legend: { //1. json資料中的圖例 data:data.legend }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : data.xAxis_data//2. json資料中的橫座標 } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], series : data.series//3. json資料中的顯示資料 }); } ); }
後臺:
後臺主要是查詢資料庫,然後構建json返回。本文是使用php直接建立陣列,使用json_encode生成Json資料返回的。
php使用json_encode時,一定要注意索引陣列和關聯陣列生成json的區別。function getData(){ // 這裡使用php的json_encode函式 // 如果需要["蒸發量","降水量"]型別的json值,應該使用索引陣列 // 如果需要{"legend":"value1","xAxis_data":"value2","series":"value3"}的json值,應該使用關聯陣列 //這裡主要是構建json資料返回 //構建圖例legend //等同於$legend = array("蒸發量","降水量"); $legend = array(0=>"蒸發量",1=>"降水量"); //構建橫座標 $xAxis_data = array('1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'); //構建資料內容陣列 $series =array(); //由於需要{"name":"",type":"","data":""}型別的json值,使用關聯陣列 $serie1 = array(); $serie1["name"] = "蒸發量"; $serie1["type"] = "bar"; $data = array(2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3); $serie1["data"] = $data; //由於需要{"name":"",type":"","data":""}型別的json值,使用關聯陣列 $serie2 = array(); $serie2["name"] = "降水量"; $serie2["type"] = "bar"; $data = array(2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3); $serie2["data"] = $data; //由於最終的陣列內容是["",""]格式的json,所以使用索引陣列 array_push($series, $serie1); array_push($series, $serie2); // 由於需要{"legend":"value1","xAxis_data":"value2","series":"value3"}的json值,應該使用關聯陣列 $result = array(); $result["legend"] = $legend; $result["xAxis_data"] = $xAxis_data; $result["series"] = $series; //返回json header("Content-Type:application/json"); echo json_encode($result); }
注:非連續的索引陣列使用json_encode時,也會得到和關聯陣列一樣的結果。