echarts组件x轴坐标显示不全解决方法

news2025/1/16 14:03:02

1.旋转: 

修改前: 

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

修改后:

option = {
  xAxis: {
    type: 'category',
    axisLabel: { 
      rotate: 45
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

效果: 

 2.隔行隐藏

 

option = {

xAxis: {

type: 'category',

data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

axisLabel: {

interval: 2 // 每隔两个标签显示一次

}

},

yAxis: {

type: 'value'

},

series: [{

data: [820, 932, 901, 934, 1290, 1330, 1320, 1500, 1200, 1100, 950, 1000],

type: 'line'

}]

};

 3.x轴增加滚动

    // dataZoom: [

    //   {

    //     type: "slider", //给x轴设置滚动条

    //     show: true, //flase直接隐藏图形

    //     xAxisIndex: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],

    //     bottom: 0,

    //     height: 6,

    //     showDetail: false,

    //     startValue: 0, //滚动条的起始位置

    //     endValue: 4, //滚动条的截止位置(按比例分割你的柱状图x轴长度)

    //   },

    // ],

 

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

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

相关文章

802.11漫游流程简单解析与笔记_Part3

原定计划在Part3分析ns3的Roaming流程抓包,但ns3并不支持漫游: 看过Part1的应该都知道,标准关联流程是auth*2 associate*2 key*4,但ns3里面没有与auth有关的部分,third脚本里面有cap字段,但无auth也无key&a…

elementUI el-table高度heght和总结summary 同时使用 表格样式异常

背景 同时使用height和 show-summary 样式错位 解决方案 在钩子函数updated 中重新渲染此表格 <el-table :height"autoHeight" show-summary ref"dataTable" >updated() {this.$nextTick(() >{this.$refs.dataTable.doLayout();})},更改后的效果 …

代码随想录算法训练营第三十三天| 1005.K次取反后最大化的数组和,134. 加油站,135. 分发糖果

1005. K 次取反后最大化的数组和 - 力扣&#xff08;LeetCode&#xff09; class Solution {public int largestSumAfterKNegations(int[] nums, int k) {Arrays.sort(nums);int i 0;while (i < nums.length && nums[i] < 0 && k > 0) {nums[i] num…

Apollo9.0 PNC源码学习之Control模块(二)

前面文章&#xff1a;Apollo9.0 PNC源码学习之Control模块&#xff08;一&#xff09; 本文将对具体控制器以及原理做一个剖析 1 PID控制器 1.1 PID理论基础 如下图所示&#xff0c;PID各参数(Kp,Ki,Kd)的作用&#xff1a; 任何闭环控制系统的首要任务是要稳、准、快的响…

LLM Algorithms(1): Flash Attention

目录 Background Flash Attention Flash Attention Algorithm 参考 NIPS-2022: Flash Attention: Fast and Memory-Efficient Exact Attention with IO-Awareness idea&#xff1a;减少资源消耗&#xff0c;提升或保持模型性能。普通attention的空间复杂度是 --》降低到F…

探究IOC容器刷新环节初始化前的预处理

目录 一、IOC容器的刷新环节快速回顾 二、初始化前的预处理prepareRefresh源码分析 三、初始化属性源 &#xff08;一&#xff09;GenericWebApplicationContext初始化属性源 &#xff08;二&#xff09;StaticWebApplicationContext初始化属性源 四、初始化早期事件集合…

亚马逊冗余库存处理

在亚马逊放置90天以上的产品&#xff0c;又不在正常的动销&#xff0c;就要采取一定的措施了。清库存方式&#xff1a; 最直接的方式——降价促销&#xff08;至少要降价百分之三十以上&#xff0c;库龄越久&#xff0c;降价越狠&#xff09;参加官方的活动促销的话是需要符合…

在 Word 中,如何有效调整文字与下划线之间的距离

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 如果你在使用 Word 时&#xff0c;希望调整文字和下划线之间的距离&#xff0c;让它们看起来更加美观&#xff0c;可以按照以下步骤操作&#xff1a; 1. 在你想要加下划线的文字前后各加一个空格&…

Tdengine的时序数据库简介、单机部署、操作语句及java应用

Tdengine的时序数据库简介、单机部署、操作语句及java应用 本文介绍了Tdengine的功能特点、应用场景、超级表和子表等概念&#xff0c;讲述了Tdengine2.6.0.34的单机部署&#xff0c;并介绍了taos数据库的常见使用方法及特色窗口查询方法&#xff0c;最后介绍了在java中的应用。…

Harmony中的HAP、HAR、HSP区别

Harmony中的HAP、HAR、HSP区别 想要更加合理的开发一个企业级别的Harmony应用&#xff0c;那么就不得不提其中的HAP、HAR、HSP了。 前言 对于普通的用户来说&#xff0c;可能一个普通的应用就等于一个安装文件如安卓下的APK。但是对于Harmony应用开发工程师来讲&#xff0c;…

Python | Leetcode Python题解之第143题重排链表

题目&#xff1a; 题解&#xff1a; class Solution:def reorderList(self, head: ListNode) -> None:if not head:returnmid self.middleNode(head)l1 headl2 mid.nextmid.next Nonel2 self.reverseList(l2)self.mergeList(l1, l2)def middleNode(self, head: ListNo…

单田芳mp3百度网盘,单田芳评书下载百度云百度网盘

单老的评书还注重情感的表达。他善于运用声音、语气、语调等手段&#xff0c;将人物的情感刻画得淋漓尽致。无论是喜怒哀乐&#xff0c;他都能准确地把握人物的情感变化&#xff0c;并通过自己的表演将其传递给听众。这种情感的传递&#xff0c;使得听众能够更加深入地理解故事…

Springboot 开发之任务调度框架(一)Quartz 简介

一、引言 常见的定时任务框架有 Quartz、elastic-job、xxl-job等等&#xff0c;本文主要介绍 Spirng Boot 集成 Quartz 定时任务框架。 二、Quartz 简介 Quartz 是一个功能强大且灵活的开源作业调度库&#xff0c;广泛用于 Java 应用中。它允许开发者创建复杂的调度任务&…

Web--CSS基础

文章目录 定义方式选择器文本字体背景边框元素展示格式内边距与外边距盒子模型位置浮动flex布局响应式布局 定义方式 行内样式表 直接定义在style属性中&#xff0c;作用于当前标签 <img src "/imges/logo.jpg" alt "" style "width 400"…

react修改本地运行项目的端口

一、描述 如果你想让项目在你想要的端口打开的话&#xff0c;就需要进行设置 二、代码 设置一下pages.json文件就可以了&#xff0c;如下&#xff1a; 如果想打开项目不需要点击下面的链接地址&#xff0c;让他运行npm run dev之后自己直接打开到浏览器的话&#xff0c;在后…

智能楼宇的智慧心脏:ARMxy工业计算机在自动化控制中的应用

智能楼宇已成为现代化城市不可或缺的一部分。在这场数字化转型浪潮中&#xff0c;ARMxy工业计算机凭借其强大的处理能力、高度的系统兼容性和灵活的I/O配置&#xff0c;成为了推动楼宇自动化控制领域创新的重要力量。 某大型商业综合体项目&#xff0c;面临着传统HVAC系统效率低…

Android Studio历史版本

android studio的历史版本

OpenAI 宕机事件:GPT 停摆的影响与应对

引言 2024年6月4日&#xff0c;OpenAI 的 GPT 模型发生了一次全球性的宕机&#xff0c;持续时间长达8小时。此次宕机不仅影响了OpenAI自家的服务&#xff0c;还导致大量用户涌向竞争对手平台&#xff0c;如Claude和Gemini&#xff0c;结果也导致这些平台出现故障。这次事件的广…

conda 创建环境失败

conda create -n pylableimg python3.10在conda &#xff08;base&#xff09;环境下&#xff0c;创建新的环境&#xff0c;失败。 报错&#xff1a; LookupError: didn’t find info-scipy-1.11.3-py310h309d312_0 component in C:\Users\Jane.conda\pkgs\scipy-1.11.3-py310h…

VMware Workstation Pro的最新下载地址

前言 VMware被Broadcom收购后现在的下载方式也改变了&#xff0c;Workstation Pro 和 Fusion Pro 产品现在起将免费供个人用户使用下载方式 首先先把下载地址打开 https://support.broadcom.com/group/ecx/productdownloads?subfamilyVMwareWorkstationPro 打开链接&#xff…