Echarts x轴设置上下偏移

2024-05-12 01:40:54

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}}
}

Echarts x轴设置上下偏移相关推荐

ECharts双y轴设置0刻度对齐，左右刻度根据数据变化？
一.ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化? 双y轴因为左右的数值有正数有负数的原因,出现0刻度不在一条线上的情况,解决办法如下. 代码如下: //获取数据中的最大值 functi ...
动态设置echarts Y轴最大刻度与最小刻度
动态设置echarts Y轴最大刻度与最小刻度 yAxis: { max: function (value) { return (value.max + 0.01 * (value.min)).toF ...
echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
Echarts Y轴遮挡解决方案
Echarts Y轴遮挡解决方案背景:在做手机端的时候要实现图表展示,但是Echarts有个通病,就是对小屏幕的浏览器不太兼容,开始尝试设置绑定div的样式,加上padding :0发现不管用,用谷 ...
echart x轴倾斜,Echarts x轴字体倾斜
民谣太穷了,一听就是一根烟,一听就是一瓶酒.而我只有一根烟了,还要撑一夜,只剩一点爱了,还要过一生. 前端QQ群: 981668406 在此附上我的QQ: 2489757828 有问题的话可以一同探讨 ...
Echarts x轴字体倾斜
echarts x轴标签文字过多导致显示不全如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
ECharts X 轴标签过长导致文字重叠的 4 种解决方案
目录方法一:Echarts X 轴标签倾斜摆放方法二:Echarts X 轴限制每行字数,换行显示方法三:Echarts X 轴垂直竖显文字方法四:Echarts X 轴隔行显示使用 ...
echarts时间轴应用
echarts时间轴应用的两种方法第一种,x轴设置type为value,然后还需要把x轴显示的时间戳通过格式化函数(formatter)转换为日期类型,series中的data转换为时间戳.数据类型 ...
echarts 不规则柱状图设置
echarts 不规则柱状图设置 pictorialBar和bar的应用 1.长方形渐变柱子应用type='bar'的普通柱状图配置: 2.上面的圆形则需要用type='pictorialBar'的不 ...
python使用matplotlib可视化、为可视化图像的X轴和Y轴设置自定义的轴标签（axis labels of matplotlib plot）
python使用matplotlib可视化.为可视化图像的X轴和Y轴设置自定义的轴标签(axis labels of matplotlib plot) 目录

最新文章

热门文章