echarts中X轴显示特定个数label并修改样式的方法详解
作者:keloneko 时间:2024-05-29 22:14:30
前言
在使用echarts绘图时可能遇到一些特别的需求,如,当x周表示日期且数据较多(如三个月,按天统计),此时如果按照echarts的默认配置,则会根据空间剩余的大小自动计算最终显示有限的几个不重叠的label
需求: 必须显示起始日期和终止日期
echarts默认属性会导致如果重叠,最大值和最小值会被隐藏,首先要实现不让最大值和最小值隐藏,这很简单
xAxis: {
axisLabel: {
showMinLabel: true,
showMaxLabel: true
}
}
需求: 由于画布限制,只让显示起始和终止日期,或者再加上中间日期
此时如果只设置上面的两个属性,中间的刻度仍然会根据echarts的算法去绘制,依然是按照剩余空间来显示,不一定会符合要求,即便只显示了一个值,可能也不是我们预期的那一个,那么还有一个属性
xAxis: {
axisLabel: {
showMinLabel: true,
showMaxLabel: true,
interval: Math.ceil(data.length / 2)
}
}
interval 属性表示间隔多少项展示一个刻度,在这里我们直接取一半,这样其他的刻度就会被隐藏掉
这是种比较简单的实现方法,当然也可以直接对label进行格式化
xAxis: {
data: data,
axisLabel: {
formatter (val, i) {
if (i === 0 || i === data.length - 1 || i === Math.ceil(data.length / 2)) {
return val
}
return ''
}
}
}
这种写法,我们将只留下需要的刻度,其余都赋值为'',一样可以实现需求,同时也可以对最终值进行格式化
如moment(val).format('YYYY-MM-DD')等
需求: 将起始和终止刻度限定在轴线范围内,不允许现实超过轴线
这时候单纯的靠属性已经没办法满足需求,因为很明显左右都需要调整,同时一个是左边多了,一个是右边多了,此时需要用到echarts的富文本模式rich
// 左右两个位置需要调整,需要定义两个类名
// 这里样式可以用padding, 也可以用宽度和对齐方式来做(我用这种),
const richCss = {
start: {
width: 145,
align: 'right'
},
end: {
width: 145,
align: 'left'
}
}
这样我们就有了两个类名, 再通过第二步的formatter函数的方法将其通过富文本的方式渲染
xAxis: {
data: data,
axisLabel: {
formatter (val, i) {
if (i === 0) {
return `{start| ${val}}`
} else if (i === data.length - 1) {
return `{end| ${val}}`
} else if (i === Math.ceil(data.length / 2)) {
return val
}
return ''
},
rich: richCss
}
}
这样就实现了将两端刻度限定在轴线范围内, 达到美化的目的,当然如果中间的刻度位置有问题也可以用相同的方法进行调整
这是本人在工作中遇到的需求,然后自己揣摩出的解决方案,如果有更好的方案欢迎留言,一起学习
来源:https://blog.csdn.net/keloneko/article/details/122992107
标签:echarts,X轴,label
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
laravel实现中文和英语互相切换的例子
2024-04-29 14:06:55
![](https://img.aspxhome.com/file/2023/3/130873_0s.jpg)
python实现的系统实用log类实例
2022-08-02 18:50:57
Python过滤序列元素的方法
2023-07-05 17:53:37
Oracle与SQL Server在企业应用的比较
2024-01-25 07:22:11
JavaScript ES6中const、let与var的对比详解
2024-05-22 10:37:36
php实现的美国50个州选择列表实例
2023-11-17 11:06:06
8种Python异常检测算法总结
2021-02-26 20:30:35
![](https://img.aspxhome.com/file/2023/6/121526_0s.png)
解析PHP可变函数的经典用法
2024-06-05 09:38:32
python排序算法之归并排序
2021-03-24 06:05:39
![](https://img.aspxhome.com/file/2023/7/70037_0s.jpg)
InnoDB解决幻读的方法详解
2024-01-15 13:50:53
![](https://img.aspxhome.com/file/2023/8/122888_0s.jpg)
使用递归遍历对象获得value值的实现方法
2024-04-10 13:58:53
Python内置函数详细解析
2021-08-19 21:03:35
python3.7 使用pymssql往sqlserver插入数据的方法
2021-10-13 00:23:34
说说tab设计
2009-07-26 09:56:00
![](https://img.aspxhome.com/file/UploadPic/20097/26/tab-yahoo-63s.jpg)
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2024-02-27 00:00:25
Python线性网络实现分类糖尿病病例
2022-03-13 11:23:25
![](https://img.aspxhome.com/file/2023/9/70179_0s.png)
MySQL6.0新增特性
2010-03-25 10:08:00
python神经网络Batch Normalization底层原理详解
2021-01-28 12:50:08
![](https://img.aspxhome.com/file/2023/2/75292_0s.png)
sqlserver 游标的简单示例
2024-01-12 13:29:01
SQL Server使用T-SQL进阶之公用表表达式(CTE)
2024-01-17 22:42:32
![](https://img.aspxhome.com/file/2023/8/89698_0s.jpg)