echarts带背景阴影的柱状图设置

echarts图表,带背景阴影渐变的柱状图


请添加图片描述

const datas = [10, 23, 55, 67];
function max(datas) {
    var max = datas[0];
    for (var i = 0; i < datas.length; i++) {
        if (max < datas[i]) {
            max = datas[i];
        }
    }
    return max;
}
// 背景xdata  渐变色柱状图   间隔色 两种  你可以设置多种
var bgData = [];
for (var i = 0; i < datas.length; i++) {
    bgData.push(max(datas) + 40);
}
getSymbolData = (datas) => {
    let arr = [];
    for (var i = 0; i < datas.length; i++) {
        arr.push({
            value: datas[i],
            symbolPosition: 'end',
        });
    }
    return arr;
};
option = {
    backgroundColor: '#000F32',
    grid: {
        left: '8%',
        right: '10%',
        top: '20%',
        bottom: '15%',
    },
    xAxis: [
        {
            axisLine: {
                show: false, //you边线条
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#fff',
                fontSize: 20,
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu'],
        },
        {
            data: datas,
            axisLine: {
                show: false, //背景线条
                lineStyle: {
                    color: '#CED5E1',
                },
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
    ],
    yAxis: [
        {
            position: 'left',
            type: 'value',
            splitLine: {
                show: false,
            },
            axisLine: {
                show: false, //左边线条
            },
            axisLabel: {
                //左轴汉字
                show: false,
            },
        },
    ],
    series: [
        {
            type: 'bar',
            data: datas,
            label: {
                show: true,
                position: 'top', // 汉字位于上方
                padding: 40, // 汉字距离柱状图间距
                color: '#fff',
                fontSize: 18,
                fontWeight: 800,
            },
            itemStyle: {
                color: '#1F77D7',
            },
            barWidth: 32,
        },
        {
            type: 'pictorialBar',
            symbol:'image://图片地址',
            symbolSize: [85, 3],
            symbolOffset: [1, -2],
            z: 12,
            itemStyle: {
                normal: {
                    color: '#fff',
                },
            },
            data: getSymbolData(datas),
        },
        {
            type: 'bar',
            xAxisIndex: 1,
            data: bgData,
            itemStyle: {
                normal: {
                    // barBorderRadius: 20,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 1,
                            color: '#082858',
                        },
                        {
                            offset: 0.5,
                            color: '#000F32',
                        },
                        {
                            offset: 0.4,
                            color: '#000F32',
                        },
                        {
                            offset: 0.1,
                            color: '#082858',
                        },
                    ]),
                },
            },
            z: 1,
        },
    ],
};

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts中,要实现柱间隔阴影效果,可以通过对series配置项中的itemStyle进行设置。具体的做法如下所示: 1. 首先,需要在itemStyle中设置color字段为一个渐变色值。可以通过设置一个数组,将起始颜色和结束颜色传入,实现渐变效果。例如,设置["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.3)"],表示从透明到浅灰色的渐变。 2. 然后,通过设置emphasis字段为一个阴影效果,可以实现柱间隔的阴影效果。可以通过设置shadowColor、shadowBlur、shadowOffsetX和shadowOffsetY等属性来调整阴影的颜色、模糊度和位置。 下面是一个示例代码,展示了如何在echarts中实现柱间隔阴影的效果: ```javascript option = { xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'], }, yAxis: { type: 'value', }, series: [{ type: 'bar', data: [200, 300, 400, 500, 600], itemStyle: { color: ["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.3)"], emphasis: { shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 2, }, }, }], }; ``` 通过以上配置,就可以在echarts中实现柱间隔阴影的效果。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [echarts渐变色背景](https://download.csdn.net/download/qq_36437172/12418565)[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背后阴影如何同步y轴最大值问题?](https://blog.csdn.net/Tombers/article/details/125017568)[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 ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值