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. SpringBoot项目中使用缓存Cache的正确姿势!!!

    前言 缓存可以通过将经常访问的数据存储在内存中,减少底层数据源如数据库的压力,从而有效提高系统的性能和稳定性.我想大家的项目中或多或少都有使用过,我们项目也不例外,但是最近在review公司的代码的时 ...

  2. 请求被中止: 未能创建 SSL/TLS 安全通道 解决方案

    最近项目改造https,有部分请求出现"请求被中止: 未能创建 SSL/TLS 安全通道". 原因应该是,接口方变更了安全协议,而客户端并未启用该协议. 解决办法自然就是:让客户端 ...

  3. Django笔记二十三之case、when操作条件表达式搜索、更新等操作

    本文首发于公众号:Hunter后端 原文链接:Django笔记二十三之条件表达式搜索.更新等操作 这一篇笔记将介绍条件表达式,就是如何在 model 的使用中根据不同的条件筛选数据返回. 这个操作类似 ...

  4. 帝国cms随机sql语句,mysql高效的随机查询

    select * from AppleStorewhere rand()<0.015limit 100;

  5. 计算机常用的快捷键以及常用的Dos命令

    计算机的常用快捷键有哪些? 今天我重温了Java基础的课程,计算机的快捷键大家肯定不陌生.   计算机的常用快捷键 ctrl+c 复制 ctrl+v 粘贴 ctrl+s 保存 ctrl+x 剪切 ct ...

  6. 白嫖GitHub Action实现开源项目CICD

    什么是CI/CD?让你的项目变得更加敏捷! 在今天这个快速变化的时代,开发者们需要与时俱进,不断提升自己的工作效率.在这篇文章里,将一起探讨如何使用CI/CD和Github Action让你的项目更加 ...

  7. 6个优化策略,助你降低K8S成本

    Kubernetes 早已成为容器编排引擎的事实标准,而随着 Kubernetes 环境的复杂性持续增长,成本也在不断攀升.CNCF 发布的调查报告<Kubernetes 的 FinOps> ...

  8. 2023-05-02:如果一个正整数每一个数位都是 互不相同 的,我们称它是 特殊整数 。 给你一个正整数 n ,请你返回区间 [1, n] 之间特殊整数的数目。 输入:n = 20。 输出:19。

    2023-05-02:如果一个正整数每一个数位都是 互不相同 的,我们称它是 特殊整数 . 给你一个正整数 n ,请你返回区间 [1, n] 之间特殊整数的数目. 输入:n = 20. 输出:19. ...

  9. #Powerquery 数据结构基础 一维数据与二维数据

    本文参考了采悟老师的文章,推荐大家看原文,本文为笔记随笔 https://mp.weixin.qq.com/s?__biz=MzA4MzQwMjY4MA==&mid=2484068871&am ...

  10. 2022-08-15:k8s安装pgadmin,yaml如何写?

    2022-08-15:k8s安装pgadmin,yaml如何写? 答案2022-08-15: yaml如下: # 依赖postgres.yaml apiVersion: apps/v1 kind: D ...