vue3中echarts柱状图横轴文字太多放不下怎么解决

news/2024/11/16 23:02:15/

问题:在做数据展示的时候,使用的是echarts,遇到了个问题,就是数据过多,但是设置的x轴的文字名称又太长,往往左边第一个或右边最后一个的名称展示不全,只有半个。

从网上找到了几种办法,但是最总实现的效果不能通过。

导致这个问题的原因就是,最边上的那条数据的宽度太小了,名称又远远超过这个宽度,再加上echarts默认的x轴文字是居中显示的。所以有一侧的名称显示不全。

解决办法:

  1.  配置option设置中的grid;这个是设置图表四周的padding的,将左边或右边的padding增加到能显示全名称就行了。

    grid: {top: '10', // 距离容器上边界的距离right: '30', // 距离容器右边界的距离bottom: '0', // 距离容器下边界的距离left: '0', // 距离容器左边界的距离containLabel: true, // 包含标签的绘图区域},

  2. x轴名称倾斜展示。在options配置中的xAxis中配置如下代码:

    axisLabel: {interval: 0,rotate: 40,},
    

  3. 名称竖直显示。在options配置中的xAxis中配置如下代码:

    axisLabel: {interval: 0,formatter: function (value) {return value.split("").join("\n");},}
    

  4. 在特定文字后面加换行处理。在options配置中的xAxis中配置如下代码:

    axisLabel: {interval: 0,lineHeight: 18,formatter: function (value) {return value.split("_").join("_\n");},},
    

后面三种方法全是从网上找到的:vue——echarts柱状图横轴文字太多放不下【处理办法】_echarts柱状图横坐标文字太长放不下两行放-CSDN博客 


http://www.ppmy.cn/news/1530875.html

相关文章

openmv与stm32通信

控制小车视觉循迹使用 OpenMV 往往是不够的。一般使用 OpenMV 对图像进行处理,将处理过后的数据使用串口发送给STM32,使用STM32控制小车行驶。本文主要讲解 OpenMV 模块与 STM32 间的串口通信以及两种循迹方案,分别是划分检测区域和线性回归。…

SpringBoot整合邮件功能(带附件)

前言 这篇文章只是记录一下在开发中使用邮箱功能 本人在项目中需要使用邮箱发送带附件的邮件&#xff0c;我们的附件可能是在线的阿里云OSS,也可能是系统生成的Excel&#xff0c;写了一个工具类&#xff0c;方便使用。 整合流程 QQ邮箱作为案例 1、添加依赖 <dependency&g…

服务器配置虚拟环境及离线安装python

本篇文章基于已经装好conda环境进行哈&#xff0c;不会安装conda可参考服务器离线安装anaconda-CSDN博客 1.打印现有虚拟环境列表 conda env list&#xff0c;可以看见我现在有base、ai、py38三个环境 2.删除指定虚拟环境 conda remove -n py38 --all&#xff0c;回车后输入ye…

Qwen2-VL论文阅读笔记

第1章介绍 论文亮点&#xff1a; 1、 the Naive Dynamic Resolution mechanism 2、Multimodal Rotary Position Embedding (M-RoPE) 2D Rotary Position Embedding 3、统一图片和视频的处理范式、增i强视觉感知能力 4、LVLMs的scaling laws&#xff1a;2B、8B、72B 5、 dynamic…

SpringBoot之登录校验关于JWT、Filter、interceptor、异常处理的使用

什么是登录校验&#xff1f; 所谓登录校验&#xff0c;指的是我们在服务器端接收到浏览器发送过来的请求之后&#xff0c;首先我们要对请求进行校验。先要校验一下用户登录了没有&#xff0c;如果用户已经登录了&#xff0c;就直接执行对应的业务操作就可以了&#xff1b;如果用…

甘蔗茎节检测系统源码分享

甘蔗茎节检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…

List几种遍历方法速度

准备数据 ArrayList<Integer> list new ArrayList<Integer>();for (int i 0; i < 100000000; i) {list.add(i); }1.for循环 for (int i 0; i < list.size(); i) {Integer str list.get(i); }2.for-each循环 for (Integer vo:list) {}3.Lambda list.forEa…

为人机交互保持预见性丨基于G32A1445的T-BOX应用方案

T-BOX是一种集成了通信、计算和控制功能的车载信息处理终端&#xff0c;通过车辆与云端、移动网络等进行数据交互&#xff0c;用于车、人、外部环境的互联互通&#xff0c;支持车辆定位、车载通信、远程控制、故障诊断、数据传输、紧急呼叫等功能&#xff0c;帮助车辆实现更加智…