如何使用Echarts完成柱状图重叠功能

---

业务需求中需要显示各个科目下的总公司预算帽和分公司预算帽的使用情况对比，所以在柱状图显示时就需要将总公司的柱子和分公司的柱子重叠在一起显示，以此来比较分公司使用了总公司多少的预算，业务很明确，但是如何做到柱子的重叠有点不明确。

---

山重水复

首先我去查询了kendoui的官网看看有没有柱状图重叠显示的属性，搜索一番后无果，kendoui只有柱状图叠加的使用样例，并没有柱状图重叠，这种情况下只能去寻找其他的图表框架，于是我转用了Echarts这个图表插件，Echarts中有一个属性barGap可以设置柱子的位置，设置为-100%后就会重叠到上一个柱子的位置，就在我以为问题已经解决的时候，页面完成的效果并不是我们想要的结果，所有的柱子都重叠在了一起，因为设置了barGap属性之后，会对所有的柱子都应用这个属性，而不仅仅是应用于设置的柱子，所有就导致所有的柱子都向左移动了100%的距离，所以柱子叠加在了一起。无奈只能寻找其他的解决办法

柳暗花明

使用两根X轴叠加的方式完成柱子重叠功能
就在我继续在Ecahrts官网上翻找实例的时候，我看到了一个同样实现了柱子重叠的案例，欣喜之下，仔细翻看它的代码，发现了设计神奇的地方，就是实现代码中在同一个grid中使用了两根X轴来显示数据，总的数据分科目放在一根x轴上，分的数据分科目放在一根x轴上，然后设置两根x轴重叠在一起，这样两根x轴上各自显示的柱子不就可以重叠在一起了吗，尝试了一下真的达到了预期想要的效果，只能说思考问题的方式被限制住了，只想去找重叠属性，而没有换种解决问题的思路。
以下是参考的柱状图重叠的代码地址以及代码
https://gallery.echartsjs.com/editor.html?c=xB1HF49Cjb

js代码：
option = {
    backgroundColor: '#0E2A43',
    title: {
        text: "是否会跟风闯红灯",
        textStyle: {
            color: '#00FFFF',
            fontSize: 24
        }
    },
    legend: {
        bottom: 20,
        textStyle: {
            color: '#fff',
        },
        data: ['男', '女']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
    },

    tooltip: {
        show: "true",
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    yAxis: {
        type: 'value',
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: '#fff',
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#aaa',
            }
        },
    },
    xAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff',
                }
            },
            data: ['会', '不会', '看情况']
        }, {
            type: 'category',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            },
            data: ['会', '不会', '看情况']
        },

    ],
    series: [{
            name: '总人数',
            type: 'bar',
            xAxisIndex: 1,

            itemStyle: {
                normal: {
                    show: true,
                    color: '#277ace',
                    barBorderRadius: 50,
                    borderWidth: 0,
                    borderColor: '#333',
                }
            },
            barWidth: '20%',
            data: [33, 33, 33]
        }, {
            name: '总人数',
            type: 'bar',
            xAxisIndex: 1,

            itemStyle: {
                normal: {
                    show: true,
                    color: '#277ace',
                    barBorderRadius: 50,
                    borderWidth: 0,
                    borderColor: '#333',
                }
            },
            barWidth: '20%',
            barGap: '100%',
            data: [51, 51, 51]
        }, {
            name: '男',
            type: 'bar',
            itemStyle: {
                normal: {
                    show: true,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#00FFE6'
                    }, {
                        offset: 1,
                        color: '#007CC6'
                    }]),
                    barBorderRadius: 50,
                    borderWidth: 0,
                    borderColor: '#333',
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            barWidth: '20%',
            data: [8, 15, 10]
        }, {
            name: '女',
            type: 'bar',
            barWidth: '20%',
            itemStyle: {
                normal: {
                    show: true,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#3023AE'
                    }, {
                        offset: 1,
                        color: '#C96DD8'
                    }]),
                    barBorderRadius: 50,
                    borderWidth: 0,
                    borderColor: '#333',
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            barGap: '100%',
            data: [8, 17, 26]
        }

    ]
};

柱状图重叠示例图