echarts柱状图x轴数据隔一个显示

 
在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图:
那就只能说明这个轴的名称太长了,所以导致它默认就隔一个显示,找了半天才发现控制它的属性是
axisLabel
xAxis : [
{
type : 'category',
data : ["周一", "周二", "周三", "周四", "周五", "周六", "周天"],
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval:0
}
}
],
该属性设置成0则表示强制显示所有标签,设置为1的话,隔一个标签显示一个标签,以此类推。
但是设置为0的话,如果数据再长点,它会把这个数据直接不显示,还是没有解决问题,后来发现,可以让这个数据倾斜,那么就不会有不显示的问题了,
axisLabel: {
interval:0,
rotate:45, //代表逆时针旋转45度
}
 
 
 
 

解决 echarts柱状图x轴数据隔一个显示的更多相关文章

  1. Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

    Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...

  2. echarts使用记录(三):x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据

    1.去掉坐标轴刻度线,刻度数据,坐标轴网格,以Y轴为例,同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: ...

  3. 解决echarts中X轴文字过长的问题。【转】

    axisLabel: { interval: , formatter:function(value) { debugger var ret = "";//拼接加\n返回的类目项 ; ...

  4. ucharts的区域图、折线图(有x轴的),修改x轴显示为隔一个显示

    1.原本的显示方式: 2.想要的效果: 3.这边我使用的是uchart的组件,在uni_modules > qiun-data-charts > js_sdk > u-charts, ...

  5. Echarts【1、数据过多导致显示不全分页,2、数据展示探讨分析】

    var len=<c:out value="${len }"></c:out>; var dataZoom_end=null; //为空默认100%所以默认 ...

  6. 【前端图表】echarts散点图鼠标划过散点显示信息

    在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过散点的时候 ...

  7. echarts柱形图x轴显示不全或者每隔一个不显示的问题

    问题原因可能:x轴数据间隔太小: 问题解决: 1.调整间隔属性 xAxis: { type: 'category', //坐标轴斜着显示 axisLabel: { interval:0, rotate ...

  8. ECharts 柱状图横轴(X轴)文字内容显示不全

    1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局 原来布局 option = { g ...

  9. Echarts使用及动态加载图表数据 折线图X轴数据动态加载

    Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...

  10. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

随机推荐

  1. pysimplegui之画布,图形,表格和树结构元素

    画布元素 在我看来,tkinter Canvas 小部件是 tkinter 小部件中功能最强大的.虽然我尽我所能将用户与任何与 tkinter 相关的东西完全隔离,但 Canvas 元素是一个例外.它 ...

  2. OpenTiny 跨端、跨框架组件库升级TypeScript,10万行代码重获新生

    摘要:一份精心准备的<JS项目改造TS指南>文档供大家参考,顺便介绍TS 基础知识和 TS 在 Vue 中的实践. 本文分享自华为云社区<历史性的时刻!OpenTiny 跨端.跨框架 ...

  3. ORA-17629: Cannot connect to the remote database server

    rman远程连接目标库,提示报错ORA-17629: Cannot connect to the remote database server,首先排查网络问题是否通路,结果发现目标端防火墙是开着的, ...

  4. [git] 规范Commit格式

    规范Commit格式 Jenkins根据对比当次构建和上次构建的Commit信息来生成ChangeLog,但因为我们目前的提交不够规范,经常有类似"#","update& ...

  5. Linux云计算运维工程师day28shell编程基础

    一. 1.全局变量.环境变量 Export OLDOBY="I am a oldboy."  Echo OLDOBY OLDOBY="I am a oldboy.&quo ...

  6. 在unity中制作live2d参数的AnimationClip[简单随笔]

    假定:已经成功导入模型.相关文档参考:https://github.com/gtf35/live2d_unity_sdk_chinese_document(人力翻译版的Live2d SDK文档) 全部 ...

  7. 深度学习-07(图像分类、常用数据集、利用CNN实现图像分类、图像分类优化)

    文章目录 深度学习-07(PaddlePaddle图像分类) 图像分类概述 概述 什么是图像分类 图像分类粒度 图像分类发展历程 图像分类问题的挑战 常用数据集介绍 MNIST数据集 CIFAR10数 ...

  8. ABC267G Increasing K Times 题解

    做这道题,很有感悟,发篇文. 先给数列从小到大排个序. 接下来设 \(f_{i,j}\) 表示前 \(i\) 个数的排列形成 \(j\) 个上坡的方案数. 接下来考虑转移,分为插入第 \(i\) 个数 ...

  9. Java设计模式【单例模式】

    Java设计模式[单例模式] 单例模式 单例模式(Singleton Pattern)是一种创建型设计模式,其主要目的是确保一个类只有一个实例,并提供对该实例的唯一访问点. 优缺点 优点: 提供了对唯 ...

  10. 文心一言 VS chatgpt (4)-- 算法导论2.2 1~2题

    一.用O记号表示函数(n ^ 3)/1000-100(n^2)-100n十3. 文心一言: chatgpt: 可以使用大 O 记号表示该函数的渐进复杂度,即: f ( n ) = n 3 1000 − ...