最近在完成企業報表圖形處理時用了百度echarts，梳理一點以php為後端完成web頁面的Ajax重新整理圖形

此處以最近在用的thinkphp5.0框架為例，多餘內容不贅述

首先php頁面隨便建立一個控制器

public function index(){
	$arr=array(
    		'title'=>array('text'=>'優惠券領取情況','subtext'=>'副標題隨便寫點'),
    		'tooltip'=>array('trigger'=>'axis'),
    		'legend'=>array('data'=>array('滿100減80','滿500打7折')),
    		'toolbox'=>array('show'=>true,
    				'feature'=>array('mark'=>array('show'=>true),
    						'dataView'=>array('show'=>true,'readOnly'=>false),
    						'magicType'=>array('show'=>true,'type'=>array('line','bar')),
    						'restore'=>array('show'=>true),
    						'saveAsImage'=>array('show'=>true),
    					   )
			  ),
    		'calculable'=>true,
    		'xAxis'=>array(array('type'=>'category','boundaryGap'=>false,'data'=>array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24))),
    		'yAxis'=>array(array('type'=>'value','axisLabel'=>array('formatter'=>'{value} 張'))),
    		'series'=>array(array('name'=>'滿100減80',
    				      'type'=>'line',
    				      'data'=>array(11, 11, 15, 13, 12, 13, 10, 18, 15 , 16, 12 , 13, 14, 15 ,16, 12 , 13, 14, 15 ,12,16, 12 , 13, 14, 15),
    				      'markPoint'=>array('data'=>array(array('type'=>'max','name'=>'最大值'),array('type'=>'min','name'=>'最小值'))),
    				      'markLine'=>array('data'=>array(array('type'=>'average','name'=>'平均值')))),
    			 	array('name'=>'滿500打7折',
    				'type'=>'line',
    				'data'=>array(2,3,2,3,2,2,2,2,1,8,7,5,6,4,2,3,4,3,4,5,6,2,5,1,0),
    				'markPoint'=>array('data'=>array(array('type'=>'max','name'=>'最大值'),array('type'=>'min','name'=>'最小值'))),
    				'markLine'=>array('data'=>array(array('type'=>'average','name'=>'平均值')))
    				 )
			)
	);
	//陣列中改動部分一般為title,legend,x、y軸及series部分
	$this->assign('arr',json_encode($arr));
	return $this->fetch();
}
 

html頁面在需要的地方建立一個ID為main的div,設定個合適的高度

html程式碼不貼，無關緊要

js方面

先引入echarts的js

為圖方便部分用jQuery解決

 require.config({
        paths: {
            echarts: '__LIBS__/echarts/build/dist' //路徑先保證正確
        }
    });

    require(
        [
            'echarts',
            'echarts/chart/line'  // 按需載入
        ],
        function (ec){
	    myChart =  ec.init(document.getElementById('main'));//此處重點，設定全域性變數
	    var option={$arr}
	    mychart.setOption(option)  
 	})
 

//你需要的伺服器請求方法中...

var url=''  //你的請求資料地址
var  needs={};
     needs['yourQuery']='yourQuerys';
     jQuery.post(url,needs,function(data){
	//假如此處我只想改變第二張券的資料，data為我已經json_encode()處理好的資料陣列
	var option = myChart.getOption();
        option.series[1].data = data;   
        myChart.setOption(option); 
     });