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

原创已于 2022-08-29 16:56:58 修改 · 4.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

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

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

设置柱状图的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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 步骤一：引入echarts.js -->
    <script src="../lib/echarts.min.js"></script>
</head>
<body>
    <!-- 步骤二：准备一个呈现图表的盒子 -->
    <div id="main" style="width:600px;height:400px"></div>
    <script>
        // 步骤三：初始化echarts实例对象
        // 参数，dom，决定图标最终呈现的位置
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        // var option;
        var large = 0.2;
        // 步骤四：准备配置项
        const data = [500, 500, 500, 500, 500, 800, 800]
        const lineData = [150, 230, 224, 218, 135, 147, 260]
        const max = data.concat(lineData)
            .reduce((pre, cur) => pre > cur ? pre : cur, 0)
        const color = []
        const option = {
            color,
            xAxis: [{
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }, {
                type: 'category',
                show: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }],
            yAxis: {
                type: 'value',
                max: max
            },
            series: [
            {
                name: 'Email',
                data: [120, 132, 101, 134, 90, 230, 210],
                barWidth: 20,
                type: 'bar',
                stack: 'ad',
                itemStyle: {
                    normal: {
                        color: function(d) {
                            let a = 6 * 10
                            return `rgba(34,95,219,${(((100-a)+(d.dataIndex*5))/100).toFixed(2)})`
                        }
                    }
                }
            },  
            {
                name: 'Union',
                data: [220, 182, 191, 234, 290, 330, 310],
                barWidth: 20,
                type: 'bar',
                stack: 'ad',
                itemStyle: {
                    normal: {
                        color: function(d) {
                            let a = 6 * 10
                            return `rgba(44,184,229,${(((100-a)+(d.dataIndex*5))/100).toFixed(2)})`
                        }
                    }
                }
            }, 
            {
                xAxisIndex: 1,
                itemStyle: {
                    color: 'rgba(18, 18, 18, 0)'
                },
                data: data.map(() => max),
                barWidth: 30,
                emphasis: {
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            x2: 0,
                            y: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 0,
                                    color: 'rgba(180, 180, 180, 0.25)'
                                }
                            ],
                        },
                    },
                },
                type: 'bar'
            }]
        };

        // 步骤五：将配置项设置给echarts实例对象
        option && myChart.setOption(option);
    </script>
</body>
</html>