設置echarts相關樣式（包括動態傳值，動態獲取座標軸上最大值及間距等）

最近利用echarts畫圖，總結了一些常見的樣式修改，以及動態傳值等知識點：

// 動態傳值，可從後臺獲取數據賦值
var xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月'];
var yAxisDataBar = [122, 300, 600, 100, 900, 540];
var data:yAxisDataLine = [1, 23, 22, 10, 7, 0];
var myEcharts = echarts.init(document.getElementById("echarts"));   //初始化
	    var option = {
		legend: {
			data: ['訂單數','付款數']
		},
		xAxis: [{
			type:'category',
            boundaryGap : false,   // 設置x軸數據從座標軸頂頭開始（即xy軸交界處0開始）
			data: xAxisData,   // 動態傳值
			axisPointer:{
				type:'shadow'
			},
			axisLabel : {
				textStyle: {color: "#656565"},    // 設置座標值顏色
				interval: xAxisData.length/10,    // 設置座標軸值刻度間隔顯示
			},
			axisLine: {
                show: false,   // 控制座標軸是否顯示
                lineStyle: {
                    width:3,   //這裏是座標軸的寬度,可以去掉
                }
            },
			axisTick: {show: false},   // 去除座標軸上的刻度線
            splitLine: {
                 show: false,           //  控制網格線是否顯示
                 lineStyle: {          // 改變網格線顏色
                      color: ['red']
                 }                            
            },
		}],
		yAxis: [{
			type:'value',
			min: 0,
			max: Math.ceil(Math.max.apply(null, yAxisDataBar)),       // 可根據傳入數據，動態獲取最大值，且向上取整
			interval: Math.ceil(Math.max.apply(null, yAxisDataBar))/5,   // 可根據傳入數據，動態獲取間隔(此處除以5默認設置y軸數值間隔5段)
			axisLabel: {
				textStyle: {color: "#656565"},    // 設置座標值顏色
				formatter: '{value}'
			},
			axisLine: {show: false},   // 控制座標軸是否顯示
			axisTick: {show: false}   // 去除座標軸上的刻度線
		},{
			type:'value',
			min: 0,
			max: 30,   // 同上，也可動態獲取最大值
			interval: 5,   // 同上，也可動態獲取y軸間距
			axisLabel: {
				textStyle: {color: "#656565"},    // 設置座標值顏色
				formatter: '{value}'
			},
			splitLine: {show: false},   // 控制網格線是否顯示
			axisLine: {show: false},   // 控制座標軸是否顯示
			axisTick: {show: false}   // 去除座標軸上的刻度線
		}],
		series: [{
			name:'訂單數',
			type:'bar',
			itemStyle:{
				normal:{color:'#a8e1d6'}
			},
			data: yAxisDataBar   // 動態傳值
		},{
			name:'付款數',
			type:'line',
			yAxisIndex: 1,   // 定義付款數的數據置於y軸右側
			itemStyle:{
				normal:{color:'#2384c6'}
			},
			data:yAxisDataLine,   // 動態傳值
			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(205, 228, 242, 0.6)'
					}, {
						offset: 1,
						color: 'rgba(205, 228, 242, 0.6)'
					}])
				}
			}
		}]
	};
	chartContainer.setOption(option);

其中：

1. Math.max.apply(null, yAxisDataBar)  用於獲取數組 yAxisDataBar 最大值，Math.min.apply(null, yAxisDataBar)  用於獲取數組 yAxisDataBar 最小值，可用於不確定數據最大值時根據數據動態展示座標軸數值。

 2.此份demo爲y軸兩側都有數據，如需只保留一側數據，則注意對應刪除以下三個地方數據：

     （1） legend 中的 data 數組；

     （2） yAxis 中對應你想刪除的y軸數據

     （3） series 中對應你想刪除的數據， 此處注意，留下的一組中不能帶有 yAxisIndex 屬性，否則圖表不會展示