參考：官方教程  配置項

最近使用折線圖和餅圖居多，使用時一般要修改其預設格式

ECharts 3 開始不再強制使用 AMD 的方式按需引入，程式碼裡也不再內建 AMD 載入器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 script 標籤引入。

<script src="echarts.min.js"></script>

折線：

1、在固定位置定義div

<div class="first-item">
       <div style="text-align:center;margin-top:10px">故障資料分析 共$!sumCount1次</div>
       <div id="mainChart1" style="width: 100%;height:270px;"></div>
</div>
 

2、新增js 

<script>
	var data = $data1;                      //對返回的json資料進行處理
	var timeData = new Array(0);            //宣告陣列
	var values = new Array(0);
	for(var i=0;i<data.length;i++){
		timeData.push(data[i].d);       //放值
		values.push(data[i].v);
	}
	
	var myChart = echarts.init(document.getElementById('mainChart1'));   //基於準備好的dom，初始化echarts例項
	option = {
		/*title : {                             //標題
		    text: '裝置故障圖',
		    subtext: '近7天修理',
		    x: 'center'
		},*/                           
		tooltip : {				//提示框
		    trigger: 'axis',
		    axisPointer: {
			animation: false
		    }
		},                         
		/*legend : {                         //圖例 - 顯示開關
		    data:['數量'],               
		    x: 'left'
		 },*/                           
		/*toolbox : {                        //右上角工具按鈕
		    dataZoom : {     
		        yAxisIndex : 'none'
		    },
		    restore : {},
		    saveAsImage : {}
		},*/                      
		axisPointer : {
		    link: {xAxisIndex: 'all'}
		},
		dataZoom : [{                       //dataZoom 元件 用於區域縮放，從而能自由關注細節的資料資訊，或者概覽資料整體，或者去除離群點的影響。
		    show : true,
		    realtime : true,
		    start : $start,                 //顯示資料起始位置
		    end : $end,                     //顯示資料結束位置        
		    xAxisIndex : [0,1]              //表示這個 dataZoom 元件控制 第一個 和 第二個 xAxis
		}],
		/*grid : [{                         //直角座標系內繪圖網格，單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸; 直接註釋掉單個表會自動完全填充,
		    left: 50,
		    right: 50,
		    height: '35%'
		}, {
		    left: 50,
		    right: 50,
		    top: '55%',
		    height: '35%'
		}],*/       
		xAxis : [{
		    type : 'category',
		    bounddaryGap : false,
		    axisLine : {onZeron : true},
		    data : timeData                  //x軸顯示資料
		},                                   //第一個xAxis
		{}                                   //第二個xAxis                                                    
		],
		yAxis : [{
			name : '資料',                   //y軸的定義
			type : 'value',
			max : $faultNum                  //動態顯示最大故障數                          
		},
		{}
		],            
		series : [                           //系列列表。每個系列通過 type 決定自己的圖表型別
		    {  
			name:'故障數量',
			type:'line',
			symbolSize: 8,
			hoverAnimation: true,        //是否開啟 hover 在拐點標誌上的提示動畫效果
			data: values
		    }
		]，
		color:['#28d8ce']                    //折線顏色
	};
	myChart.setOption(option);               //使用剛指定的配置項和資料顯示圖表
</script>
 

效果：