echarts 相邻柱状图指数变化 多个标线统计

这种写法纯属自己瞎想的，也不知道正不正确，如有更好的方法请留言或评论

效果图

<template>
    <div class="toolset-wraper">
        <div id="echarts-bar"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            echartsBar: null,
            option: {},
        }
    },
    mounted() {
        this.initEchars()
    },
    methods: {
        initEchars() {
            let echartsBar = document.getElementById('echarts-bar')
            this.echartsBar = this.$echarts.init(echartsBar)

            let _this = this
            window.addEventListener('resize', function () {
                _this.echartsBar.resize()
            })
            this.setOptions()
        },
        // 指数计算
        getOptions3Val(res) {
            let xAxisData = res.xAxisData
            let seriesData1 = res.seriesData1
            let seriesData2 = res.seriesData2
            //找到最大值
            let seriesMaxVal1 = Math.max(...seriesData1)
            let seriesMaxVal2 = Math.max(...seriesData2)
            let seriesMaxVal = Math.max(...[seriesMaxVal1, seriesMaxVal2])

            let width = this.echartsBar3.getWidth() //w:1571
            let height = this.echartsBar3.getHeight() //h:226
            let barWidth = 80 //width / (xAxisData.length * 3) //柱状图的宽度

            // 如果标线歪了，需要重新确定X,Y 的值
            // x
            let wStartSize = 70 //echarts 距左侧距离
            let wEndtSize = 20 //echarts距右侧距离
            let wXaxis = parseInt(width - wStartSize - wEndtSize) //echarts X轴的宽度

            // y
            let hTopSize = 68 //Echarts 距离上面的距离
            let hBottomSize = 40 //Echarts 距离下面的距离
            let hYaxis = height - hTopSize - hBottomSize //echarts Y 轴的高度
            let endY = height - hBottomSize //Y轴最下面坐标

            let bilv = 0.25 //两个相邻柱状图之间的距离比率

            // 每个分段
            let wfenduan = parseInt(wXaxis / xAxisData.length) // 每个分段的宽度
            let wzhu = barWidth * 2 //分段的柱状图之和
            let zhuMargin = 20 //两根柱子中间的缝隙
            let wpad = parseInt((wfenduan - wzhu - zhuMargin) / 2) //分段内部两边的距离

            let banBarW = barWidth / 2 //半个柱状图
            let fengMarginW = barWidth * bilv
            let data = []
            let jIndex = 0,
                mIndex = 0
            for (let index = 0; index < xAxisData.length; index++) {
                const item = xAxisData[index]

                // 柱状图左右两侧的宽度
                jIndex = jIndex + 1 //1 3 5 7
                let wpadN1 = wpad * jIndex
                jIndex = jIndex + 1

                // 柱状图的宽度
                mIndex = index * 2
                let barw1 = barWidth * mIndex //0,2,4,6
                let barw2 = barWidth * (mIndex + 1) // 1,3,5,7
                let name = 0
                if (seriesData2[index] <= seriesData1[index]) {
                    name = (seriesData2[index] / seriesData1[index]).toFixed(3)
                } else {
                    name = (seriesData1[index] / seriesData2[index]).toFixed(3)
                }

                // 两个相邻柱状图中间的距离
                let fengW1 = fengMarginW * index //0,1,2,3
                let fengW2 = fengMarginW * (index + 1) // 1,2,3,4
                data.push([
                    {
                        name: (100 - name * 100).toFixed(1) + '%',
                        x: wStartSize + wpadN1 + banBarW + barw1 + fengW1,
                        y: endY - (seriesData1[index] / seriesMaxVal) * hYaxis - 10,
                    },
                    {
                        x: wStartSize + wpadN1 + banBarW + barw2 + fengW2,
                        y: endY - (seriesData2[index] / seriesMaxVal) * hYaxis - 10,
                    },
                ])
            }
            return {
                barWidth,
                bilv,
                data,
            }
        },
        setOptions() {
            let seriesData1 = [100, 200, 400, 1000]
            let seriesData2 = [550, 150, 200, 500]
            const data = _this.getOptions3Val({
                xAxisData: ['全市', '中心城区（主城区除外）', '郊区新城', '主城区'],
                seriesData1,
                seriesData2,
            })
            this.option = {
                title: {
                    text: 'World Population',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(200, 232, 255, 1)',
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#2e405b'],
                            width: 1,
                            type: 'solid',
                        },
                    },
                    axisLabel: {
                        color: '#C8E8FF',
                    },
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: '#C8E8FF',
                    },
                    data: xAxisData,
                },
                series: [{
                 	name: '前',
                    type: 'bar',
                    color: '#56C582',
                    barWidth: data.barWidth,
                    barGap: data.bilv * 100 + '%',
                    data: seriesData1,
                    markLine: {
                        label: {
                            color: 'rgba(200, 232, 255, 1)',
                            fontWeight: 'bolder',
                        },
                        lineStyle: {
                            type: 'solid',
                            width: 1,
                            color: '#B9A663',
                        },
                        data: data.data,
                    },
                },
                {
                    name: '后',
                    type: 'bar',
                    color: '#B9A663',
                    barWidth: data.barWidth,
                    barGap: data.bilv * 100 + '%',
                    data: seriesData2,
                },
            ]
            }
            this.echartsBar.setOption(this.option, true)
            let _this = this
            this.$nextTick(() => {
                _this.echartsBar.resize()
            })
            this.echartsBar.hideLoading()
        },
    },
}
</script>
<style lang="scss" scoped>
.toolset-wraper {
    width: 84%;
    height: 76%;
    margin: 5% auto 0;
    background: rgba(7, 26, 55, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}
#echarts-bar,
#echarts-bar1,
#echarts-bar2 {
    width: 100%;
    height: 33%;
}
</style>