Echarts x轴设置上下偏移_echarts offset-程序员宅基地

技术标签：偏移 x轴 Echarts

Echarts x轴设置上下偏移

在我们使用Echarts过程中，有时会碰到需要让x轴上下偏移的情况。举个例子，如下图中我们加粗了x轴，默认情况下柱子图形会压着x轴的上半部分，导致整体看起来十分的怪异

在这里插入图片描述

如果想要整体看起更美观，我们可以通过提升柱形图位置，或者降低x轴位置，让柱形图刚好挨着x轴上边缘，这种情况下会更美观一点，我们该如何实现呢？

利用stack

这种方法的原理是通过柱子图形同stack会自动叠加的原理，我们增加一组假数据，设置为跟真实业务数据相同的stack，并设置柱子颜色为透明，这样从视觉上看就像是图形数据整体上移了

这种方式有点弊端，比如只适用于柱形图，柱子上移的距离的大小不好精确控制

利用x轴的offset

在Echarts的x轴配置中，是有一个offset的配置的。官方解释是：X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。平常我们在只有一个x轴的时候设置这个值是没有任何效果的

我亲自试了下，发现一规律，在相同position有多个x轴的时候，可以通过设置offset为负数让轴向上偏移，但是无法向下偏移。后来我又发现了一个x轴的配置：axisLine.onZero。该配置的官方解释是：X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效

我试了下，在y轴包含0刻度的时候，我们将该值设置为false，然后神奇的事情发生了：x轴的偏移设置offset起作用了，负值向上偏移，正值向下偏移

通过同时设置x轴的axisLine.onZero和offset我们实现了x轴的向下平移，如下图所示：

在这里插入图片描述

这样看起来柱子就好像搁置在X轴上面，视觉上要好看很多，上例中x轴配置如下：

xAxis: {
    
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
    
        show: false
    },
    offset: 5,
    axisLine: {
    
        onZero: false,
        lineStyle: {
    
            width: 10
        }
    }
}

本文链接：https://blog.csdn.net/huzhenv5/article/details/107811295

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

BAT批处理创建文件桌面快捷方式_批处理创建桌面快捷方式-程序员宅基地

文章浏览阅读1.5w次，点赞9次，收藏26次。简介一个创建某个文件到桌面快捷方式的BAT批处理.代码@echooff::设置程序或文件的完整路径（必选）setProgram=D:\Program Files (x86)\格式工厂.4.2.0\FormatFactory.exe::设置快捷方式名称（必选）setLnkName=格式工厂v4.2.0::设置程序的工作路径，一般为程序主目录，此项若留空，脚本将..._批处理创建桌面快捷方式

射频识别技术漫谈（6-10）_芯片 ttf模式-程序员宅基地

文章浏览阅读2k次。射频识别技术漫谈（6-10），概述RFID的通讯协议；射频ID卡的原理与实现，数据的传输与解码；介绍动物标签属性与数据传输；RFID识别号的变化等_芯片 ttf模式

Python 项目实战 —— 手把手教你使用 Django 框架实现支付宝付款_django 对接支付宝接口流程-程序员宅基地

文章浏览阅读1.1k次。今天小编心血来潮，为大家带来一个很有趣的项目，那就是使用 Python web 框架 Django 来实现支付宝支付，废话不多说，一起来看看如何实现吧。_django 对接支付宝接口流程

Zabbix 5.0 LTS在清理历史数据后最新数据不更新_zabbix问题没有更新-程序员宅基地

文章浏览阅读842次。Zabbix 5.0 LTS，跑了一年多了一直很稳定，前两天空间显示快满了，于是手贱清理了一下history_uint表（使用mysql truncate），结果折腾了一周。大概故障如下：然后zabbix论坛、各种群问了好久都没解决，最后自己一番折腾似乎搞定了。初步怀疑，应该是由于历史数据被清空后，zabbix需要去处理数据，但是数据量太大，跑不过来，所以来不及更新了（？）..._zabbix问题没有更新

python学习历程_基础知识（2day）-程序员宅基地

文章浏览阅读296次。一、数据结构之字典 key-value

mybatis-plus字段策略注解strategy_mybatisplus strategy-程序员宅基地

文章浏览阅读9.7k次，点赞3次，收藏13次。最近项目中遇到一个问题，是关于mybatis-plus的字段注解策略，记录一下。1问题调用了A组件（基础组件），来更新自身组件的数据，发现自己组件有个字段总是被清空。2原因分析调用的A组件的字段，属于基础字段，自己业务组件，对这个基础字段做了扩展，增加了业务字段。但是在自己的组件中的实体注解上，有一个注解使用错误。mybatis-plus封装的updateById方法，如果..._mybatisplus strategy