echarts图表的label太长解决办法

2023-11-11

如图,这个echarts图标的y轴label文字因为太长显示不全,这时我们可以选择使用formatter换行显示,具体代码如下:

yAxis: {
      type: 'category',
      data: ['火灾', '洪涝', '急救', '消防', '公安'],
      axisLabel : {
        formatter:function(value){  //换行显示
          return value.split("").join("\n");  
        }, 
        textStyle: {
          color: '#03b3ef'
        }
      }
    },

换行之后如下,还是因为位置太小,有的label没有显示

 

 那么我们再旋转角度,倾斜显示,代码如下:

yAxis: {
      type: 'category',
      data: ['火灾', '洪涝', '急救', '消防', '公安'],
      axisLabel : {
        interval: 0,//横轴信息全部显示
        rotate: -45,//旋转45度显示
        formatter:function(value){  //换行显示
          return value.split("").join("\n");  
        }, 
        textStyle: {
          color: '#03b3ef'
        }
      }
    },

结果如图,正常了

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

echarts图表的label太长解决办法 的相关文章

随机推荐

  • FFmpeg学习笔记--视频传输的基本概念

    目录 1 容器 container 和文件 file 2 媒体流 stream 3 数据帧 frame 和数据包 packet 4 编解码器 Codec 5 复用 mux 6 解复用 demux 7 码率 bps 和帧率 fps 8 ffm
  • 【Android -- 写作工具】Markdown 代码块

    1 前言 关于代码块 Markdown 作者给出的定义如下 预格式化代码块主要用于在 Markdown 文档中显示源代码风格的内容 相比普通的文本段落 代码块可以保留文字内容的多行换行 缩进等格式 在 Markdown 文档中生成代码块 需
  • Numpy中的(一维)数组和(行列)向量

    Numpy中的 一维 数组和 行列 向量 随笔记录 Numpy的数组和行列向量的区别 随笔记录 Numpy的数组和行列向量的区别 今天做sklearn的datasets diabetes 的实验 做了个操作 diabetes是一个442 1
  • 【FPGA的基础快速入门17------频率计】

    FPGA的基础学习 频率计 频率计简介 等精度频率计 频率计简介 频率计又称为频率计数器 是一种专门对被测信号频率进行测量的电子测量仪器 计数法 直接计数单位时间内被测信号的脉冲数 这种方法测量精度高 速度快 适合不同频率 不同精确度测频的
  • 输入一个四位整数,分别输出组成该四位数的各位数字

    一 代码实现 1 include
  • Spring框架支持哪几种Bean作用域?自动装配Bean有哪些方式?

    Spring框架支持哪几种Bean作用域 spring支持五种Bean作用域 singleton 单例 就是每个spring容器只有一个 实例对象 prototype 多例 一个bean可以定义多个实例 另外三个是在web的Spring A
  • dell服务器启动顺序如何设置_戴尔品牌机怎么设置启动顺序(按F12进bios的)?

    展开全部 这主板非常麻烦 可关了保护 并切换 Legacy启动模式 U盘PE 装完系统 要改回uefi模式 DELL bios操作一32313133353236313431303231363533e59b9ee7ad943133343137
  • 传输线的物理基础(二):信号在传输线中的速度

    铜中电子的速度 信号在传输线上传输的速度有多快 如果人们经常错误地认为信号在传输线上的速度取决于导线中电子的速度 凭着这种错误的直觉 我们可能会想象降低互连的电阻会提高信号的速度 事实上 典型铜线中电子的速度实际上比信号速度慢约 100 亿
  • NLP中的数据增强方法!

    作者简介 大家好我是 uu 人工智能硕博在读 精通python 某大厂nlp算法经历 机器学习 深度学习 自然语言处理 计算机视觉 个人主页 uu主页 觉得uu写的不错的话 麻烦动动小手 点赞 收藏 评论 今天给大家带来的刷题系列是 NLP
  • BUS creator & selector、Mux&Demux

    2 3 总线BUS creator selector Bus Creator 由几路输入信号合成为一条总线信号 Bus Selector 由总线信号中选取需要的一路或几路信号输出 Mux 信号合成 Demux 信号分解 区别 Bus的可选择
  • vue web在线聊天功能实现

    上一篇介绍了vue怎么实现无限滚动窗体 这一篇就具体怎么使用vue实现web在线聊天功能展开深入讨论 对尚且不清楚怎么实现无限滚动窗体的 可前往这里查看 vue和iview实现无限滚动的正确解法 先看看最终实现的效果 实现过程 无限滚动窗体
  • 【ChatGPT进阶】如何使用ChatGPT做知乎好物?

    如果你想通过知乎赚钱 知乎好物是一个不错的选择 门槛很低 而且是一个可以长期 躺赚 的项目 如果你会ChatGPT的话 可以去卷同行 知乎好物是什么 知乎好物是一种在知乎平台上创作内容或回答问题时 使用 好物推荐 功能在内容中插入商品卡片
  • AI绘画StableDiffusion美女实操教程:斗破苍穹-小医仙-天毒女(附高清图下载)

    小医仙 是天蚕土豆所著玄幻小说 斗破苍穹 1 及其衍生作品中的角色 身负厄难毒体 食毒修炼 万毒不侵 通体毒气 这种会无意识地杀死别人的体质让天性善良的小医仙成为人憎鬼厌的天毒女 在萧炎多次帮助下得以控制 出图效果展示 资源整合 今天我们就
  • springboot集成RabbitMQ-超级详细步骤

    本文对应的代码地址 https github com zhangshilin9527 rabbitmq study 前置工作 1 安装rabbitmq 2 登录 地址 http localhost 15672 账号密码 guest gues
  • mybatis学习(31):修改部分字段(有外键,先查询,再修改)

    目录结构 com geyao mybatis mapper BlogMapper类 package com geyao mybatis mapper import java util List import java util Map im
  • vue利用路由控制实现登录功能

    未使用服务器接口 登录信息保存在cookie中 可以实现登录功能 vue交流群203849104 vue使用cookie首先需要安装cookie npm install js cookie 然后在router下面的index js文件中引入
  • 线程池ThreadPoolExecutor源码解析

    参考视频 首先回顾一下创建线程等的三种方式 第一个是直接继承Thread类 重写run方法 这个其实内部也是继承了Runnable接口重写run方法 比如 public class MyThread extends Thread Overr
  • oracle查看数据文件大小,路径及修改大小

    查看数据文件占用大小使用大小 select b file id 文件ID号 b tablespace name 表空间名 b bytes 1024 1024 M 字节数 b bytes sum nvl a bytes 0 1024 1024
  • json11库的使用

    JSON JavaScript Object Notation 是一种轻量级的文本数据交换格式 易于让人阅读 同时也易于机器解析和生成 尽管JSON是Javascript的一个子集 但JSON是独立于语言的文本格式 并且采用了类似于C语言家
  • echarts图表的label太长解决办法

    如图 这个echarts图标的y轴label文字因为太长显示不全 这时我们可以选择使用formatter换行显示 具体代码如下 yAxis type category data 火灾 洪涝 急救 消防 公安 axisLabel format