ECharts折线图自定义横坐标显示或隐藏

最新推荐文章于 2025-07-12 11:00:18 发布

陈暗暗

最新推荐文章于 2025-07-12 11:00:18 发布

阅读量7.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.csdn.net/cll1224666878/article/details/106570009

echarts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用ECharts的axisLabel.interval回调函数控制横坐标的显示与隐藏。通过一个示例展示了如何根据横坐标值的特性（如是否包含点）来决定其是否显示，实现整点坐标显示而隐藏非整点坐标的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axisLabel.interval

回调函数参数 index：横坐标索引值，value：横坐标值

返回值：true显示，false隐藏

例：

xAxis: {
  type: 'category',
  boundaryGap: false,
  data: this.xName,
  axisLabel: {
    interval: (index, value) => {
      //具体逻辑判断
      if (value.indexOf("点") !== -1)
        return true
      return false
    }
  }
}

效果：实际间隔十分钟一个坐标点，最终将整点坐标显示，其余隐藏

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

陈暗暗

关注关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Echarts - 去掉图表上的横线和竖线

🏆 前端领域优质创作者

05-24

1万+

效果图默认效果：变为如下图所示效果：实现方法官方配置文档：https://echarts.apache.org/zh/option.html#radar.splitLine 在 xAxis yAxis 配置中分别加入以下代码： splitLine: { show:false }

解决echarts中横坐标值显示不全(自动隐藏)问题

10-15

主要介绍了解决echarts中横坐标值显示不全(自动隐藏)问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

2 条评论您还未登录，请先登录后发表或查看评论

echart折线图 自定义隐藏折线

YHJ_2298的博客

01-06

7745

图例是echarts官网的，大家可以根据自己的需求在折线初始化的时候，默认指定的折线不显示

echarts实现自定义折线图横坐标图片

weixin_44252277的博客

04-27

1366

一、我们可以参考一下echarts官网的实列二、直接粘贴一下完整的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div{ background-color: white; width: 100

python 横坐标只显示部分数据_解决echarts中横坐标值显示不全(自动隐藏)问题

weixin_39886612的博客

12-08

4601

echarts中，横轴数据如果非常多，会自动隐藏一部分数据，我们可以通过属性interval来进行调整。如下图，当横轴时间为13天时，echarts会自动隔天显示如果我们想显示全，则需要在xAxis 属性加上axisLabel:{interval: 0}"xAxis":[{"data":["2015-5-13","2015-5-14","2015-5-15","2015-5-16","2015-5...

echarts图表横轴个性化设置

CherishL_的专栏

05-12

6151

参考： http://echarts.baidu.com/echarts2/doc/doc.html#Axis require.config({ paths:{ echarts:'${contextPath}/js/echarts' } }); require( [ 'ec

echarts折线图实现滑动平移，横坐标过多时隐藏部分横坐标，通过滑动平移显示隐藏的部分

2401_84093407的博客

05-05

990

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

vue下使用echarts折线图及其横坐标拖拽功能

weixin_30585437的博客

11-16

1492

vue页面中使用折线图，并且有时间段筛选。因此就需要用到横坐标的拖拽功能。界面效果如下：现在来看这个效果的实现代码： drawLine() { let that = this, lineDate = [], dispatchCount = [], finishCount = [], ...

VUE+eCharts大数据折线图自定义框选缩放解决方案

热门推荐

zhouxukun123的专栏

04-21

2万+

需求因为所展现的结果值是整数，而Y轴label随鼠标上下移动时，label会显示小数，所以想把label去掉，同时X轴的label想用自定义的label（数值后加上单位）。解决方法查看ECharts官网API的坐标轴属性设置，可以通过yAxis.axisPointer.label设置实现需求。注：tooltip.axisPointer.type 设置为 ‘cross’ 则默认显示标签，否...

echarts 实现横坐标只显示第一个和最后一个自定义的内容

weixin_45272209的博客

02-22

6108

echarts 实现横坐标只显示第一个和最后一个自定义的内容要实现横坐标的修改则可以找到 xAxis->axisLabel xAxis:[ { show:true, formatter:(_,index:number){ // 第一个参数没有用所以用_代替 if(index===0){ return `60s` }else if(index===20) // 或者是等于 data.lenght-1(前提是

eharts折线图解决横坐标过多产生折叠，同时保留拐点显示

HZX19941018的博客

12-06

1万+

博主今天在实现一个功能的时候，用到了echarts折线图来实现，由于博主公司的打点间隔比较密，每10分钟一次，所以一天下来，数据也是很多，从而导致了横坐标数据太多，所以博主就想横坐标间隔显示，但是这样又发现了一个问题，那就是折线图的拐点一些却没显示，所以博主也是百度谷歌搜索一翻，都没有，最后在文档中发现了一个配置，最终搞定，所以下面跟大家分享如何配置。首先如果横坐...

ECharts系列： Vue 中使用 ECharts 折线图时，怎么配置来实现默认隐藏某些图例，并在用户点击图例时显示或隐藏对应的数据系列

浪潮行舟_chenjin2136

03-31

1652

在最近一个大屏中，有一个需求，想默认隐藏“日常巡检”图例，在用户点击图例的时候显示或隐藏对应的图例；

关于ECharts怎么隐藏掉坐标轴

糖长老莫小贝的博客

02-26

1万+

像如图一样，有时候我们需要制作不需坐标轴的echarts图，其实想要实现这种效果很简单，这里我以vue代码为例简单说明一下： option = { xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', '...

小程序中Echarts实现隐藏x轴，y轴，刻度线，网格

Hero_rong的博客

09-25

4548

首次在小程序中使用echarts踩了一些小坑做个记录，希望可以帮到同样踩坑的同学。这里以柱状图作为例子，扁扁的柱状图什么线都没有了。

vue echarts 折线图多Y轴显示，加动态配置Y轴颜色

weixin_39246975的博客

11-22

2554

1、效果图 2、引入依赖 npm install echarts --save 3、在mian.js中引入 import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts 4、在HTML声明div <div style="width:700px;height:500px;" ref="lineref"></div> 5、js中使用绘制折线图 let _this = this; /**获取图

ECharts动态修改series节点显示隐藏

鹏多多的博客

08-29

3223

要求将图表分组，根据用户选择的组，来确定ECharts要显示那些线条和柱子，也就是动态的显示series系列。

echarts中折线图不显示横坐标

08-18

在Echarts中折线图不显示横坐标的问题可以通过设置xAxis的axisLabel属性来解决。根据引用的示例代码，你可以在xAxis中添加axisLabel属性，并在其中定义一个函数，通过判断横坐标的值来决定是否显示。例如，如果横坐标的值中包含"点"这个关键字，那么就返回true，否则返回false。这样可以实现自动隐藏部分横坐标值。希望对你有所帮助。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [解决echarts中横坐标值显示不全(自动隐藏)问题](https://download.csdn.net/download/weixin_38528888/12924974)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [ECharts折线图自定义横坐标显示或隐藏](https://blog.csdn.net/cll1224666878/article/details/106570009)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]