echarts的xAxis的type=’time’

熟悉下echarts圖表，options配置項的xAxis參數

當你的數據有時間和值，你可以做成類目型折線圖，也可以做成時間軸折線圖。類目型就是點與點之間等距，時間不等距；而做成時間軸，則時間等距，兩點之間不一定等距。

options基本屬性

1. xAxis的type，data

• type
  • category
  • time
• min (座標軸刻度最小值)
  • ‘dataMin’，此時取數據在該軸上的最小值作爲最小刻度。
  • 不設置時會自動計算最小值保證座標軸刻度的均勻分佈
  • 也可以用函數寫一個刻度方法，value參數，是包含min和max的對象

  min: function(value) {
      return value.min - 20;
  }
  

• max（與min一致）
• splitNumber （分割段數，在類目軸中無效）
• data（數據數組）

當type爲category時，x軸必須通過 data 設置類目數據
x軸自定義顯示的方法在axisLabel的formatter函數中設置

axisLabel:{
   	color:"#8da5b2",
   	formatter:(value,index)=>{
 	  	let xDate = new Date(value);
		return xDate.getFullYear()+"年"+" "+xDate.getMonth()+1+"/"+xDate.getDate()+" "+xDate.getHours()+":"+xDate.getMinutes()+":"+xDate.getSeconds();
   	}
}

2. toolbar

自定義鼠標點上去的彈框顯示

tooltip:{
  	trigger:'axis',
   	formatter: function (params) {
   		let index = params[0].dataIndex
	}
},

3. series

• type （圖表類型）
  • line
• name （影響默認的tooltip顯示）
• showSymbol: true;
• hoverAnimation: true(鼠標滑過點的時候，點放大的效果，默認爲true)

1. 當xAxis的type爲類目的時候，顯示的symbol會隨着x軸數據多的情況，自動隱藏部分symbol，即showAllSymbol的隨主軸標籤間隔隱藏策略。
   但當xAxis的type爲time的時候，就不會自動隱藏，會每個都顯示。

2. 當type爲類目的時候，data就是一般的數據數據，但當type是time的時候，data的格式就變成
   [['2019-8-14 8:00:00', 1], ['2019-8-14 8:10:00', 3], ['2019-8-14 8:20:00', 5], ['2019-8-14 8:30:00', 6], ['2019-8-14 8:40:00', 66],['2019-8-14 8:50:00', 8], ['2019-8-14 9:00:00',11], ['2019-8-14 9:20:00', 32], ['2019-8-14 9:30:00', 54]]
   當然，時間格式是時間戳的行式也可以[1522306819000, 2]

當type=time時，x軸不需要再另外設置data。
只需要再series中的data設爲二維數組，每個元素是時間戳和值。
此時x軸會自定刻度間隔，需要自定義的話，使用splitNumber屬性

自定義在折線上顯示值的方法

label: { //顯示值的算法，有一定間距的顯示
   	show: true,
    color:'#8da5b2',
    formatter:(params)=>{
		return params.value[1]+'°C';
	}
}