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

news2024/9/24 5:25:35

背景: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.coloradmin.cn/o/817828.html

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

相关文章

9.环境对象和回调函数

9.1环境对象 指的是函数内部特殊的变量this&#xff0c;它代表着当前函数运行时所处的环境 作用&#xff1a; 弄清楚this的指向&#xff0c;可以让我们代码更简洁 ➢函数的调用方式不同&#xff0c;this指代的对象也不同 ➢[谁调用&#xff0c;this 就指代谁] 是判断this指向的…

三十一章 uboot顶层Makefile详解

编译后的uboot源码文件 1、 arch 文件夹 这个文件夹里面存放着和架构有关的文件&#xff0c;进入后打开arm文件 2、 board 文件夹 board 文件夹就是和具体的板子有关的&#xff0c;打开此文件夹&#xff0c;里面全是不同的板子&#xff0c;毫无疑问正 点原子的开发板肯定也在…

如何使用Postman创建Mock Server?

这篇文章将教会大家如何利用 Postman&#xff0c;通过 Mock 的方式测试我们的 API。 什么是 Mock Mock 是一项特殊的测试技巧&#xff0c;可以在没有依赖项的情况下进行单元测试。通常情况下&#xff0c;Mock 与其他方法的主要区别就是&#xff0c;用于取代代码依赖项的模拟对…

python与深度学习(十二):CNN和猫狗大战二

目录 1. 说明2. 猫狗大战的CNN模型测试2.1 导入相关库2.2 加载模型2.3 设置保存图片的路径2.4 加载图片2.5 图片预处理2.6 对图片进行预测2.7 显示图片 3. 完整代码和显示结果4. 多张图片进行测试的完整代码以及结果 1. 说明 本篇文章是对上篇文章猫狗大战训练的模型进行测试。…

【构造】CF1758 D

Problem - D - Codeforces 题意&#xff1a; 思路&#xff1a; 如果需要构造一个和为定值的序列&#xff0c;那么考虑n-d,n-d1,.....nd-1,nd这种形式 如果要保证不能重复&#xff0c;那么先考虑一个排列&#xff0c;然后在排列上操作 如果根据小数据构造出了一些简单情形&a…

给初学嵌入式的菜鸟一点建议.学习嵌入式linux

学习嵌入式&#xff0c;我认为两个重点&#xff0c;cpu和操作系统&#xff0c;目前市场是比较流行arm&#xff0c;所以推荐大家学习arm。操作系统很多&#xff0c;我个人对开始学习的人&#xff0c;特别不是计算机专业的&#xff0c;推荐学习ucos。那是开源的&#xff0c;同时很…

CSDN 一周年创作纪念日(PS:vnjohn)

&#x1f52d; 嗨&#xff0c;您好 &#x1f44b; 我是 vnjohn&#xff0c;在互联网企业担任 Java 开发&#xff0c;CSDN 优质创作者 &#x1f4d6; 推荐专栏&#xff1a;Spring、MySQL、Nacos、Java&#xff0c;后续其他专栏会持续优化更新迭代 &#x1f332;文章所在专栏&…

【方法】PDF可以转换成Word文档吗?如何操作?

很多人喜欢在工作中使用PDF&#xff0c;因为PDF格式可以准确地保留文档的原始格式&#xff0c;比如字体、图像、布局和颜色等。 但如果编辑文档的话&#xff0c;PDF还是没有Word文档方便。那可以将PDF转换成Word格式&#xff0c;再来编辑吗&#xff1f;如何操作呢&#xff1f;…

HttpRunner自动化工具之实现参数化传递

参数化实现及重复执行 参数化测试&#xff1a;在接口测试中&#xff0c;为了实现不同组数据对同一个功能模块进行测试&#xff0c;需要准备多组测试数据对模块进行测试的过程。 在httprunner中可以通过如下方式实现参数化&#xff1a; 1、在YAML/JSON 中直接指定参数列表 2、…

用Apache Echarts展示数据

目录 1.后端代码 1.1 实体类&#xff1a; 1.2 SQL语句&#xff1a; 2.前端代码 2.1 安装 Apach Echarts安装包&#xff1a; 2.2 查找数据并赋值给Echarts 思路&#xff1a;后端查到数据&#xff0c;包装为map&#xff0c;map里有日期和每日就诊人数&#xff0c;返回给前端…

