好多图echarts 柱状配置项内容和展示

      /* eslint-disable */
const res = {
    responseCode: 10001,
    responseMsg: 'ok',
    data: {
        //代表有哪些项会显示，不传不显示，传了再去下面匹配数值
        xAxis: ["currentSalary", "PAStandardSalary", "PAComparablePay", "comparablePay", "smartSalary", "expectationSalary", "reference"],
        //智能推荐
        smartSalary: {
            welfare: 0.8, //福利
            bonus: 6, //奖金
            fixedSalary: 30, //固薪
        },
        //候选人当前薪酬
        currentSalary: {
            welfare: 1.2, //福利
            bonus: 5, //奖金
            fixedSalary: 12, //固薪
        },
        //候选人期望薪酬
        expectationSalary: {
            salary: 30
        },
        //参考线
        reference: {
            recommended: 20,
            design: 15
        },
        //pa可比薪酬
        PAComparablePay: [{
            salary: 11,
        }, {
            salary: 17,
        }, {
            salary: 13,
        }, {
            salary: 27,
        }, {
            salary: 12,
        }, {
            salary: 15,
        }, {
            salary: 19,
        }, {
            salary: 21,
        }, ],
        //pa标准薪酬
        PAStandardSalary: {
            upperLimit: 29,
            aQuarterUpper: 27,
            medianValue: 25,
            aQuarterLower: 23,
            lowerLimit: 5,
        },
        //市场可比薪酬
        comparablePay: {
            upperLimit: 29,
            aQuarterUpper: 27,
            medianValue: 25,
            aQuarterLower: 23,
            lowerLimit: 5,
        }
    }
}
//坐标字典
const MAPS = {
    'currentSalary': '候选人当前薪酬',
    'PAStandardSalary': 'pa标准薪酬',
    'PAComparablePay': 'pa可比薪酬',
    'comparablePay': '市场可比薪酬',
    'smartSalary': '智能荐薪',
    'expectationSalary': null,
    'reference': null
}
const MAP_KEY = Object.keys(MAPS)
let space = []; //补空位
let xAxis = [];
let series = [];

