ECharts设置x轴刻度间隔的2种解决方法

目录
  • 背景
  • 解决方法
    • 方法一: x轴的标签属性axisLabel下利用interval设置间隔
    • 方法二： 为axisLabel. formatters添加回调函数改变标签文字
  • 附：Echarts柱状图x轴间隔显示（显示不全）
  • 总结

背景

最近在写一个echarts数据看板，要在一个页面中展示多张图表，所以留给每张图表的尺寸就很小。这也就使得图表x轴的刻度文字全部挤到一起了，废话不多说，直接上图看效果。

右边的图标就是x轴刻度标签文字被挤到一起了，左边是该过之后的效果。

解决方法

想要达到上面图片中左边的效果方法不止一种。

最笨的方法 如果空间够的话直接将echart所在的div层尺寸设置得大一些，grid对象也同理，只要展示的空间足够宽，刻度标签自然就不会挤到一起。开个玩笑哈，能找到这类文章的，都是需要在有限的空间里解决间隔的问题

方法一: x轴的标签属性axisLabel下利用interval设置间隔

官方文档是这样说的：

通过设置interval的值，来达到按指定间隔显示或者不显示，或者使用回调函数，回调函数返回的布尔值决定指定索引的标签是否显示。这也是网上能找到的最普遍的答案，可惜没能解决我的问题。

官方文档上写的是在类目轴中有效，而我的x数据轴类型是“time”。所以只能再想其他方法

方法二： 为axisLabel. formatters添加回调函数改变标签文字

formatters属性是用来设置文字格式的，既然可以用来设置文字格式，那我把需要隐藏的文字改为空字符串不就行了。

思路一通代码就简单了，先看看回调函数怎么用

官方文档上说函数有两个参数，一个是索引一个是值。注意，这里的索引并不是我们x轴数据的索引，而是图标刻度的索引。举个例子，我的数据集是每秒钟电表的读数，那么一个小时就是3600条，如果是数据集索引的话就应该是0到3599，实际上，我们从没看到过一个数据轴上有那么多刻度。

我们图表数据轴的标签数量是echarts在渲染的时候自动生成的，但是数量还真不好说而且即便是同一个图表不同时间也不一样，一般也就十来个。
来看一下我写的回调函数：

// 通过formatter设置时间刻度间隔
function time_label_formatter(value,index) {
    // console.info(index);
    let remainder = index % 3;
    if (remainder == 0) {
        return "{HH}:{mm}";
    }
    else{
        return "";
    }
}

我的时间类型数据在赋值给配置项数据集之前已经做过数据清洗，本身就是Date类型，所以没有在函数内再做数据转换

我先把所有的标签索引打印出来，发现是0到16，那么按照间隔设置为3或者4就好了。思路就是这样，看到这里的朋友可以根据自己的实际情况调整一个间隔数就可以了。

最后看一下配置项series参数：

xAxis:[
	{
		type:"time",
		gridIndex:0,
		axisLabel：
			{
				rotate:-45,
				formatter:time_label_formatter
			},
	},
	{
		type:"time",
		gridIndex:1,
		axisLabel:
			{
				rotate:-45,
				formatter:time_label_formatter
			}
	}
],

附：Echarts柱状图x轴间隔显示（显示不全）

echarts中，横轴数据如果非常多，会自动隐藏一部分数据，我们可以通过属性interval来进行调整。默认会采用标签不重叠的策略间隔显示标签，则需要在xAxis 属性加上axisLabel:{interval: 0}。可以设置成 0 强制显示所有标签。

xAxis.axisLabel 属性：axisLabel的类型是object，主要作用是：坐标轴刻度标签的相关设置（当然yAxis也是一样有这个属性的）。

总结

