echarts入门柱状图设置选中阴影宽度

不吃鱼皮

已于 2022-08-29 16:56:58 修改

阅读量4.5k

点赞数 2

文章标签： echarts 前端 javascript

于 2022-08-29 13:54:56 首次发布

本文链接：https://blog.csdn.net/weixin_45818290/article/details/126579225

版权

本文介绍了如何在ECharts中解决柱状图选中阴影宽度无法调整的问题。通过设置两个x轴，将选中阴影和数据柱子分配到不同的x轴，并在series中为数据和阴影柱子分别设置背景色，从而实现阴影宽度的定制。

摘要由CSDN通过智能技术生成

设置柱状图的barWidth后，他的选中阴影部分却还是跟未设置前一样

改变后效果图

那么我们想要他的阴影宽度变窄，echarts官网是不支持这个属性的，我们的做法是设定两个x轴，选中阴影设置一个x轴，数据柱子设置一个x轴

xAxis: [
    {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }, 
    {
        type: 'category',
        show: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
],

再在series中给数据柱子喝阴影柱子分别设置背景色等

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8

最低0.47元/天解锁文章

不吃鱼皮

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

echarts入门 柱状图设置选中阴影宽度

完整代码

echarts入门柱状图设置选中阴影宽度