function create_options(item, name = null, x = null) {
    if (name) {
        xAxis = [...xAxis, name]
    }
    switch (item) {
        case 'smartSalary':
        case 'currentSalary':
            series.push({
                name: '固薪',
                type: 'bar',
                stack: 'col',
                data: [...space, res.data[item].fixedSalary],
                itemStyle: {
                    color: '#A3ADD6'
                }
            }, {
                name: '奖金',
                type: 'bar',
                stack: 'col',
                data: [...space, res.data[item].bonus],
                itemStyle: {
                    color: '#F0C2AF'
                }
            }, {
                name: '福利',
                type: 'bar',
                stack: 'col',
                data: [...space, res.data[item].welfare],
                label: {
                    show: true,
                    position: 'top',
                    color: '#7D8292',
                    formatter(params) {
                        let total = 0;
                        Object.entries(res.data[item]).map(([key, value]) => {
                            total = total + +value
                        })
                        return `${total}万`
                    }
                },
                itemStyle: {
                    color: '#F3DD94'
                },
            })
            break
        case 'PAComparablePay':
            let float = [];
            const len = x.length;
            const index = x.indexOf('PAComparablePay');
            const min = (300 / len) * index + (300 / len) / 4
            const between = (300 / len) / 2
            res.data.PAComparablePay.map(item => {
                const x = min + Math.floor(Math.random() * between)
                float.push([x, item.salary])
            })
            series.push({
                symbolSize: 4,
                data: float,
                xAxisIndex: 1,
                type: 'scatter',
                itemStyle: {
                    color: '#6A6B78'
                }
            })
            break;
        case 'reference':
            series.push({
                type: 'line',
                xAxisIndex: 2,
                name: '推荐年薪',
                data: [
                    [0, res.data[item].recommended],
                    [1, res.data[item].recommended]
                ],
                label: {
                    show: true,
                    formatter(params) {
                        if (params.data[0] > 0) {
                            return params.data[1] + '万'
                        } else {
                            return ''
                        }
                    },
                    color: '#7D8292',
                    offset: [20, 13]
                },
                symbol: 'circle',
                symbolSize: 5,
                zlevel: 99,
                lineStyle: {
                    type: 'dashed',
                    width: 1,
                    color: '#FD6720',
                }
            }, {
                type: 'line',
                name: '设计年薪',
                xAxisIndex: 2,
                data: [
                    [0, res.data[item].design],
                    [1, res.data[item].design]
                ],
                label: {
                    show: true,
                    formatter(params) {
                        if (params.data[0] > 0) {
                            return params.data[1] + '万'
                        } else {
                            return ''
                        }
                    },
                    color: '#7D8292',
                    offset: [20, 13]
                },
                zlevel: 99,
                symbol: 'circle',
                symbolSize: 5,
                lineStyle: {
                    type: 'dashed',
                    width: 1,
                    color: 'blue',
                }
            })
            break;
        case 'comparablePay':
        case 'PAStandardSalary':
            let itemStyle = {
                emphasis: {
                    color: "#E6F1FF",
                    borderColor: '#fff'
                }
            }
            series.push({
                name: '下限',
                type: 'bar',
                stack: 'col',
                data: [...space, {
                    value: res.data[item].lowerLimit,
                    label: {
                        formatter: function(data) {
                            return `{b|}\n\n{a| ${res.data[item].lowerLimit}万}`
                        },
                        show: true,
                        width: 30,
                        position: [0, 0, 0, 0],
                        rich: {
                            b: {
                                width: 30,
                                height: 2,
                                color: "#fff",
                                backgroundColor: "#55aee6",
                                verticalAlign: 'top'
                            },
                            a: {
                                color: "#8e909a",
                                width: 100,
                            },
                        }
                    },
                    // itemStyle: itemStyle,
                }],
                barWidth: '30',
                barGap: '10%',
                itemStyle: {
                    color: '#fff',
                    borderColor: '#fff'
                }
            }, {
                name: '下四分之一',
                type: 'bar',
                stack: 'col',
                data: [...space, {
                    value: res.data[item].aQuarterLower - res.data[item].lowerLimit,
                    label: {
                        formatter: function(data) {
                            return `{b|}{a|}`
                        },
                        show: true,
                        position: [0, 0, 0, 0],
                        rich: {
                            b: {
                                width: 30,
                                height: 2,
                                color: "#fff",
                                backgroundColor: "#55aee6",
                                verticalAlign: 'top'
                            },
                            a: {
                                color: "#8e909a",
                                width: 100,

                            },
                        }
                    },
                    itemStyle: itemStyle,
                }],
                itemStyle: {
                    color: '#E6F1FF',
                }
            }, {
                name: '中位值',
                type: 'bar',
                stack: 'col',
                data: [...space, {
                    value: res.data[item].medianValue - res.data[item].aQuarterLower,
                    label: {
                        formatter: function(data) {
                            return `{b|}{a|}`
                        },
                        show: true,
                        position: [0, 0, 0, 0],
                        rich: {
                            b: {
                                width: 30,
                                height: 2,
                                color: "#fff",
                                backgroundColor: "#55aee6",
                                verticalAlign: 'top'
                            },
                            a: {
                                color: "#8e909a",
                                width: 100,
                            },
                        }
                    },
                    itemStyle: itemStyle,
                }],
                itemStyle: {
                    color: '#E6F1FF',
                }
            }, {
                name: '上四分之一',
                type: 'bar',
                stack: 'col',
                data: [...space, {
                    value: res.data[item].aQuarterUpper - res.data[item].medianValue,
                    label: {
                        formatter: function(data) {
                            return `{b|}{a|}`
                        },
                        show: true,
                        position: [0, 0, 0, 0],
                        rich: {
                            b: {
                                width: 30,
                                height: 2,
                                color: "#fff",
                                backgroundColor: "#55aee6",
                                verticalAlign: 'top'
                            },
                            a: {
                                color: "#8e909a",
                                width: 100,
                            },
                        }
                    },
                    itemStyle: itemStyle,
                }],
                itemStyle: {
                    color: '#E6F1FF',
                }
            }, {
                name: '上限',
                type: 'bar',
                stack: 'col',
                data: [...space, {
                    value: res.data[item].upperLimit - res.data[item].aQuarterUpper,
                    label: {
                        formatter: function(data) {
                            return `{a| ${res.data[item].upperLimit}万}\n\n{b|}`
                        },
                        show: true,
                        position: [0, -24, 0, 0],
                        rich: {
                            b: {
                                width: 30,
                                height: 2,
                                color: "#fff",
                                backgroundColor: "#55aee6",
                                verticalAlign: 'top'
                            },
                            a: {
                                color: "#8e909a",
                                width: 100,
                            },
                        }
                    },
                    itemStyle: itemStyle,
                }],
                itemStyle: {
                    color: '#E6F1FF',
                }
            })
            break;
        case 'expectationSalary':
            series.push({
                type: 'effectScatter',
                symbolSize: 8,
                itemStyle: {
                    color: '#FD6720 ',
                    opacity: '0.9'
                },
                rippleEffect: {
                    color: "#FD6720",
                    period: 9999,
                },
                label: {
                    show: true,
                    formatter(params) {
                        return params.data[1] + '万'
                    },
                    color: '#7D8292',
                    offset: [0, -20]
                },
                data: [
                    ['候选人当前薪酬', res.data[item].salary],
                ]
            })
            break;
        default:
            break;
    }
}

