双y轴展示数据echarts category配置项内容和展示

      var option = {
    backgroundColor: '#000',
    tooltip: {
    show: true,
    formatter: function(chart) {
        var seriesName = chart.seriesName,
            name = chart.name,
            value = chart.value;
        if (seriesName.indexOf("值") > -1) {
            var html = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#276EAF;"></span>' + name + '：' + value + "家";
            return html;
        }
    }
    },
    grid: {
        left: '-60',
        top: '30',
        right: '-60',
        bottom: '-20',
        containLabel: true
    },
    xAxis: {
        show: false,
    },
    dataset: {
        dimensions: [
          'value', 'max', 'name'
        ],
        source: [
            {
            	value: '84',
            	max: '150',
            	name: '1 区域'
            },
            {
            	value: '150',
            	max: '150',
            	name: '2 区域'
            },
            {
            	value: '60',
            	max: '150',
            	name: '3 区域'
            },
            {
            	value: '80',
            	max: '150',
            	name: '4 区域'
            },
            {
            	value: '45',
            	max: '150',
            	name: '5 区域'
            },
        ]
    },
    yAxis: [{
        type: 'category',
        axisTick: 'none',
        axisLine: 'none',
        axisLabel: {
            verticalAlign: 'bottom',
            align: 'left',
            padding: [0, 8, 10, 5],
            textStyle: {
                color: '#80F5FF',
                fontSize: '16',
            }
        },
        interval: 1
    }, {
        type: 'category',
        axisTick: 'none',
        axisLine: 'none',
        axisLabel: {
            show: true,
            verticalAlign: 'bottom',
            align: 'right',
            padding: [0, 8, 10, 0],
            textStyle: {
                color: '#fff',
                fontSize: '16',
            },
            formatter: '{y|{value}} {x|m2}',
            rich: {
                y: {
                    color: '#80F5FF',
                    fontSize: 18
                },
                x: {
                    fontSize: 14,
                    color: 'rgba(128,245,255, 0.5)'
                }
            }
        },
        interval: 1
    }],
    series: [{
        name: '值',
        type: 'bar',
        encode: {
            x: 'value',
            y: 'name'
        },
        label: {
            normal: {
                show: false,
                position: 'right',
                verticalAlign: 'bottom',
                offset: [0, -10],
                color: 'rgba(128,245,255,1)',
                fontSize: 14,
                fontFamily: 'NotoSansHans-Regular',
                formatter: '{c}%'
            }
        },
        barWidth: 6,
        itemStyle: {
            normal: {
                color: 'rgba(128,245,255,1)',
                barBorderRadius: 5,
            }
        },
        z: 2
    }, {
        name: '外框',
        type: 'bar',
        barGap: '-100%',
        encode: {
            x: 'max',
            y: 'value'
        },
        barWidth: 6,
        yAxisIndex: 1,
        label: {
            normal: {
                show: false,
                position: 'right',
                verticalAlign: 'bottom',
                offset: [0, -10],
                color: 'rgba(128,245,255,1)',
                fontSize: 14,
                fontFamily: 'NotoSansHans-Regular',
                formatter: '{c}%'
            }
        },
        itemStyle: {
            normal: {
                color: 'rgba(17,101,255, 1)',
                opacity: .2,
                barBorderRadius: 5,
            }
        },
        z: 0
    },
    
]
};