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
                        }
                    }
                },
            }
        ]

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CPU占用100%的解决办法

上课&#xff0c;先看问题 这里看有个.logrotate的进程占用CPU最高&#xff0c;这里就需要把这个清理掉 执行 ps aux | grep logrotate然后将这个进程杀掉 kill -9 3194067然后再看CPU占有率就下来了 下课

2024北京智源大会开幕,智源推出大模型全家桶及全栈开源技术基座新版图,大模型先锋集结共探AGI之路

2024年6月14日&#xff0c;第六届“北京智源大会”在中关村展示中心开幕。 北京智源大会是智源研究院主办的“AI内行顶级盛会”&#xff0c;以“全球视野、思想碰撞、前沿引领”为特色&#xff0c;汇聚海内外研究者分享研究成果、探寻前沿知识、交流实践经验。2024北京智源大会…

STM32学习和实践笔记(36):DAC数模转换实验

1.STM32F1 DAC简介 DAC&#xff08;Digital to analog converter&#xff09;即数字模拟转换器&#xff0c;它可以将数字信号转换为模拟信号。它的功能与ADC相反。在常见的数字信号系统中&#xff0c;大部分传感器信号被转化成电压信号&#xff0c;而 ADC 把电压模拟信号转换成…

哈尔滨等保测评流程

哈尔滨的等保测评程序是一项严格的、系统化的检测程序&#xff0c;其目的在于保证信息系统的安全、稳定。下面详细介绍了这个过程&#xff1a; 一、引言 随着信息技术的飞速发展&#xff0c;信息系统在各行各业中的应用越来越广泛&#xff0c;信息安全问题也日益凸显。为了保障…

【方法】如何隐藏和保护Excel表格中的敏感数据?

在工作中&#xff0c;很多人经常需要处理包含敏感信息的Excel表格。 为了确保这些数据的安全性&#xff0c;我们可以通过隐藏单元格、行和列&#xff0c;以及设置密码保护工作表的方法&#xff0c;来保护数据&#xff0c;下面一起来看看吧&#xff01; 一、隐藏数据&#xff1…

idea2020版本下载及注册

一。准备idea2020和BetterIntelliJ插件和补丁key 二、开始安装。 idea就正常安装&#xff0c;然后打开&#xff0c;选择试用30天打开即可&#xff0c;然后File - settings - plugins 点击 Install Plugin from Disk 然后选择BetterIntelliJ这个&#xff0c;这个后期不可变名称…

【数据分析】线性及逻辑回归模型和Python实现

各位大佬好 &#xff0c;这里是阿川的博客&#xff0c;祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 Python 初阶 Python–语言基础与由来介绍 Python–…

聆思CSK6大模型+AI交互多模态开源SDK介绍

视觉语音大模型 AI 开发套件( CSK6-MIX )是围绕 CSK6011A 芯片设计的具备丰富语音图像功能与硬件外设的开发板&#xff0c;采用具备丰富组件生态的 Zephyr RTOS作为操作系统&#xff0c;官方提供了十几种开源SDK&#xff0c;包含大模型语音交互、大模型拍照识图、文生图、人脸识…

冒泡排序、选择排序

冒泡排序 按照冒泡排序的思想&#xff0c;我们要把相邻的元素两两比较&#xff0c;当一个元素大于右侧相元素时&#xff0c;交换它们的位置&#xff1b;当一个元素小于或等于右侧相邻元素时&#xff0c;位置不变 大的往右丢&#xff08;往下沉&#xff09;&#xff0c;小的往…

动手学深度学习(Pytorch版)代码实践 -深度学习基础-09过拟合与欠拟合

09过拟合与欠拟合 #通过多项式拟合来探索过拟合和欠拟合 #欠拟合是指模型无法继续减少训练误差。 #过拟合是指训练误差远小于验证误差。 import math import numpy as np import torch from torch import nn from d2l import torch as d2l import liliPytorch as lp#生成数据集…

数据驱动决策:工单统计工具如何赋能企业精准运营

