echarts-柱状图-柱状阴影

最新推荐文章于 2025-07-03 14:30:17 发布

原创最新推荐文章于 2025-07-03 14:30:17 发布 · 1.4w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts 柱状阴影

本文介绍如何使用ECharts创建带有阴影效果的柱状图，通过调整柱状图的样式、颜色渐变及透明度，实现数据展示的美观与直观。文章详细展示了配置代码，包括x轴和y轴的设置、数据系列的定义等。

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

柱状阴影

头部

echarts-柱状图-柱状阴影

    axisTick: {
        show: false
    },
    axisLine: {
        show: false,
    },
    z: 10,
},
yAxis: {
    axisLine: {
        show: false,
    },
    axisTick: {
        show: false
    },
    axisLabel: {
        textStyle: {
            color: '#ffffff'
        }
    },
    splitLine: {
        // 是否显示
        show:true,
        // 分割线样式
        lineStyle:{
            // 颜色
            color:'#0976b6',
            // 透明度
            opacity:'1',
        }
    },
    // y轴刻度间隔
    minInterval:25, 
    //左侧标题
    name: '咨\n询\n业\n务\n量',
    nameTextStyle: {
        color: '#fff',
    },
    position:'left',
    nameLocation: 'middle',
    nameGap: 45, 
    nameRotate: 0,
    color:'#fff' 
},
series: [
    { // For shadow
        type: 'bar',
        itemStyle: {
            normal: {color: 'rgba(0,0,0,0.05)'},
        },
        barGap:'-100%',
        barCategoryGap:'40%',
        barWidth:45,
        // data: dataShadow,
        animation: false
    },
    {
        type: 'bar',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#01ecff'},
                        {offset: 0.5, color: '#1cc6fa'},
                        {offset: 1, color: '#3397ea'}
                    ]
                ),
                label: {
                    show: true,
                    position: 'top',
                    color:'#ffffff',
                    fontSize:21
                },
            },
            emphasis: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#3397ea'},
                        {offset: 0.7, color: '#1cc6fa'},
                        {offset: 1, color: '#01ecff'}
                    ]
                )
            }
        },
        data: data
    }
]

};

if (option && typeof option === “object”) {
myChart.setOption(option, true);
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190129165522683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1aXlxa2luZw==,size_16,color_FFFFFF,t_70)