echarts柱状图横坐标文字过长的解决办法

背景:echarts图中横坐标显示的文字过长,导致字都堆积在一块如下图所示
在这里插入图片描述
解决办法
一:可以尝试修改‘axisLabel’的‘rotate’和‘interval’参数,‘rotate’参数可以设置标签的旋转角度,可以避免标签之间的重叠,‘interval’参数可以设置标签的显示间隔。如果设置为0,那么所有标签都会显示,如果标签过多或者标签内容过长,可能文字会出现重叠,可以适当调整此参数的值来避免标签重叠。

option = {xAxis: {data: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],axisLabel: {interval: 0,rotate: 45}},// 其他配置项...
};```
效果如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/1869c204a72940db80178ebd8337ed24.jpeg#pic_center)二:轴标签超过特定长度时显示为省略号,可以使用’formatter‘函数来实现,这个函数可以让你自定义如何显示轴标签,如下代码

option = {
xAxis: {
data: [‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’],
axisLabel: {
interval: 0,
formatter: function(value) {
// 如果标签长度超过4,将剩余的文字替换为省略号
if (value.length > 4) {
return value.slice(0, 4) + ‘…’;
} else {
return value;
}
}else{
return value;
}
},
// 其他配置项…
}

若只需在特定分辨率宽度下使用此方法,可以先获取屏幕宽度

axisLabel: {
fontWeight: this.setWeight,
interval: 0,
formatter: function(value) {
// 如果标签长度超过4,将剩余的文字替换为省略号
if(window.innerWidth<=1366){
if (value.length > 3) {
return value.slice(0, 2) + ‘…’;
} else {
return value;
}
}
}
},

效果如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/13cf4fdbe4e34d61a009fe30bb85fea4.png)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/15853.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uni-app之微信小程序实现‘下载+保存至本地+预览’功能

目录 一、H5如何实现下载功能 二、微信小程序实现下载资源功能方面与H5有很大的不同 三、 微信小程序实现文件&#xff08;doc,pdf等格式&#xff0c;非图片&#xff09;下载&#xff08;下载->保存->预览&#xff09;功能 四、图片预览、保存、转发、收藏&#xff1…

Stephen Wolfram:神经网络

Neural Nets 神经网络 OK, so how do our typical models for tasks like image recognition actually work? The most popular—and successful—current approach uses neural nets. Invented—in a form remarkably close to their use today—in the 1940s, neural nets …

django自定义app,创建子应用

1.工程里创建apps包 &#xff1b; 2.创建子应用&#xff0c;pycharm terminal 运行&#xff1a;python ./nanage.py startapp app名称&#xff1b; 3.子应用移动到apps包里&#xff1b; 4.settings.py里设置INSTALLED_APPS如“apps.users”&#xff0c;该名字跟子应用apps.py文…

红宝石阅读笔记

第七章 迭代器与生成器 7.3 生成器 乍一看理解&#xff0c;仔细想没理解&#xff0c;然后自己让n2&#xff0c;还原nTimes&#xff0c;等价于 function* nTimes() {if (true) {yield* (function* A() {if (true) {yield* (function* B() { })();yield 0;}})();yield 1;} } 最…

NO1.使用命令行创建Maven工程

①在工作空间目录下打开命令窗口 ②使用命令行生成Maven工程 mvn archetype:generate 运行 MVN 原型&#xff1a;生成命令,下面根据提示操作 选择一个数字或应用过滤器&#xff08;格式&#xff1a;[groupId&#xff1a;]artifactId&#xff0c;区分大小写包含&#xff09;&a…

Jquery笔记

DOM对象通过jquery获取 所有的代码都是基于引入jquery.js文件 var mydiv $(#div);//直接获取到DOM对象元素id var mydiv$(.div)&#xff1b;//通过class获取DOM对象&#xff0c;如果有同名class只会获取第一个 var mysapn$(span);//通过元素的标签名获取DOM对象 var divarr$(…

无涯教程-jQuery - outerWidth( margin])方法函数

outerWidth([margin])方法获取第一个匹配元素的外部宽度(默认情况下包括边框和填充)。 此方法适用于可见和隐藏元素。由于父项被隐藏的元素不支持此功能。 outerWidth( [margin] ) - 语法 selector.outerWidth( [margin] ) 这是此方法使用的所有参数的描述- margin - 此…

JS学习之ES6

一、ES简介 ES6是一个泛指&#xff0c;指EDMAJavaScript之后的版本。它是JS的语言标准。 Nodejs 简介&#xff1a;它是一个工具&#xff0c;主攻服务器&#xff0c;使得利用JS也可以完成服务器代码的编写。 安装&#xff1a; 安装Nodejs的同时&#xff0c;会附带一个npm命令…

抓紧收藏,Selenium无法定位元素的几种解决方案

01、frame/iframe表单嵌套 WebDriver只能在一个页面上对元素识别与定位&#xff0c;对于frame/iframe表单内嵌的页面元素无法直接定位。 解决方法&#xff1a; driver.switch_to.frame(id/name/obj) switch_to.frame()默认可以直接取表单的id或name属性。如果没有可用的id和…

一文教你搭建工程化开发环境!

搭建工程化开发环境 下载 Node.js 官方下载地址 https://nodejs.org/zh-cn/download/releases node.js 版本迭代的非常快&#xff0c;目前官方已经推出到 v19.2.0 版本了&#xff0c;相对是一个比较新的版本了。建议下载 v14.18.3 版本&#xff0c;至少这个版本目前在很多项…

Android跨进程传大图思考及实现——附上原理分析

1.抛一个问题 这一天&#xff0c;法海想锻炼小青的定力&#xff0c;由于Bitmap也是一个Parcelable类型的数据&#xff0c;法海想通过Intent给小青传个特别大的图片 intent.putExtra("myBitmap",fhBitmap)如果“法海”(Activity)使用Intent去传递一个大的Bitmap给“…

iOS开发-聊天emoji表情与自定义动图表情左右滑动控件

iOS开发-聊天emoji表情与自定义动图表情左右滑动控件 之前开发中遇到需要实现聊天emoji表情与自定义动图表情左右滑动控件。使用UICollectionView实现。 一、效果图 二、实现代码 UICollectionView是一种类似于UITableView但又比UITableView功能更强大、更灵活的视图&#x…

无涯教程-jQuery - jQuery.post( url, data, callback, type)方法函数

jQuery.post(url&#xff0c;[data]&#xff0c;[callback]&#xff0c;[type])方法使用POST HTTP请求从服务器加载页面。 该方法返回XMLHttpRequest对象。 jQuery.post( url, [data], [callback], [type] ) - 语法 $.post( url, [data], [callback], [type] ) 这是此方法使…

JMeter常用内置对象:vars、ctx、prev

在前文 Beanshell Sampler 与 Beanshell 断言 中&#xff0c;初步阐述了JMeter beanshell的使用&#xff0c;接下来归集整理了JMeter beanshell 中常用的内置对象及其使用。 注&#xff1a;示例使用JMeter版本为5.1 1. vars 如 API 文档 所言&#xff0c;这是定义变量的类&a…

【数据结构篇C++实现】- 图

友情链接&#xff1a;C/C系列系统学习目录 文章目录 &#x1f680;一、图的基本概念和术语1、有向图和无向图3、基本图和多重图4、完全图5、子图6、连通、连通图和连通分量7、强连通图、强连通分量8、生成树、生成森林9、顶点的度、入度和出度10、边的权和网11、稠密图、稀疏图…

Ubuntu Server版 之 共享文件 samba和NFS 两种方法

NFS 和 Samba NFS &#xff1a; linux之间资源共享 Samba&#xff1a; 是windows系统与Linux系统之间资源共享的 samba 安装samba 工具 sudo apt install samba 创建共享目录 sudo mkdir /home/shared sudo chmod 777 /home/shared 配置sambd sudo vim /etc/samba/smb.con…

mysql的整体架构

服务层-引擎层-硬盘层 一条语句执行的整体过程: 先建立连接&#xff08;mysql -h -p 密码&#xff09;–预处理-词法分析-语法分析-优化器选择用什么索引表如何连接等-执行器 到这里都是属于server层&#xff0c;大多数功能包括视图&#xff0c;存储过程&#xff0c;触发器都是…

机器学习笔记之优化算法(一)无约束优化概述

机器学习笔记之优化算法——无约束优化概述 引言回顾&#xff1a;关于支持向量机的凸二次优化问题无约束优化问题概述解析解与数值解数值解的单调性关于优化问题的策略线搜索方法信赖域方法 引言 从本节开始&#xff0c;将介绍优化算法 ( Optimization Algorithm ) (\text{Opt…

用DBeaver进行数据备份与恢复

一、数据备份 1、选择需要备份的数据库或数据表&#xff0c;鼠标右击。 2、选择“工具-转存数据库” 3、勾选需要导出备份的数据库和数据表 可自行设置&#xff0c;这里直接点击开始&#xff1b; 导出完成 二、数据恢复 1、选择需要恢复的数据库或数据表&#xff0c;鼠标右…

台灯头灯手电筒UL153亚马逊美国站测试要求

在将台灯、头灯或手电筒上架到亚马逊美国站之前&#xff0c;UL153测试是必不可少的一项认证。UL153是美国安全实验室&#xff08;Underwriters Laboratories&#xff09;颁布的一项标准&#xff0c;旨在确保产品的安全性和可靠性。那么&#xff0c;我们应该如何办理UL153测试报…