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

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.mzph.cn/news/851400.shtml

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

相关文章

每日一练——删除有序数组中的重复项

26. 删除有序数组中的重复项 - 力扣(LeetCode) int removeDuplicates(int* nums, int numsSize) {int i 0;int j 0;while(numsSize--){if(nums[i] ! nums[j]){i;nums[i] nums[j];j;}else j;}return i 1; }

Golang | Leetcode Golang题解之第142题环形链表II

题目: 题解: func detectCycle(head *ListNode) *ListNode {slow, fast : head, headfor fast ! nil {slow slow.Nextif fast.Next nil {return nil}fast fast.Next.Nextif fast slow {p : headfor p ! slow {p p.Nextslow slow.Next}return p}}r…

AI数据分析:根据Excel表格数据绘制柱形图

工作任务:将Excel文件中2013年至2019年间线上图书的销售额,以条形图的形式呈现,每个条形的高度代表相应年份的销售额,同时在每个条形上方标注具体的销售额数值 在deepseek中输入提示词: 你是一个Python编程专家&#…

eNSP学习——RIP的路由引入

目录 主要命令 原理概述 实验目的 实验内容 实验拓扑 实验编址 实验步骤 1、基本配置 2、搭建公司B的RIP网络 3、优化公司B的 RIP网络 4、连接公司A与公司B的网络 需要eNSP各种配置命令的点击链接自取:华为eNSP各种设备配置命令大全PDF版_ensp…

[Leetcode]同时进行正向和逆向迭代匹配解决回文链表问题

题目链接:234. 回文链表 - 力扣(LeetCode) 题目: 题解: currentNode 指针是先到尾节点,由于递归的特性再从后往前进行比较。frontPointer 是递归函数外的指针。若 currentNode.val ! frontPointer.val 则返回 false。…

876. 链表的中间结点-链表

876. 链表的中间结点 - 力扣(LeetCode) 快慢指针 class Solution { public:ListNode* middleNode(ListNode* head) {ListNode* slow head;ListNode* fast head;while(fast ! nullptr && fast->next ! nullptr){slow slow->next;fast …

用MATLAB绘制地球围绕太远运动而月球围绕地球运动

绘制 MATLAB代码: clc;close all;clear all;warning off;%清除变量 rand(seed, 100); randn(seed, 100); format long g;% 初始化参数 num_frames 1000; % 动画帧数 G200; dt 0.01; % 时间步长% 设置太阳、地球和月球的初始位置和半径 sun_position [0, 0]; earth_radius …

Leetcode881. 救生艇

Every day a Leetcode 题目来源:881. 救生艇 解法1:贪心 排序 双指针 排序后,使用双指针分别指向数组首尾,每次取两个指针指向的元素之和与 limit 比较,如果小于等于 limit,则两个指针同时向中间移动一…

Android Studio历史版本

android studio的历史版本

HQL面试题练习 —— 累加刚好超过各省GDP40%的地市名称

目录 1 题目2 建表语句3 题解 1 题目 现有各省地级市的gdp数据,求从高到底累加刚好超过各省GDP40%的地市名称,临界地市也需要。例如: 浙江省的杭州24% 宁波 20% ,杭州宁波44% 大于40% 取出杭州、宁波 江苏省的苏州19% 南京 14% 无锡 12%&am…

2.nginx常用命令

使用nginx命令需要进入nginx目录里面执行。 /usr/local/nginx/sbin/ 查看nginx的版本号 启动nginx ./nginx 关闭nginx ./nginx -s stop 查看nginx的是否运行的命令 重新加载nginx 针对配置目录中配置文件nginx.cnf修改后需要重新加载 /usr/local/nginx/conf/nginx.cnf …

【数学】各种图面积公式的推导

Hello!大家好,我是学霸小羊,今天讲讲面积公式。 1.长方形 长方形是 由无数条 长度为长方形的长(或宽)的线 组成的图形,这些线有多少根,我们不知道,只需要知道他们垒成了一个由高 宽…

Mysql执行一条语句都有哪些操作

Mysql的执行流程 MySQL 的架构共分为两层:Server 层和存储引擎层, Server 层负责建立连接、分析和执行 SQL。MySQL 大多数的核心功能模块都在这实现,主要包括连接器,查询缓存、解析器、预处理器、优化器、执行器等。另外&#xf…

鸿蒙轻内核M核源码分析系列十九 Musl LibC

LiteOS-M内核LibC实现有2种,可以根据需求进行二选一,分别是musl libC和newlibc。本文先学习下Musl LibC的实现代码。文中所涉及的源码,均可以在开源站点 https://gitee.com/openharmony/kernel_liteos_m 获取。LiteOS-M内核提供了和内核相关的…

基于小波样条框架的一维时间序列信号降噪方法(MATLAB R2018A)

1952年,DUFFIN在研究非调和Fourier级数时引入了Hilbert空间中框架的概念,然而并没有引起很大的反响。1986年,DAUBECHIES研究发现利用框架可以将L2(R)中的函数展开成类似标准正交基的级数,并且用框架研究函数时所需的条件要比用标准…

多态的应用——数组多态

介绍 ai查询 在Java中,动态数组通常通过ArrayList类来实现,它是Java集合框架(Java Collections Framework)的一部分。ArrayList是一个可调整大小的数组实现,提供了比标准数组更多的灵活性和功能。 以下是使用ArrayLis…

基于51单片机的MQ-2烟雾报警设计

随着现代家庭用火、用电量的增加,家庭烟雾发生的频率越来越高。烟雾报警器也随之被广泛应用于各种场合。本课题所研究的无线多功能烟雾报警器采用STC89C51为核心控制器,利用气体传感器MQ-2、ADC0832模数转换器、DS18B20温度传感器等实现基本功能。通过这些传感器和芯片,当环…

前端技术回顾系列 08|TS 泛型基础

在微信中阅读,关注公众号:CodeFit。 创作不易,如果你觉得这篇文章对你有帮助,请不要忘了 点赞、分享 和 关注 我的公众号:CodeFit,为我的持续创作提供一些动力。 上篇内容回顾:枚举(Enums) 在上篇文章中,我们详细回顾了 TypeScript 中的 枚举(Enums)。 枚举 是一…

设置路径别名

一、描述 如果想要给路径设置为别名,就是常见的有些项目前面的引入文件通过开头的,也就是替换了一些固定的文件路径,怎么配置。 二、配置 import { defineConfig } from vite import react from vitejs/plugin-react import path from path…

ElementUi el-tree动态加载节点数据 load方法触发机制

需求背景:需要根据点击后获取的数据动态渲染一个 el-tree,同时渲染出来的 el-tree,需要点击节点时才能获取该节点的层数的获取,如图所示,我需要点击“组”节点才能渲染“设备列表”树,同时“设备列表”树的…