到此这篇关于ECharts设置x轴刻度间隔的2种解决方法的文章就介绍到这了,更多相关ECharts设置x轴刻度间隔内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

    数据可视化 将数据通过图表的形式展现出来将大大的提升可读性和阅读效率 本例包含柱状图.折线图.散点图.热力图.复杂柱状图.预览面板等 技术栈 vue2.x vuex 存储公共变量,如色值等 vue-router 路由 element-ui 饿了么基于vue2开发组件库,本例使用了其中的datePicker echarts 一款丰富的图表库 webpack.ES6.Babel.Stylus... 项目截图 开发 组件化 本项目完全采用组件化的思想进行开发.使用vue-router作为路由,每个页面

  • echarts几个公司内部数据可视化图表必收藏

    echarts几个公司内部数据可视化图表必收藏

    目录 折线图 日负荷折线图 最大需求表 柱状图 日电量柱状图 分时电量 功率因数 三相温度 水球图 年月日负荷率图 散点图 三相平衡 最近公司有一个需求,要做一个数据可视化的页面,所有的图表都在下面,做这些都是本人自己写的,全部都是真是的项目中的代码,包含有柱状图.折线图.水球图以及散点图,这里直接打出来给大家练手,希望大家多多支持,如果这篇文章对您有用的话,记得收藏 数据: 链接: https://pan.baidu.com/s/1BSjLZkZ7dbsdiwPt4uPqOg 提取码: u1k

  • echarts图形x、y坐标文字设置间隔显示及相关问题详解

    echarts图形x、y坐标文字设置间隔显示及相关问题详解

    目录 x横坐标文字设置间隔显示 y纵坐标文字设置间隔显示 补充:Echarts柱状图x轴刻度间隔显示不全/刻度间隔全部显示-xaxis 1.在xAxis : [{}]中加入axisLabel 2.如果还是显示不全,可以再添加rotate 总结 x横坐标文字设置间隔显示 以 echarts 示例里面的 这个折线图为列,当数据比较少时,X轴的类目文字(横坐标)可以完全显示 修改左侧的option内容,在xAxis的data数组中再添加两行内容,同时,在series中添加对应数量的值,运行后,可以看到

  • 使用antv替代Echarts实现数据可视化图表详解

    使用antv替代Echarts实现数据可视化图表详解

    目录 前言 面积图 常用参数文档 图表 度量 scale 提示 tooltip 坐标系 axis chart.line(options) chart.area(options) geom.position() geom.color() geom.shape() 柱状图 数据标签 label chart.coordinate() chart.interval(options) 地图 地图容器配置项 map 地图等级 viewLevel 小结 前言 技术永无止尽,多看看不同风景 周一,还在愉快的为移

  • vue中echarts关系图动态增删节点以及连线方式

    vue中echarts关系图动态增删节点以及连线方式

    目录 echarts关系图动态增删节点及连线 echarts关系图vue完整代码 echarts关系图动态增删节点及连线 首先,echarts的关系图有个非常坑的地方,就是节点的id必须连续,否则增删之后节点无法连接! 下面是简单的演示实现,实际要用动态增删的话,要复杂的多得多. 我是用的关系图是力引导图 更新后不会重新渲染,只是动态增加的效果 //假设你已经渲染了关系图 test() { let option = this.chart.getOption() //获取option配置项 //S

  • Vue中的echarts图表如何实现loading效果

    Vue中的echarts图表如何实现loading效果

    目录 echarts图表实现loading效果 Vue使用echarts图表总结 安装echarts依赖 创建图表 在页面中的使用(在这里我用的局部引入) echarts图表实现loading效果 main.js 中配置Vue属性ecahrts // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts  data() 初始化数据调用数据 mounted() 周期函数内获取画布节点,并且调用加载loadi

  • JavaScript可视化与Echarts详细介绍

    JavaScript可视化与Echarts详细介绍

    目录 一.可视化介绍 二.可视化库介绍 三.Echarts Echarts引入和使用 了解基础配置 一.可视化介绍 可视化:将数据用图表展示出来,让数据更加直观.让数据特点更加突出 应用场景:营销数据.生产数据.用户数据 二.可视化库介绍 常见的数据可视化库: D3.js:目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js:百度出品的一个开源 Javascript 数据可视化库 Highcharts.js:国外的前端数据可视化库,非商用免费,被许多国外

  • ECharts设置x轴刻度间隔的2种解决方法

    ECharts设置x轴刻度间隔的2种解决方法

    目录 背景 解决方法 方法一: x轴的标签属性axisLabel下利用interval设置间隔 方法二: 为axisLabel. formatters添加回调函数改变标签文字 附:Echarts柱状图x轴间隔显示(显示不全) 总结 背景 最近在写一个echarts数据看板,要在一个页面中展示多张图表,所以留给每张图表的尺寸就很小.这也就使得图表x轴的刻度文字全部挤到一起了,废话不多说,直接上图看效果. 右边的图标就是x轴刻度标签文字被挤到一起了,左边是该过之后的效果. 解决方法 想要达到上面图片

  • 坐标轴刻度取值算法之源于echarts的y轴刻度计算需求

    坐标轴刻度取值算法之源于echarts的y轴刻度计算需求

    目录 前言 算法描述 上代码 代码运行效果 ts版本(2021/3/10补充) 总结 前言 因实习的公司是做大数据的,而我的工作刚好又是需要绘制一些数据图表的.绘制图表有许多现成的组件可以使用,但是要想达到产品所需要的效果,只靠组件内部的一些功能是不太够的.一些细腻的要求必须在掌握组件原理方法的情况下,自己去写算法来完成.例如,本文要说的这个刻度计算算法,开始正文之前,我先描述遇到的问题. echarts自身的刻度计算有时候并不好用,例如有时候你希望让图表只有5条刻度线,即分成4段,echart

  • 基于JavaScript实现数值型坐标轴刻度计算算法(echarts的y轴刻度计算)

    基于JavaScript实现数值型坐标轴刻度计算算法(echarts的y轴刻度计算)

    目录 前言 算法描述 代码 ts版本(2021/3/10补充) 结语 前言 因实习的公司是做大数据的,而我的工作刚好又是需要绘制一些数据图表的.绘制图表有许多现成的组件可以使用,但是要想达到产品所需要的效果,只靠组件内部的一些功能是不太够的.一些细腻的要求必须在掌握组件原理方法的情况下,自己去写算法来完成.例如,本文要说的这个刻度计算算法,开始正文之前,我先描述遇到的问题.echarts自身的刻度计算有时候并不好用,例如有时候你希望让图表只有5条刻度线,即分成4段,echarts提供了一个参数叫

  • 解决echarts图表y轴数据间隔过大的问题

    目录 echarts图表y轴数据间隔过大的问题 echarts图表Y轴最小间隔值 改为1 总结 echarts图表y轴数据间隔过大的问题 1.如图所示,echarts图表y轴数据间隔过大,前面几个显示正常,最后一个值变得很大,造成页面特别难看 2.解决办法: 在yAxis中axisLabel设置如下,可以根据自己的需求截取几位小数点 yAxis: { type: "value", axisLabel: { formatter:function (value, index) { retu

  • R语言 实现手动设置xy轴刻度的操作

    R语言 实现手动设置xy轴刻度的操作

    在R中,plot函数作图时会自动给出xy轴的刻度标度,如下图: 有时我们需要自己定义xy轴的刻度,这时我们可以用axis中的at和labels参数来更改. 首先,我们先令plot不要画出xy轴的标度 然后,用axis函数设置xy轴的刻度 这样xy轴的刻度就完全按照我们自己的意愿显示了,也可以设置at参数不是均匀的,总之,用这两个参数就可以完全自己控制xy轴的刻度显示了 补充:R语言自定义坐标轴示例 我就废话不多说了,大家还是直接看代码吧~ x <- c(1:10) y <- x z <-

  • efang设置出现读取Serv-U路径失败330101的解决方法

    efang设置出现读取Serv-U路径失败330101的解决方法

    读取Serv-U路径失败330101的解决方法 我安装的易方怎么不能设置Serv-U啊? 点设置就出现 读取Serv-U路径失败330101. 谁知道这是怎么会事啊??我安装了Serv-U的...希望知道的告诉我一下 解决方法: 把serv-u的用户数据 存储到注册表里去,不是放在ini文件里

  • Android 设置应用全屏的两种解决方法

    在开发中我们经常需要把我们的应用设置为全屏,有两种方法,一中是在代码中设置,另一种方法是在配置文件里改! 一.在代码中设置: 复制代码 代码如下: package com.android.tutor;  import android.app.Activity;  import android.os.Bundle;  import android.view.Window;  import android.view.WindowManager;  public class OpenGl_Lesson

  • Android ListView的item背景色设置和item点击无响应的解决方法

    下面讲解以下在使用listview时最常见的几个问题.1.如何改变item的背景色和按下颜色 listview默认情况下,item的背景色是黑色,在用户点击时是黄色的.如果需要修改为自定义的背景颜色,一般情况下有三种方法: 1)设置listSelector 2)在布局文件中设置item的background 3)在adapter的getview中设置 这三种方法都能达到改变item默认的背景色和按下颜色,下面来分别讲解,但是在这之前需要先写好selector.xml文件; 复制代码 代码如下:

  • .NET中TextBox控件设置ReadOnly=true后台取不到值三种解决方法

    当TextBox设置了ReadOnly="true" 后,要是在前台为控件添加了值,后台是取不到的,值为"空" 原理没想通,说不清楚微软是出于什么考虑的,不过有时是要我们能通过前台脚本来填充值,并不希望用户修改其控件内容,这时就比较尴尬了. 刚开始是换成Html 里的 <input type="text" readonly="readonly" > ,不过后来发现这个工作量是很大的, 所以网上搜了下,没找出Text

  • Python3.8 + Tkinter: Button设置image属性不显示的问题及解决方法

    Python3.8 + Tkinter: Button设置image属性不显示的问题及解决方法

    Bug如题目所描述.尝试过将按钮的image指向的变量del_icon设置为global全局变量,但是不成功,会提示如" AttributeError: 'PhotoImage' object has no attribute '_PhotoImage__photo' "的错误.代码1是导致bug的源头. 代码1: #!/bin/env python3 from PIL import ImageTk import tkinter as tk ... self.del_button =

随机推荐