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