多数值柱状echarts 柱状配置项内容和展示

      option = {
    backgroundColor: "#000",
    dataset: {
        source: [
            ["product", "规划", "实际", "底数"],
            ["订货", 74, 80, 100],
            ["售罄", 65, 62, 100],
            ["到货", 83, 73, 100],
            ["库存", 62, 86, 100]
        ]
    },
    xAxis: {
        type: "value",
        max: 100,
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    yAxis: [{
        type: "category",
        inverse:true,
        axisLabel: {
            show:true,
            margin:10,
            formatter:function(value){
                return '{dot| }'
            },
            rich:{
                dot:{
                    width:6,
                    height:6,
                    borderRadius:5,
                    backgroundColor:'#3fd4ff',
                }
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        }
    }, {
        type: "category",
        inverse:true,
        axisLabel: {
            show: false,
            color: "#fff",
            align: "left",
            margin: -5,
            padding: [0, -75, 30, 0]
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        }
    }],
    series: [{
        type: 'bar',
        yAxisIndex: 1,
        barWidth: "20%",
        itemStyle: {
            color: "rgba(63,212,255,0.1)",
            barBorderRadius: 20,
        },
        label: {
            show: true,
            color:"#3fd4ff",
            position: "right",
            fontWeight: "bold",
            fontSize: 14,
            padding: [0, 0, 30, -60],
            formatter: "{@实际}%"
        },
        encode: {
            x: "底数"
        }
    },{
        type: 'bar',
        yAxisIndex: 1,
        barWidth: "20%",
        barGap: "-100%",
        itemStyle: {
            color: "rgba(63,212,255,0.1)",
            barBorderRadius: 20,
        },
        label: {
            show: true,
            color:"#fff",
            position: "right",
            fontWeight: "bold",
            fontSize: 14,
            padding: [0, 0, 30, -160],
            formatter: "{@规划}%"
        },
        encode: {
            x: "底数"
        }
    }, {
        type: 'bar',
        barWidth: "20%",
        itemStyle: {
            color: "#3fd4ff",
            barBorderRadius: 20
        },
        label: {
            show: true,
            position:"left",
            color: "#fff",
            align: "left",
            distance:-5,
            fontSize:12,
            formatter:function(param){
                return param.value[0]
            },
            padding: [0, -75, 30, 0],
        },
        encode: {
            x: "规划"
        }
    }]
};