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

你可能感兴趣的:(Echarts)