当前位置: 首页 > news >正文

css-Echarts图表柱状图,X轴横坐标值显示不完全问题

1.问题

        在Echarts图表中当横坐标数值过多,或者数值过长时会导致部分横坐标不显示。数据量少或简单会默认显示完全,当放大时会导致部分横坐标隐藏。

更改第一个Mon字段名

        会发现偶数横坐标显示隐藏;

2.解决方法

2.1 在x横坐标中添加interval: 0

        无论在何种分辨率下横向坐标都会显示完全

 // 横向坐标xAxis:[{type: 'category',axisLabel: {interval: 0,}}]
2.2 横向坐标字体值设置为以rem单位

  rem 是CSS3引入的一个相对长度单位,它是相对于根元素(即<html>元素)的字体大小来计算的。rem 的全称是 "root em",它的设计初衷是为了提供一种相对于根元素字体大小进行缩放的灵活方式,以便于实现响应式设计和适配不同屏幕尺寸

通常会将根元素的字体大小设置为一个固定的基准值(如16px)

 // 横向坐标xAxis: [{type: 'category',axisLabel: {interval: 0,fontSize:'0.8rem',}}]
2.3 限制一定字数以防超出重叠

substr 是JavaScript中的一个字符串方法,用于提取字符串中从指定位置开始的指定长度的子字符串。

str.substr(start[, length])

         start必需,表示要提取的子字符串的起始位置。如果为负数,则从字符串的末尾开始计算位置(例如,-1表示最后一个字符)。

   length可选,表示要提取的子字符串的长度。如果省略此参数,则提取从起始位置到字符串末尾的所有字符。

 // 横向坐标xAxis: [{type: 'category',axisLabel: {interval: 0,fontSize:'0.8rem',color: '#999999',formatter: function (value, index) {if(value.length>15){return value.substr(0,10)+'...'}else{return value}}},}]

相关文章:

  • OSPF被动接口配置(华为)
  • Trying to access array offset on value of type null
  • 贝锐蒲公英异地组网方案:实现制药设备远程监控、远程运维
  • 【STM32进阶笔记】GPIO端口
  • 多路h265监控录放开发-(8)完成摄像机管理的修改和删除功能
  • 开源【汇总】
  • from import *
  • 【linux】内核源码TCP->IP->L2层函数调用继续摸索中
  • win10修改远程桌面端口号,在Windows 10中修改远程桌面端口号的步骤
  • 数据库新技术【分布式数据库】
  • 信息安全、网络安全、网络空间安全傻傻分不清?
  • python18 正则表达式
  • ubuntu查看当前系统版本
  • Spring Security——结合JWT实现令牌的验证与授权
  • 八、yolov8模型预测和模型导出(目标检测)
  • 《Javascript高级程序设计 (第三版)》第五章 引用类型
  • 【每日笔记】【Go学习笔记】2019-01-10 codis proxy处理流程
  • 【刷算法】求1+2+3+...+n
  • echarts花样作死的坑
  • go语言学习初探(一)
  • Laravel 中的一个后期静态绑定
  • LeetCode算法系列_0891_子序列宽度之和
  • Linux快速配置 VIM 实现语法高亮 补全 缩进等功能
  • magento2项目上线注意事项
  • orm2 中文文档 3.1 模型属性
  • PAT A1050
  • PAT A1092
  • Redash本地开发环境搭建
  • Spring Cloud Feign的两种使用姿势
  • VUE es6技巧写法(持续更新中~~~)
  • vue脚手架vue-cli
  • 订阅Forge Viewer所有的事件
  • 基于Mobx的多页面小程序的全局共享状态管理实践
  • 利用jquery编写加法运算验证码
  • 腾讯大梁:DevOps最后一棒,有效构建海量运营的持续反馈能力
  • 温故知新之javascript面向对象
  • 策略 : 一文教你成为人工智能(AI)领域专家
  • 关于Android全面屏虚拟导航栏的适配总结
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • #565. 查找之大编号
  • #if等命令的学习
  • #QT(QCharts绘制曲线)
  • #QT(TCP网络编程-服务端)
  • #window11设置系统变量#
  • (06)Hive——正则表达式
  • (2015)JS ES6 必知的十个 特性
  • (2024,Flag-DiT,文本引导的多模态生成,SR,统一的标记化,RoPE、RMSNorm 和流匹配)Lumina-T2X
  • (2024,RWKV-5/6,RNN,矩阵值注意力状态,数据依赖线性插值,LoRA,多语言分词器)Eagle 和 Finch
  • (4)STL算法之比较
  • (8)STL算法之替换
  • (Pytorch框架)神经网络输出维度调试,做出我们自己的网络来!!(详细教程~)
  • (SpringBoot)第七章:SpringBoot日志文件
  • (备忘)Java Map 遍历
  • (附源码)spring boot北京冬奥会志愿者报名系统 毕业设计 150947
  • (附源码)springboot“微印象”在线打印预约系统 毕业设计 061642