echarts中X轴显示特定个数label并修改样式的方法详解
作者:keloneko 发布时间:2024-05-29 22:14:30
标签:echarts,X轴,label
前言
在使用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


猜你喜欢
- 小孩子刚刚开始学说话的时候,常常是一个字一个字地开始学,比如学说“饺子”,对他/她来讲,似乎有点难度,大人也聪明,于是就简化了,用“饺饺”来
- 首先让我们来看看有关 Perl 面向对象编程的三个基本定义:1. 一个“对象”是指一个“有办法知道它是属于哪个类”的简单引用。(
- python3.6下载地址: https://www.python.org/ftp/python/3.6.4/Python-3.6.4.tg
- 先上个效果图: Sample6_1.php 中创建Form: //显示上传状态和图片 <div id="showi
- <?php function getIPLoc_sina($queryIP){ $url =
- 本文实例讲述了用python读写excel的方法。分享给大家供大家参考。具体如下:最近需要从多个excel表里面用各种方式整理一些数据,虽然
- 全文检索引擎入门灰常不幸的是,关系型数据库对全文检索的支持没有被标准化。不同的数据库通过它们自己的方式来实现全文检索,而且SQL
- 一、基础知识1、MySQL-python的安装下载,然后 pip install 安装包2、python编写通用数据库程序的API规范(1)
- PyTorch: https://github.com/shanglianlm0525/PyTorch-Networksimport tor
- 八种获取当前日期的js代码,第一步:把如下代码加入<head>区域中:<SCRIPT language=java
- 内容: ************* 1安装MYSQL后更改了ROOT的密码后用 net startmysql 启动时我就遇到了这样的问题.使
- 对于注入而言,错误提示是极其重要。所谓错误提示是指和正确页面不同的结果反馈,高手是很重视这个一点的,这对于注入点的精准判断至关重要。本问讨论
- 下面的文章主要描述的是如何正确通过rpm包安装、对MySQL进行配置与卸载,以下就有详细内容对配置MySQL与卸载MySQL(和PHP搭配之
- 一、绘制线性图形执行如下代码import matplotlib.pyplot as pltdataX=[1,2,3,4]dataY=[2,4
- 前言在我们抓取网页内容的时候,通常是抓取一整个页面的内容,而我们仅仅只是需要该网页中的部分内容,那该如何去提取呢?本章就带你学习xpath插
- 1、、软件环境:Ubuntu 14.04.1 LTS (GNU/Linux 3.13.0-32-generic x86_64)MySQL 5
- 前言近端时间看了一个短视频,觉得视频的背景音乐片段很不错,想把这个背景音乐得到,虽然小编运用Python爬虫肯定能得到这首音乐,但是这个音乐
- 每天都要记得健康打卡尊敬的老师,我忘了这次的健康打卡,反思的时候我想了很多东西,反省了很多事情,自己也很懊悔,触犯了学校的规定,深刻认识到自
- 通过python+splinter,实现在12306网站刷票并自动购票流程(无法自动识别验证码)。此类程序只是提高了12306网站的 <
- 本文介绍MySQL查看数据库表容量大小的命令语句,提供完整查询语句及实例,方便大家学习使用。 1.查看所有数据库容量大小select tab