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. 用Abp实现双因素认证(Two-Factor Authentication, 2FA)登录(一):认证模块

    @ 目录 原理 用户验证码校验模块 双因素认证模块 改写登录 在之前的博文 用Abp实现短信验证码免密登录(一):短信校验模块 一文中,我们实现了用户验证码校验模块,今天来拓展这个模块,使Abp用户系 ...

  2. node使用node-xlsx实现excel的下载与导入,保证你看的明明白白

    需求简介 很多时候,我们都会有这样一个业务. 将列表中的数据导出为excel. 这样做的目的是为了方便查看,同时可以保存在本地归档. 还可以将导出的Excel后的数据进行加工. node-xlsx 的 ...

  3. Yii初学者必看-yii 表单验证规则

    对yii深入了解总结出:希望对初学者有些帮助 Active Record (AR) 是一个流行的 对象-关系映射 (ORM) 技术. 每个 AR 类代表一个数据表(或视图),数据表(或视图)的列在 A ...

  4. Linux tinyhttpd编译总结

    编译环境:ubuntu16.04  x64 直接make编译tinyhttpd弹出如下错误和打印信息 其中报出两个错误信息,一个是cannot find -lsocket,另外一个就是pthread_ ...

  5. Kubernetes(K8S) kubesphere 安装

    安装KubeSphere最好的方法就是参考官方文档,而且官方文档是中文的. 官网地址:https://kubesphere.com.cn/ https://github.com/kubesphere/ ...

  6. Python-psycopg2的简单使用

    一.简介 psycopg2 库是 python 用来操作 postgreSQL 数据库的第三方库. 二.安装 1.执行如下命令安装 pip3 install psycopg2 2.使用Pycharm安 ...

  7. 超声波、毫米波、ToF激光雷达——在低功耗场景的应用选型

    前言: 目前主要的测距方式有:光学测距,超声波和微波雷达测距. 光学测距又可以分为:双目,结构光,ToF.微波雷达,在消费类产品中,常见的是波长在毫米级别的毫米波雷达.超声波应用比较多的是在车载倒车雷 ...

  8. SQL课设之报刊订阅管理

    E-R图: 一些常用命令: 1.登录mysql 2.选择进入数据库  相关SQL代码如下: CREATE TABLE Administrator( Gname varchar(50)PRIMARY K ...

  9. 2021-01-31:Redis集群方案不可用的情况有哪些?

    福哥答案2021-01-31:[答案来自此链接:](https://www.zhihu.com/question/442112697)一个集群模式的官方推荐最小最佳实践方案是 6 个节点,3 个 Ma ...

  10. 2022-04-02:你只有1*1、1*2、1*3、1*4,四种规格的砖块。 你想铺满n行m列的区域,规则如下: 1)不管那种规格的砖,都只能横着摆, 比如1*3这种规格的砖,3长度是水平

    2022-04-02:你只有11.12.13.14,四种规格的砖块. 你想铺满n行m列的区域,规则如下: 1)不管那种规格的砖,都只能横着摆, 比如1*3这种规格的砖,3长度是水平方向,1长度是竖直方 ...