排名echarts 柱状配置项内容和展示

      var totalCost = [100, 100, 100, 100, 100]; //背景色比例
var visits = [82.32, 73.56, 22.9, 48.34, 25]; //数值
var grade = ['阿斯顿', '帕萨迪', 'omyga', '呵呵大', '嘻嘻'];
var data = {
    grade: grade,
    totalCost: totalCost,
    visits: visits,
};
option = {
    //backgroundColor: '#ffffff',
    grid: {
        top: 30,
        left: 50,
        right: 50,
        bottom: 150,
        containLabel: true

    },
    tooltip: {
        show: false
    },
    xAxis: {
        show: false
    },
    yAxis: [{
        type: 'category',

        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            margin: 90,
            textStyle: {
                align: 'left',
                fontSize: 16,
                fontWeight: 'bold',
                color: '#171B1F'
            },
            rich: {
                a: {

                },
                b: {

                    width: 20,
                    height: 20,
                    align: 'center',
                    fontSize: 20,
                    fontWeight: 'bold',
                    color: function() {
                        return 'blue'
                    }

                },
                c: {
                    padding: [80, 20, 20, 60],
                    fontWeight: 'bold',


                }
            },
            formatter: function(params, i) {
                console.log(params, i)
                if (true) {
                    return [
                        '{a|No.}' + '' + '{b|' + (i + 1) + '}' + '{c|' + params + '}'
                    ].join('\n')
                }
            }
        },
        data: data.grade
    }, {
        type: 'category',

        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                fontSize: 16,
                color: '#54AFEE',
                lineHeight: '50',
                padding: [-30, 20, 35, -50]
            },
            rich: {
                a: {

                },
                b: {

                    width: 20,
                    height: 20,
                    align: 'right',
                    fontSize: 14,
                    fontWeight: 'bold'

                }
            },
            formatter: function(params, i) {
                console.log(params, i)
                if (true) {
                    return [
                        '{b|' + params + '/次}'
                    ].join('\n')
                }
            }
        },
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        },
        data: data.visits
    }, ],
    series: [{

            type: 'bar',

            itemStyle: {
                normal: {
                    show: true,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#25EBE9'

                    }, {
                        offset: 1,
                        color: '#6390F0'

                    }]),
                    barBorderRadius: 5,
                    borderWidth: 0,
                    borderColor: '#333',
                }
            },
            label: {
                normal: {
                    show: false, //珠子顶部
                    position: 'top',

                    formatter: '{b}%'
                }
            },
            barWidth: '30%',
            z: 10,
            data: data.visits
        }, {

            type: 'bar',
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    show: false,
                    color: '#fff',
                    barBorderRadius: 5,
                    borderWidth: 1,
                    borderColor: '#eee',
                }
            },
            emphasis: {

            },
            z: 1,
            barWidth: '30%',
            data: data.totalCost
        }

    ]
};