function calcFloat(data) {
    let total = ["currentSalary", "PAStandardSalary", "PAComparablePay", "comparablePay", "smartSalary"]
    return total.filter(item => data.includes(item))
}
MAP_KEY.map(item => {
    if (!!res.data[item]) {
        let name = MAPS[item]
        let x = null
        if (name === 'pa可比薪酬') {
            x = calcFloat(res.data.xAxis)
        }
        create_options(item, name, x)
        space.push('')
    } else {
        space.pop()
    }
})

option = {
    tooltip: {
        show: false,
        trigger: 'item',
        axisPointer: {
            type: 'shadow'
        }
    },
    backgroundColor: '#fff',
    grid: {
        top: '10%',
        left: '10%',
        right: '5%',
        bottom: '10%',
    },
    xAxis: [{
        type: 'category',
        data: xAxis,
        triggerEvent: true,
        boundaryGap: true,
        nameGap: 30,
        axisLine: {
            lineStyle: {
                color: '#DFE1E6',
                opacity: '0.6'
            }
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            color: '#7D8292',
            fontSize: 11,
            formatter: function(value) {
                if (value == '智能荐薪') {
                    return value + ' {icon|}';
                } else {
                    return value
                }
            },
            rich: {
                'icon': {
                    backgroundColor: {
                        image: ''
                    }
                }
            }
        },
        splitLine: {
            lineStyle: {
                color: '#DFE1E6'
            }
        },
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        },
    }, {
        type: 'value',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                opacity: 0
            }
        },
        axisLabel: {
            color: '#fff'
        },
        axisTick: {
            lineStyle: {
                opacity: 0
            }
        },
        splitLine: {
            show: false
        },
        min: 0,
        max: 300,
        nameGap: 30,
    }, {
        type: 'value',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                opacity: 0
            }
        },
        axisLabel: {
            color: '#fff'
        },
        axisTick: {
            lineStyle: {
                opacity: 0
            }
        },
        splitLine: {
            show: false
        },
        min: 0,
        max: 1,
        nameGap: 30,
    }],
    yAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#7D8292',
            fontSize: 12,
            formatter: "{value}万"
        },
        splitLine: {
            lineStyle: {
                color: '#DFE1E6',
                opacity: '0.2'
            }
        }
    },
    series: series
};