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;
	}
}