在当今这个数字化飞速发展的时代&#xff0c;企业对于内部运营效率的追求已经达到了前所未有的高度。你是否曾为了繁杂的工单统计管理而头疼不已&#xff1f;是否曾因为无法准确进行工单统计数据而错失商机&#xff1f;今天&#xff0c;我将向你展示一款革命性的工单统计工具&a…

AI从云端到边缘:人员入侵检测算法的技术原理和视频监控方案应用

在当今数字化、智能化的时代&#xff0c;安全已成为社会发展的重要基石。特别是在一些关键领域&#xff0c;如公共安全、智能化监管以及智慧园区/社区管理等&#xff0c;确保安全无虞至关重要。而人员入侵检测AI算法作为一种先进的安全技术&#xff0c;正逐渐在这些领域发挥着不…

MySQl基础入门⑯【操作视图】完结

上一边文章内容 表准备 CREATE TABLE Students (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(100),email VARCHAR(255),major VARCHAR(100),score int,phone_number VARCHAR(20),entry_year INT,salary DECIMAL(10, 2) );数据准备 INSERT INTO Students (id, name, ema…

DolphinScheduler日志乱码、worker日志太多磁盘报警、版本更新导致不兼容怎么办?

作者 | 刘宇星 本文作者总结了在使用Apache DolphinScheduler过程中遇见过的常见问题及其解决方案&#xff0c;包括日志出现乱码、worker日志太多磁盘报警、版本更新导致不兼容问题等&#xff0c;快来看看有没有困扰你想要的答案吧&#xff01; DolphinScheduler集群环境有多…

AI大模型的策略布局:通用广度与垂直深度的融合之道

1. 设计理念&#xff1a; 通用大模型&#xff08;GeneralPurpose Large Models&#xff09;&#xff1a;旨在处理多种类型的任务&#xff0c;不特定于某个领域或应用。它们通常具有广泛的知识和能力&#xff0c;能够理解和生成自然语言、进行图像识别、解决数学问题等。 1. 广…

FileZilla证书过期,导致FileZilla Client联不上,或者老断开的处理

1、先到服务器上去重新生成一下证书&#xff0c;并且覆盖掉老的证书。edit--settings 输入信息&#xff0c;并且确认生成新的证书&#xff1a; 2、Client连接的时候&#xff0c;弹出证书信任&#xff0c;点击确认。 这样第一次连接&#xff0c;然后访问目录全都是好的&#xff…

如何开发盲盒小程序APP——入门指南

一、前言 随着盲盒经济的兴起&#xff0c;越来越多的开发者开始关注如何开发盲盒小程序APP。盲盒小程序不仅能为用户提供新颖的购物体验&#xff0c;还能为商家带来可观的利润。本文将为大家介绍如何入门开发盲盒小程序APP。 二、需求分析 目标用户&#xff1a;明确你的目标…

视频太大了怎么缩小内存

我们在分享视频的时候&#xff0c;有时候会遇到过视频文件太大&#xff0c;无法发送或者上传的情况&#xff0c;别担心&#xff0c;今天我就来给大家分享一个简单有效的方法&#xff0c;让你的视频变得更小&#xff0c;更方便分享&#xff01; 打开 “51视频处理官网 的网站。上…

如何使用CST软件敏感度分析 sensitivity analysis --- 天线F-ROM求解器

我们介绍一个自带案例&#xff0c;与直接使用参数配合频域ROM算法不同&#xff0c;这回我们演示constraint参数配合频域通用算法。以自带T分器为例&#xff1a; 其中有一个参数控制了金属柱的半径&#xff0c;初始值为1&#xff1a; 这个参数是个constraint&#xff0c;添加方法…

PowerBi 获取指定时间间隔的日期的方法

获取指定时间间隔的日期&#xff0c;比如我们想得到2024年5月31日后的第三天。 网络上的教程一般是使用DATEADD()函数。 但是这个函数返回的是表。假如我们的需求是不做汇总等计算&#xff0c;只是把它作为一个计算列&#xff0c;或者度量值&#xff0c;那么我更推荐用DATE(&…