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)

当xAxis的type为类目的时候，显示的symbol会随着x轴数据多的情况，自动隐藏部分symbol，即showAllSymbol的随主轴标签间隔隐藏策略。
但当xAxis的type为time的时候，就不会自动隐藏，会每个都显示。
当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的xAxis的type=’time’相关推荐

Cannot find module ‘echarts‘ or its corresponding type declarations.
Vue3+ts 在引入echarts会报错 Cannot find module 'echarts' or its corresponding type declarations. 先npm i @t ...
ECharts 使用xAxis.boundaryGap使x轴两边不留空白
1 使用详解 xAxis.boundaryGap 说明:x坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样. 默认值:true. 参数类型:boolean,Array. 可选值: (1)true ...
ECharts 使用xAxis.axisLine.lineStyle.color设置x坐标轴轴线颜色
1 使用详解 xAxis.axisLine.lineStyle.color 说明:刻度标签文字的颜色,支持回调函数. 默认值:'#333'. 参数类型:Color. 可选值:请参考以下博客. ECha ...
ECharts 使用series.lineStyle.type设置虚线（两种）
1 使用详解 series.lineStyle.type 说明:线条类型. 默认值:'solid'. 参数类型:string. 可选值: (1)'solid',实线. (2)'dotted',点型虚线 ...
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
先详细看一下xAxis和yAxis配置的图表效果下图详细的标注了图表中x轴y轴可见的内容说明一下: x轴y轴在echarts配置项里,从内容上来说大体上没有太大区别,x轴能用的配置项y轴基本也可以 ...
Echarts之甘特图type: ‘custom‘参数详解
甘特图 const groupData = XEUtils.groupBy(data, "eqpName"); //分组后的数据 const yAxisData = Object. ...
3、echarts配置项-xAxis
直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠. var option{x ...
【echarts】xAxis鼠标事件失效问题
项目中用到echarts柱状图,出现x轴标签文字过长重叠问题,在pass掉标签倾斜.换行方案之后最终决定限制文字长度,超出以-占位,鼠标悬浮时显示完整tooltip. 但编写过程中发现xAxis鼠标事 ...
echarts的xAxis的axisLabel的使用
xAxis的axisLabel是用来设置x轴的刻度以及一些参数的设置. axisLabel: {interval: 10,formatter: (value, index) => {// 1小时 ...