echarts 横向柱状图动态排名

比赛中的动态排名

var option = {
        xAxis: {
            max: 110,
            show:false,
        },
         grid: {
            top: '3%',
            bottom: '1%',
            left: '14%',
            // right: '1px',
            containLabel: false,
        },
        yAxis:[
            {
            type: 'category',
            data: y,
            splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
            axisLabel: {
                textStyle: {
                    color:  '#fff',
                    fontSize: '16',
                    fontFamily: 'Alibaba',
                }
            },
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: y.length -1,
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true, // 显示右侧的文字
            axisLabel: {
                formatter: function(params) {
                    let list = x.filter(v=>v.name == params)
                    if(list[0].suffix) {
                    return "答题结束"
                    }
                    return ''
                },
                textStyle: {
                    color: '#65D485',
                    fontSize: '13.5',
                },
            },
            data: y,
         },
        ], 
        series: [{
            realtimeSort: true,
            name: 'X',
            type: 'bar',
            data: x,
            barWidth: 14,
            label: {
                show: true,
                position: 'right',
                // position: 'insideRight',
                valueAnimation: true,
                textStyle: {
                    color: '#fff',
                    fontSize: '18',
                },
            },
            itemStyle: {
                    //通常情况下：
                    normal: {
                        barBorderRadius: 8,
                        color: function (params) {
                            var index = params.dataIndex;
                            let echarts = require('echarts')
                            if (params.dataIndex >= colrs.length) {
                                index = params.dataIndex - colrs.length;
                            }
                            return new echarts.graphic.LinearGradient(0, 1, 0, 0,
                                [{
                                        offset: 0,
                                        color: colrs[index][0]
                                    },
                                    {
                                        offset: 1,
                                        color: colrs[index][1]
                                    }
                                ]);
                        }
                    },
            },
        }],
        legend: {
            show: false
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
        };
        this.myChart.setOption(option);
      }
    },