[操作系统] 进程的详细认识----从概念到调度

目录 前言 一.进程的概念 二.进程和程序之间的关系 2.1二者的关系 2.2资源的占用 三.进程的任务 四.进程的管理 五.PCB中的信息 5.1pid进程标识 5.2内存指针 5.3文件描述符表 六.进程的调度 6.1CPU的简单认识 6.2调度的方式 6.3PCB中调度相关属性 七.进程的…

【计算机网络】网络层协议 -- IP协议

文章目录 1. 网络层做了什么事2. IP协议的简介3. IP协议格式4. 分片与组装5. 网段划分6. 特殊的IP地址7. IP地址的数量限制8. 私网IP地址和公网IP地址9. 路由 1. 网络层做了什么事 保证数据可靠地从一台主机到另一台主机 当双方在进行基于TCP的网络通信时&#xff0c;要保证将数…

redis高级篇2 springboot+redis+bloomfilter实现过滤案例

一 bloomfilter的作用 1.1 作用 Bloomfilter&#xff1a;默认是有0组成bit数组和hash函数构成的数据结构&#xff0c;用来判断在海量数据中是否存在某个元素。 应用案例&#xff1a;解决缓存穿透。Bloomfilter放在redis前面&#xff0c;如果查询bf中没有则直接返回&#xff0…

opencv中轮廓相关属性

一、介绍 findContours() &#xff1a;The function retrieves contours from the binary image。 二、代码 void main() {Mat src imread("match00.bmp", IMREAD_GRAYSCALE);Mat mask;threshold(src, mask, 128, 255, cv::THRESH_BINARY_INV);Mat element cv::g…

tcl学习之路(一)(Vivado与Tcl)

学习第一步&#xff1a;安装tcl编译软件 点击这里进入activestate的官网&#xff0c;下载你喜欢的操作系统所需的安装包。这里我下载的是windows下的安装包。一步一步安装即可。   那么&#xff0c;安装后&#xff0c;我们可以在开始的菜单栏处看到三个应用程序。      …

Python爬取微博相册, 批量下载

xpath插件解析到所有图片的url地址 xpath下载地址: https://www.crxsoso.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl 快捷键: CtrlShiftX 不会xpath语法可以看这里: https://www.w3school.com.cn/xpath/xpath_syntax.asp //div[class"woo-box-item-inlineBl…

P1090 [NOIP2004 提高组] 合并果子

题目描述 在一个果园里&#xff0c;多多已经将所有的果子打了下来&#xff0c;而且按果子的不同种类分成了不同的堆。多多决定把所有的果子合成一堆。 每一次合并&#xff0c;多多可以把两堆果子合并到一起&#xff0c;消耗的体力等于两堆果子的重量之和。可以看出&#xff0…

图解TCP 三次握手和四次挥手的高频面试题(2023最新版)

大家好&#xff0c;最近重新整理了一版 TCP 三次握手和四次挥手的面试题&#xff08;2023最新版&#xff09;。 ----- 任 TCP 虐我千百遍&#xff0c;我仍待 TCP 如初恋。 巨巨巨巨长的提纲&#xff0c;发车&#xff01;发车&#xff01; img TCP 基本认识 TCP 头格式有哪些…

[VRTK4.0]获取指针,并提供有效无效位置

学习目标&#xff1a; 演示如何将场景中的游戏对象设置为弯曲指针的无效目标。 流程&#xff1a; 紧接上篇&#xff0c;我们已经创建了一个曲线&#xff0c;并且使用 OpenXR 指针姿势来确保指针方向始终与 OpenXR 控制器的正确方向匹配。 接下来我们要实现如何将场景中的游戏对…

web-6-深入理解JSP:探索其核心概念和特性

JSP 今日目标&#xff1a; 理解 JSP 及 JSP 原理 能在 JSP中使用 EL表达式 和 JSTL标签 1&#xff0c;JSP 概述 JSP&#xff08;全称&#xff1a;Java Server Pages&#xff09;&#xff1a;Java 服务端页面。是一种动态的网页技术&#xff0c;其中既可以定义 HTML、JS、CSS…