固定宽度柱状图添加固定宽度的背景和选中阴影～echarts奇奇怪怪系列

最新推荐文章于 2024-09-05 10:24:48 发布

鲤鲤鲤carp

最新推荐文章于 2024-09-05 10:24:48 发布

阅读量7.1k

点赞数 13

分类专栏： Echarts奇奇怪怪文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_34027761/article/details/125208831

版权

博客讲述了如何使用Echarts创建带有固定宽度背景且选中时有阴影效果的柱状图。作者发现官方提供的showBackground选项不满足需求，于是通过创建两个柱状图并调整barGap来模拟背景，但发现这种方法难以精确控制。最后，通过使用两个x轴，将背景和柱状图分开渲染，成功实现了所需效果。配置项中展示了具体的Echarts代码实现。

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

一、效果

遇到一个需要固定宽度和对应的背景，背景比柱状要宽一点,并且选中有选中效果阴影
上图：
在这里插入图片描述

原本以为直接用官方的就可以了，结果官方的showBackground是不能这是宽度的，与柱状图同等宽度，选中阴影通过axisPointer做出来，没法设置宽度，也是差强人意
官网的是这样的：不符合要求
在这里插入图片描述

二、解决方法

到论坛里，看到有人是通过用两个柱状图，用 barGap配置项偏移做出来的
但我我发现，这种方法做出来的，偏移量很难把握，而且他只能是一个柱状图，两个直接gg
最终我采用两x轴分开渲染背景和柱状图，避免柱状图数据被背景数据影响

三、最终效果

在这里插入图片描述

option配置项

const data = [120, 200, 150, 80, 70, 110, 130]
const lineData = [150, 230, 224, 218, 135, 147, 260]
const max = data.concat(lineData)
	.reduce((pre, cur) => pre > cur

最低0.47元/天解锁文章