echarts 柱形图重叠柱形图legend，双y轴

echarts 图表组件：

<template>
    <div :style="{ height: '100%' }">
        <div class="foldLine" ref="foldLine" :style="{ width: widths, height: heights }"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props: {
        id: {
            type: String,
            default: 'lineEchartNew'
        },
        heights: {
            type: String,
            default: '100%'
        },
        widths: {
            type: String,
            default: '100%'
        },
        tagName: {
            type: String,
            default: '排名'
        },
        indexName: {
            type: String,
            default: ''
        },
        unit: {
            type: String,
            default: ''
        },
        chartObj: {
            type: Array,
            default: () => {
                return [];
            }
        },
        objs: {
            type: Object,
            default: () => {
                return {
                    height: '100%'
                };
            }
        }
    },
    data() {
        return {
            chart: null
        };
    },
    watch: {
        chartObj: {
            handler() {
                this.initEchats();
            },
            deep: true
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
    },
    beforeDestroy() {
        this.chart && this.chart.dispose();
        this.chart = null;
    },
    methods: {
        init() {
            this.chart = echarts.init(this.$refs.foldLine);
            this.initEchats();
        },
        // 整体折线图显示不通颜色
        getLineColor(healthListScore) {
            let arr = [];
            healthListScore.forEach((v, i) => {
                let obj = {
                    gt: i - 1,
                    lt: i,
                    // color: healthListScore[i] < 90 ? 'rgba(229,27,88,0.68)' : '#D0FB7C'
                    color: '#D0FB7C'
                };
                arr.push(obj);
            });
            return arr;
        },
        initEchats() {
            let option = {
                tooltip: {
                    trigger: 'axis'
                    // formatter: '{a1}<br/>{b1}：{c1}%'
                },
                grid: {
                    top: '25%',
                    left: '3%',
                    right: '8%',
                    bottom: '15%',
                    containLabel: true
                },
                legend: {
                    top: '0',
                    x: 'center',
                    textStyle: {
                        fontSize: 12,
                        color: 'rgba(101, 213, 255, 1)'
                    },
                    itemWidth: 10, // 设置宽度
                    itemHeight: 10, // 设置高度、
                    itemGap: 12, // 设置间距
                    data: ['资源容量', '实际使用量', '资源使用率']
                },
                xAxis: {
                    axisLine: {
                        lineStyle: {
                            color: '#D0DEEE' // 设置 x 轴颜色
                        }
                    },
                    data: ['2024/09', '2024/10', '2024/11', '2024/12', '2025/01', '2025/02']
                },
                color: ['#4489F0', '#0BF0FF', '#FB944F'],
                yAxis: [
                    {
                        type: 'value',
                        name: '单位',
                        //坐标轴最大值、最小值、强制设置数据的步长间隔
                        // max: 33,
                        // min: 15,
                        // 刻度线的间距
                        // interval: 3.6,
                        axisLabel: {
                            textStyle: {
                                color: '#a8aab0',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12
                            }
                            //y轴上带的单位
                            // formatter: '{value} ℃'
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'dashed' // 设置虚线类型
                            }
                        },
                        //坐标轴刻度相关设置。
                        axisTick: {
                            show: false
                        },
                        //分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#a8aab0',
                                type: 'dashed',
                                //透明度
                                opacity: 0.3,
                                width: 1
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '使用率(%)',
                        max: 100,
                        min: 0,
                        interval: 16.4,
                        // axisLabel: {
                        //     textStyle: {
                        //         color: '#a8aab0',
                        //         fontStyle: 'normal',
                        //         fontFamily: '微软雅黑',
                        //         fontSize: 12
                        //     },
                        //     // formatter: '{value} %'
                        //     formatter: '{value} %'
                        // },
                        //轴线
                        axisLine: {
                            lineStyle: {
                                type: 'dashed' // 设置虚线类型
                            }
                        },
                        //坐标轴刻度相关设置。
                        axisTick: {
                            show: false
                        },
                        //分割线
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#a8aab0',
                                type: 'dashed',
                                //透明度
                                opacity: 0.3,
                                width: 1
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '资源容量',
                        type: 'bar',
                        barWidth: 12,
                        z: '-1',
                        barGap: '-100%',
                        itemStyle: {
                            borderRadius: [10, 10, 0, 0] // 这里设置圆角的大小，数组的前两个值设置上左的圆角，后两个值设置下右的圆角
                        },
                        data: [1000, 800, 700, 1000, 600, 1000]
                    },
                    {
                        name: '实际使用量',
                        type: 'bar',
                        barWidth: 12,
                        data: [555, 750, 656, 850, 540, 750]
                    },
                    {
                        name: '资源使用率',
                        type: 'line',
                        // barWidth: 24,
                        barGap: '1%',
                        symbol: 'circle',
                        symbolSize: 5,
                        yAxisIndex: 1, //指定需要使用的Y轴
                        data: [100, 70, 50, 90, 100, 80, 90],
                        itemStyle: {
                            color: '#FB944F',
                            borderColor: '#D0FB7C',
                            borderWidth: 1,
                            borderType: 'solid'
                        }
                    }
                ]
            };

            if (option && typeof option === 'object') {
                this.chart.clear(); //画布清空
                this.chart.resize(); //自适应div的大小
                this.chart.setOption(option, true);
                // this.chart.setOption(
                //     {
                //         series: seriesArr
                //     },
                //     { notMerge: false, lazyUpdate: false, silent: false }
                // );
            }
        }
    }
};
</script>
<style lang="scss" scoped></style>