Echarts X轴类型为time时，X轴标签的细化（年月日时分秒）

先贴一个原来的标签效果

原来这个标签可能会感觉内容有点少，一眼看去不能很清晰的知道这个标签的含义。后面发现可以对标签重新编辑，参考echarts官方示例Documentation - Apache ECharts

首先，xAxis 的 type 类型要先确保是 time，注意不要写 data，时间类型的 data 是要和 yAxis 值组成数组元素存在 series 的 data 中的

然后在 xAxis 下添加 axisLabel 对象

axisLabel: {formatter: (value, index) => {let dateTime = this.$utils.getFormatTime(value)dateTime = dateTime.substring(0, dateTime.length - 3)return dateTime.replace(' ', '\n')}
}

这里 formatter 函数的形参 value 接受的是各标签的时间戳，需要先对时间戳进行转换，有需要的可以去查下相应的方法，我这边贴下我的方法

/*** 根据传入的时间戳获取格式化时间* @param {*} stamp 时间戳 可通过 new Date().getTime() 获取* @returns */
export const getFormatTime = (stamp) => {let year = new Date(stamp).getFullYear()let month = new Date(stamp).getMonth() + 1month = month < 10 ? '0' + month : monthlet date = new Date(stamp).getDate()date = date < 10 ? '0' + date : datereturn year + '-' + month + '-' + date + ' ' + new Date(stamp).toLocaleTimeString('chinese',{hour12:false})
}

返回的格式为：年-月-日时:分:秒

接受并转换时间戳后，就获得了完整的时间格式，后面可以根据需要对内容进行修改，或者不修改直接 return

我这里是吧秒给去了，并将时和分做了一个换行

let dateTime = this.$utils.getFormatTime(value)
dateTime = dateTime.substring(0, dateTime.length - 3)
return dateTime.replace(' ', '\n')

xAxis完整代码如下：

xAxis: {type: 'time',boundaryGap: false,axisPointer: {type: 'shadow'},axisLabel: {formatter: (value, index) => {let dateTime = this.$utils.getFormatTime(value)dateTime = dateTime.substring(0, dateTime.length - 3)return dateTime.replace(' ', '\n')}}
},

效果图如下：

Echarts X轴类型为time时，X轴标签的细化（年月日时分秒）相关推荐

年月日时紫白推算表_年月日时飞星算法
精二十四山砂水诀细解品奇门点窍课抗疫精神"二十字"解读堂小畜卦-韬光养晦年月日时飞星算法只有计算出准确的年.月.日.时飞星,才能准确的测算出风水在时间上的变 ...
echarts x轴类型解析
option = {xAxis: {type: 'value',data: [1, 2, 3, 4, 5, 6, 7],name: 'x轴'},yAxis: {type: 'value',name: ...
Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
一、Echarts图表之X轴（xAxios）与Y轴（yAxios）配置项大全
x轴(xAxios)与y轴(yAxios)有很多的配置项,下面对xAxios进行详解,yAxios参考xAxios. axisLine: 坐标轴轴线相关设置. axisTick 坐标轴刻度相关设置. ...
没数据时y轴不显示_Matplotlib数据可视化
1.Matplotlib介绍什么是Matplotlib Matplotlib是一个Python的绘图库,它可与 NumPy 一起使用,可以代替M Matplotlib安装由于Matplotlib是 ...
Echarts pie 饼图类型后显示数据
Echarts pie 饼图类型后显示数据 sysPie:function(libtypelist){var that=this;libtypelist=that.indexData.libtypel ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
echarts的y轴文字显示不全、y轴文字与轴之间设置间隔
第一步: grid: {left: "55",containLabel: true }, left 容器左侧的距离. containLabel 用于『防止标签溢出』的场景,标签溢出 ...
SQL server 数据库获取datetime2(7)类型的年月日时分秒及其他时间格式
记录SQL server中datetime2(7)类型数据取年月日时分秒 –取值时间格式为:2021-08-19 Select CONVERT (CHAR(10), History.Date, 120 ...
Vue.js 手机端H5，时间选择器实现：年月日时分秒、年月日时分、年月日时、年月日、年月、年、月、日、时、分、秒，时分秒、时分多种类型
目录一.效果查看时间选择器实现效果视频二.目录三.index.vue <template><div><date-picker keys="0" ...

Echarts X轴类型为time时，X轴标签的细化（年月日时分秒）

Echarts X轴类型为time时，X轴标签的细化（年月日时分秒）相关推荐

最新文章

热门文章