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資料返回的。

		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時，也會得到和關聯陣列一樣的結果。