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…

windowSoftInputMode设置stateHidden,DIALOG dismiss后,键盘再次显示

windowSoftInputMode设置stateHidden&#xff0c;DIALOG dismiss后&#xff0c;键盘再次显示 解决1 把windowSoftInputMode中的stateHidden属性去掉 android:windowSoftInputMode"adjustPan"解决2 在//在super.dismiss();前添加键盘隐藏方法&#xff0c;避免wind…

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 …

SpringBoot 整合 MongoDB 连接 阿里云MongoDB

注&#xff1a;spring-boot-starter-data-mongodb 2.7.5&#xff1b;jdk 1.8 阿里云MongoDB是副本集实例的 在网上查找了一番&#xff0c;大多数都是教连接本地mongodb或者linux上的mongodb 阿里云上有java版连接教程&#xff0c;但它不是SpringBoot方法配置的&#xff0c;是手…

linux安装oracle

oracle安装 基于linux系统安装 Linux安装oracle12C Centos7.6 内存8GB 硬盘&#xff1a;50GB 可视化图形界面 yum groupinstall "GNOME Desktop" -y 可视化后续安装命令 1、软件环境包安装 yum -y install binutils compat-libcap1 compat-libstdc-33 gcc-c glib…

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$(…

Spring源码:Spring运行环境Environment

Spring运行环境 Spring在创建容器时&#xff0c;会创建Environment环境对象&#xff0c;用于保存spring应用程序的运行环境相关的信息。在创建环境时&#xff0c;需要创建属性源属性解析器&#xff0c;会解析属性值中的占位符&#xff0c;并进行替换。 创建环境时&#xff0c…

无涯教程-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命令…

远程控制平台简介

写在前面 之所以想自己动手实现一个远程控制平台,很大一部分原因是因为我那糟糕的记性,虽然经常加班到很晚,拖着疲惫的步伐回到家,才想起忘记打卡了,如果我能在家控制在办公室的手机打一下卡就好了… 有人说,市场上有TeamViewer,向日葵,AnyDesk,ToDesk,等等这些老大…

抓紧收藏,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给“…

pinctrl 子系统与gpio子系统深入理解

绑定文档&#xff0c;官网为了不同的芯片的pinctrl规范写了一个模板 linux-imx-rel_imx_4.1.15_2.1.0_ga_alientek/Documentation/devicetree/bindings/pinctrl$ imx芯片的文档是 fsl&#xff0c;imx-pinctrl.txt Examples: usdhc0219c000 { /* uSDHC4 */non-removable;vmmc-s…

java: 无法访问redis.clients.jedis.JedisPoolConfig

问题描述: 在编译java springboot程序的时候报错 java: 无法访问redis.clients.jedis.JedisPoolConfig 找不到redis.clients.jedis.JedisPoolConfig的类文件 问题分析 该问题是由于找不到JedisPoolConfig包导致的,很可能是没有添加相关的依赖 问题解决 在pom文件中添加依赖项…

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] ) 这是此方法使…