进度条图echarts 柱状配置项内容和展示

      var totalCost = [100, 100, 100, 100, 100]; //背景色比例
var visits = [9.3, 11.2, 14.1, 30, 35]; //数值
var barcolor = ["#3879d9", "#3879d9", "#bad040", "#59d1ca", "#e65151"]
var grade = ['江铃牌', '长安牌', '五十铃牌','五菱牌','丰田'];
var data = {
    grade: grade,
    totalCost: totalCost,
    visits: visits,
};
option = {
    grid: {
        top: "5%",
        left: "30%",
        right: "20%",
        bottom: "5%",
    },
    tooltip: {
        show: true
    },
    xAxis: {
        show: false
    },
    yAxis: [{
        type: 'category',

        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                align: 'right',
                fontSize: 40,
                color: 'black'
            },
        },
        data: data.grade
    }, {
        type: 'category',

        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                fontSize: 40,
                color: 'black',
            },
            formatter: function(data, index) {
                // console.log(data)
                return data +'%'
            },
        },
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        },
        data: data.visits
    }, ],
    series: [{

            type: 'bar',
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    show: true,
                    color: '#111233',
                    barBorderRadius: 5,
                    borderWidth: 0,
                    borderColor: '#333',
                }
            },
            barWidth: '35%',
            silent: true,
            data: data.totalCost
        },
        {

            type: 'bar',

            itemStyle: {
                normal: {
                    show: true,
                    // color:barcolor,
                    color: function(params) {
                        var num = barcolor.length;
                        return barcolor[params.dataIndex % num]
                    },
                    barBorderRadius: 5,
                    borderWidth: 0,
                    borderColor: '#333',
                }
            },
            label: {
                normal: {
                    show: false,
                }
            },
            barWidth: '35%',

            data: data.visits
        }

    ]
};