echarts坐标轴名称换行

news2024/11/16 15:38:22

一、期望效果:

期望超过6个字换行,最多可显示十个字
如图:
在这里插入图片描述

二、踩坑:

echartswidthoverflow设置后换行无效。(如果其他人有设置有效的 还请说明下)
在这里插入图片描述
在这里插入图片描述

三、解决方案:

\n换行,这里写的returnName函数处理
简单案例:

// 将要显示的名字 用此函数处理下即可
const returnName = (name => {
  const len = name.length
  if(len > 6 && len <= 10){
    return name.substring(0, 6) + '\n' +name.substring(6, 10)
  }else if(len > 10){
    return name.substring(0, 6) + '\n' +name.substring(6, 10) + '...'
  }else{
    return name
  }
})
option = {
  xAxis: {
    name: returnName('一二三四五六七八九十哈'),
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    name: returnName('一二三四五六七八九十哈'),
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

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

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

相关文章

Django + Xadmin 数据列表复选框显示为空,怎么修复这个问题?

问题描述&#xff1a; 解决方法&#xff1a; 后续发现的报错&#xff1a; 解决方案&#xff1a; 先根据报错信息定位到源代码&#xff1a; 在该文件顶部写入&#xff1a; from django.core import exceptions然后把&#xff1a; except models.FieldDoesNotExist修改为&…

qt6.5 download for kali/ubuntu ,windows (以及配置选项选择)

download and sign in qt官网 sign in onlion Install 1 2 3 4 5

SpringBoot整合WebService

SpringBoot整合WebService WebService是一个比较旧的远程调用通信框架&#xff0c;现在企业项目中用的比较少&#xff0c;因为它逐步被SpringCloud所取代&#xff0c;它的优势就是能够跨语言平台通信&#xff0c;所以还有点价值&#xff0c;下面来看看如何在SpringBoot项目中使…

Neo4j图数据基本操作

Neo4j 文章目录 Neo4jCQL结点和关系增删改查匹配语句 根据标签匹配节点根据标签和属性匹配节点删除导入数据目前的问题菜谱解决的问题 命令行窗口 neo4j.bat console 导入rdf格式的文件 :GET /rdf/ping CALL n10s.graphconfig.init(); //初始化 call n10s.rdf.import.fetch(&q…

每日一题——两个链表的第一个公共结点

题目 输入两个无环的单向链表&#xff0c;找出它们的第一个公共结点&#xff0c;如果没有公共节点则返回空。&#xff08;注意因为传入数据是链表&#xff0c;所以错误测试数据的提示是用其他方式显示的&#xff0c;保证传入数据是正确的&#xff09; 数据范围&#xff1a; n≤…

LeetCode 75 第十一题(392)判断子序列

题目: 示例: 分析: 给两个字符串s和t,问s是不是t的子序列.即判断t中能不能提取出s(s有的元素,t都要有.并且字符的相对顺序不能变,如果字符的相对顺序能变的话就不能用双指针来做,而是要用哈希表了,可以参考力扣383赎金信这题). 这题虽然简单,但是是练习双指针的一个很好的题目…

【QT】Day3

1. 完成闹钟的实现&#xff1a; widgt.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> #include <QTimerEvent> //定时器事件处理函数 #include <QTime> //时间类 #include <QTextToSpeech> //文本转语音类头…

ARP协议(地址解析协议)详解

ARP协议&#xff08;地址解析协议&#xff09;详解 ARP协议的作用映射方式静态映射动态映射 ARP原理及流程ARP请求ARP响应 ARP协议报文首部 ARP协议的作用 ARP协议是“Address Resolution Protocol”&#xff08;地址解析协议&#xff09;的缩写。其作用是在以太网环境中&…

DataEase开源BI工具安装_数据全量_增量同步_大屏拖拽自动生成_多数据源支持_数据血缘分析---大数据工作笔记0183

我这里用的是Centos7.9安装的 可以通过uname -p来查看一下我们的电脑架构,可以看到是x86_64架构的 我们下第一个,这个是x86架构的,第二个arm架构的 然后解压到/opt/module中 然后再去重命名一下文件夹. 推荐200G 本地模式的功能比较多 推荐100G

喜报!麒麟信安操作系统通过GB18030-2022国家标准

《信息技术 中文编码字符集》强制性国家标准GB 18030-2022将于2023年8月1日起全面实施。麒麟信安积极推动电子信息产业标准化工作&#xff0c;快速完成标准适配&#xff0c;近日&#xff0c;麒麟信安服务器操作系统V3、麒麟信安桌面操作系统V3顺利通过GB18030-2022《信息技术 中…

【Linux后端服务器开发】数据链路层

目录 一、以太网 二、MAC地址 三、MTU 四、ARP协议 一、以太网 “以太网”不是一种具体的网路&#xff0c;而是一种技术标准&#xff1a;既包含了数据链路层的内容&#xff0c;也包含了一些物理层的内容&#xff0c;例如&#xff1a;规定了网络拓扑结构、访问控制方式、传…

【Matplotlib 绘制折线图】

使用 Matplotlib 绘制折线图 在数据可视化中&#xff0c;折线图是一种常见的图表类型&#xff0c;用于展示随着变量的变化&#xff0c;某个指标的趋势或关系。Python 的 Matplotlib 库为我们提供了方便易用的功能来绘制折线图。 绘制折线图 下面的代码展示了如何使用 Matplo…

AutoSAR系列讲解(实践篇)9.4-通信相关机制(下)

一、Deadline Monitoring 1、超时监控 Deadline Monitoring,超时监控。超时监控之前在Update Bit中也提到过,但是超时监控可以分为两个等级: IPDU级:当一个Rx IPDU没有在规定的时间内收到有效数据,就启动超时处理Signal级:就是之前我们说过的Update Bit的方式,如果没有…

利用Vector和鸿鹄搭建微服务应用的可观测性平台

一. 背景 1.1 什么是微服务应用 微服务应用由一组具有自治性的服务所组成&#xff0c;每一个服务只提供一类服务&#xff0c;这些服务一起协作以提供复杂的业务功能。相比于传统的单体应用&#xff0c;微服务应用是高度分布式的。如下图所示&#xff0c;即为一个典型的微服务应…

嵌入式软件—RK3568开发环境搭建

一、RK3568 1.1 开发板特点 BSP比较大&#xff0c;对于电脑内存和存储空间要求高 1.2 BSP BSP&#xff08;Board Support Package&#xff0c;板级支持包&#xff09;&#xff0c;类似于PC系统中BIOS和驱动程序的集合&#xff0c;BSP包含的范围更广&#xff0c;除了外设驱动…

20.2 HTML 常用标签

1. head头部标签 <head>标签用于定义网页的头部, 其中的内容是给浏览器读取和解析的, 并不在网页中直接显示给用户. <head>标签通常包含以下一些常见的子标签: - <title>: 定义网页的标题, 在浏览器的标题栏或标签页上显示. - <meta>: 用于设置网页的…

Kotlin知识点

Kotlin 是 Google 推荐的用于创建新 Android 应用的语言。使用 Kotlin&#xff0c;可以花更短的时间编写出更好的 Android 应用。 基础 Kotlin 程序必须具有主函数&#xff0c;这是 Kotlin 编译器在代码中开始编译的特定位置。主函数是程序的入口点&#xff0c;或者说是起点。…

java+springboot+mysql大学图书共享交流平台

项目介绍&#xff1a; 使用javassmmysql开发的大学图书共享交流平台&#xff0c;系统包含超级管理员&#xff0c;系统管理员、用户角色&#xff0c;功能如下&#xff1a; 用户&#xff1a;主要是前台功能使用&#xff0c;包括注册、登录&#xff1b;查看图书交流&#xff08;…

[学习笔记]全面掌握Django ORM

参考资料&#xff1a;全面掌握Django ORM 1.1 课程内容与导学 学习目标&#xff1a;独立使用django完成orm的开发 学习内容&#xff1a;Django ORM所有知识点 2.1 ORM介绍 ORM&#xff1a;Object-Relational Mapping Django的ORM详解 在django中&#xff0c;应用的文件夹…

陪玩接单小程序开发方案详解

陪玩接单小程序有哪些功能呢&#xff1f;游戏陪玩&#xff0c;电竞游戏发布需求&#xff0c;接单平台小程序开发。 一 推单师推单&#xff0c;陪玩师接单&#xff0c;推单师派单&#xff0c;在线支付。 二 陪玩师接单&#xff0c;我的陪玩订单&#xff0c;我的钱包&#xff0c;…