样例 ​

const xData = ['国控', '省控', '市控', '县控']
const yData = [
    { value: 120, done: 120, unDone: 0 },
    { value: 110, done: 70, unDone: 40 },
    { value: 80, done: 50, unDone: 30 },
    { value: 75, done: 50, unDone: 25 },
]
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter(params: any) {
            console.log(params, 'params')
            const str = `<div><div>${params[0].axisValue}</div>
        <div style='display: flex;height:20px;align-items:center;'>
        <span>
        总共${params[0].data}${params[0].seriesName}：
        </span>
        </div>
        <div style='display: flex;height:20px;align-items:center;'>
        ${params[1].marker}
        <span>
        已处置：${params[1].data}${params[0].seriesName}
        </span>
        </div>
        <div style='display: flex;height:20px;align-items:center;'>
        ${params[0].marker}
        <span>
        未处置：${params[0].data
        - params[1].data}${params[0].seriesName}
        </span>
        </div>`
            return str
        }
    },
    color: ['#F84439', '#36F097'],
    grid: {
        top: '40',
        left: '35',
        bottom: '35',
        right: '15'
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ffffff',
                fontSize: 14,
                interval: 0,
                fontFamily: 'TRENDS'
            },
            axisLine: {
                lineStyle: {
                    color: '#038b8f'
                }
            },
            data: xData
        }
    ],
    yAxis: [
        {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['transparent', 'rgba(255, 255, 255, 0.05)'],
                },
            },
            axisLabel: {
                color: 'rgba(255,255,255,0.5)',
                fontFamily: 'TRENDS',
                fontSize: 12,
            }
        }
    ],
    series: [
        {
            name: '个',
            type: 'bar',
            barWidth: 25,
            data: yData.map(item => item.value),
            itemStyle: {
                color: '#F84439',
                normal: {
                }
            },
            label: {
                show: true,
                position: 'top',
                color: 'white',
                fontFamily: 'Furore',
                fontSize: 14,
                formatter: (val: any) => {
                    const index = val.dataIndex
                    const currData = yData[index]
                    return `${Math.round(currData.done / currData.value * 1000) / 10}%`
                }
            },
            z: '-1', // 改变这根柱子的层级使这根柱子在下面
        },
        {
            name: '个',
            type: 'bar',
            barWidth: 25,
            data: yData.map(item => item.done),
            itemStyle: {
                color: '#36F097'
            },
            barGap: '-100%', // 移动第二个柱子的位置实现重叠
        }
    ]
}

const xData = ['水', '煤', '电', '其他']
const yData = [6000, 2000, 1000, 1000]
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter(params: any) {
            const str
                        = `<div><div>${params[0].axisValue}</div><div style='display:
                        flex;height:20px;align-items:center;'>${params[0].marker}
                        <div>${params[0].data}${params[0].seriesName}</div></div>`
            return str
        }
    },
    title: {
        text: '各类能源排放总量',
        top: 8,
        padding: [0, 0, 0, 18],
        textStyle: {
            color: 'rgba(255,255,255,1)',
            fontWeight: 700,
            fontSize: 14
        }
    },
    color: ['#03d5fb'],
    grid: {
        top: '60',
        left: '50',
        bottom: '30',
        right: '20'
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ffffff',
                fontSize: 14,
                interval: 0
            },
            axisLine: {
                lineStyle: {
                    color: '#038b8f'
                }
            },
            data: xData
        }
    ],
    yAxis: [
        {
            name: '单位：（t）',
            nameTextStyle: {
                color: 'rgba(255,255,255,.6)',
                nameLocation: 'start',
                padding: [5, 0, 0, 0]
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(3,139,143,0.1)', 'rgba(255,255,255,0)']
                },
                interval: 1
            },
            axisLabel: {
                color: 'rgba(255,255,255,0.6)',
                fontFamily: 'Bebas Neue',
                fontSize: 12,
                formatter: (value: number) => {
                    return `${(value / 1000).toFixed(2)}k`
                }
            }
        }
    ],
    series: [
        {
            name: 't',
            type: 'bar',
            barWidth: 40,
            data: yData,
        }
    ]
}

const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    color: ['#00fc83'],
    grid: {
        top: '20',
        left: '50',
        bottom: '30',
        right: '20'
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ffffff',
                fontSize: 14,
                interval: 0
            },
            axisLine: {
                lineStyle: {
                    color: '#038b8f'
                }
            },
            data: [2018, 2019, 2020, 2021]
        }
    ],
    yAxis: [
        {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(3,139,143,0.1)', 'rgba(255,255,255,0)']
                },
                interval: 1
            },
            axisLabel: {
                color: 'rgba(255,255,255,0.6)',
                fontFamily: 'Bebas Neue',
                fontSize: 12
            }
        }
    ],
    series: [
        {
            name: '曝光',
            type: 'bar',
            barWidth: 40,
            data: [2325, 1207, 878, 1083],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top'
                    }
                }
            }
        }
    ]
}

const xData = ['乌鲁木齐市', '哈密市', '吐鲁番市', '昌吉州', '博州', '新市']
const goodList = [72, 86, 48, 63, 40, 50]
const badList = [30, 23, 18, 13, 10, 19]
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    color: ['#00fc83', '#ff4d4f'],
    grid: {
        top: '40',
        left: '35',
        bottom: '45',
        right: '15'
    },
    legend: {
        show: true,
        bottom: 0,
        left: 'center',
        icon: 'circle',
        // itemWidth: 14,
        // itemHeight: 14,
        textStyle: {
            fontSize: '12',
            color: '#fff'
        }
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize: '12px',
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(68, 136, 208, 0.25)'
                }
            },
            data: xData
        }
    ],
    yAxis: [
        {
            name: '%',
            nameTextStyle: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: '12px',
                padding: [0, 20, 0, 0]
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: { // 值分割线
                show: true,
                lineStyle: {
                    color: 'rgba(68, 136, 208, 0.25)'
                }
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: '12px',
            }
        }
    ],
    series: [
        {
            name: '优良比例',
            type: 'bar',
            barWidth: 15,
            data: goodList,
            itemStyle: {
                color: '#00fc83'
            },
        },
        {
            name: '劣V比例',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
                color: '#ff4d4f'
            },
            data: badList
        }
    ]
}