echarts柱状图坐标轴内容显示不全的两种解决办法
作者:先知demons 时间:2023-09-06 03:57:34
情况一:坐标上的内容是文字时
如上图这样一个横向的柱状图,y坐标轴的内容太长后会导致显示不全。
因为数据是由后端传过来的,有些会很长有些会比较短,如果只是一味的调整grid会导致短数据前的留白过于多,布局不合理。这个时候就需要用一些别的属性。
解决办法:
在yAxis中的axisLabel中加入以下属性配置:
注释:
width: 60,//将内容的宽度固定
overflow: 'truncate',//超出的部分截断
truncate: '...',//截断的部分用...代替
附上官方文档截图:
情况二:如果纵坐标上是数字
如图,左侧的数据会展示不全
一、首先可以配置grid自适应
grid: {
top: "15%",
left: "2%",
right: "2%",
bottom: "2%",
containLabel: true
},
这样设置之后数字就会展示全了:
但是新的需求又来了,如果在数据特别大的情况下,左边数据占得位置就会越来越宽,导致布局不好看,所以我们可以对这种数字进行处理一下
在yAxis的axisLabel属性中进行配置formatter
formatter(v) {
v = v.toString()
if (v >= 100000000000) {
return (v.substring(0, 5) / 10) + '亿'
} else if (v >= 10000000000) {
return (v.substring(0, 4) / 10) + '亿'
} else if (v >= 1000000000) {
return (v.substring(0, 3) / 10) + '亿'
} else if (v >= 100000000) {
return (v.substring(0, 2) / 10) + '亿'
} else if (v >= 10000000) {
return v.substring(0, 4) + '万'
} else if (v >= 1000000) {
return v.substring(0, 3) + '万'
} else if (v >= 100000) {
return v.substring(0, 2) + '万'
} else if (v >= 10000) {
return (v.substring(0, 2) / 10) + '万'
} else if (v >= 1000) {
return v
} else {
return v
}
},
这样设置之后的效果如下图:
这样设置的好处是左侧不会因为数据过大而一度扩展表格左侧宽度
来源:https://blog.csdn.net/wzy_PROTEIN/article/details/129569022
标签:echarts,柱状图,坐标轴,显示
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python数学建模之三大模型与十大常用算法详情
2023-10-04 17:59:19
![](https://img.aspxhome.com/file/2023/4/123654_0s.png)
python3反转字符串的3种方法(小结)
2022-05-03 22:59:01
Golang压缩Jpeg图片和PNG图片的操作
2024-05-09 14:55:43
![](https://img.aspxhome.com/file/2023/5/127375_0s.jpg)
源码解析python的内存回收机制
2023-05-19 18:12:16
go-cache的基本使用场景示例解析
2023-08-06 00:52:02
Mysql出生日期转换为年龄并分组统计人数的方法示例
2024-01-14 14:58:03
textarea 在浏览器中固定大小和禁止拖动的实现方法
2024-04-19 10:17:41
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2022-01-14 12:27:24
![](https://img.aspxhome.com/file/2023/8/117518_0s.png)
golang-redis之sorted set类型操作详解
2024-02-02 05:19:20
![](https://img.aspxhome.com/file/2023/9/103029_0s.jpg)
python中__call__内置函数用法实例
2022-06-04 11:46:32
python 爬虫百度地图的信息界面的实现方法
2021-11-10 20:29:35
![](https://img.aspxhome.com/file/2023/9/65419_0s.png)
wxpython中自定义事件的实现与使用方法分析
2023-02-10 07:50:26
python数据处理 根据颜色对图片进行分类的方法
2022-02-27 08:41:37
![](https://img.aspxhome.com/file/2023/5/103765_0s.jpg)
Python PyQt5学习之自定义信号
2022-01-06 12:03:52
![](https://img.aspxhome.com/file/2023/7/72887_0s.png)
一文带你深入了解Python中的二次移动平均法
2021-08-30 00:28:12
![](https://img.aspxhome.com/file/2023/1/101211_0s.png)
JS/jQ实现免费获取手机验证码倒计时效果
2023-09-23 05:21:41
![](https://img.aspxhome.com/file/2023/7/56287_0s.jpg)
Python xlrd excel文件操作代码实例
2021-05-19 21:52:18
![](https://img.aspxhome.com/file/2023/3/107953_0s.png)
深入了解Go的interface{}底层原理实现
2024-05-21 10:19:03
![](https://img.aspxhome.com/file/2023/3/125073_0s.jpg)
javascript实现playfair和hill密码算法
2024-04-18 10:46:28
![](https://img.aspxhome.com/file/2023/0/136490_0s.png)
echarts柱状堆叠图实现示例(图例和x轴都是动态的)
2024-04-29 13:21:03
![](https://img.aspxhome.com/file/2023/2/132702_0s.jpg)