基于echarts实现排名样式

最新推荐文章于 2024-04-19 23:48:14 发布

JCAL123

最新推荐文章于 2024-04-19 23:48:14 发布

阅读量943

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/JCAL123/article/details/128238791

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基于echarts实现排名样式 — vue技术交流群（864583465)

1、代码示例

option = {
  xAxis: {
    show: false,
  },
  grid: {
    left: 100
  },
  yAxis: {
    type: 'category',
    data: ['第一排名', '第二排名', '第三排名', '第四排名', '第五排名', '第六排名', '第七排名'],
    axisLine: {
      show: false
    },
    offset: 90,
    inverse: true,
    axisTick: {
      show: false
    },
    width: 50,
    axisLabel: {
        show: true,
        formatter: (value, index) => {
          let rankNo = 'noraml'
          switch (index) {
            case 0: rankNo ='no1';break;
            case 1: rankNo ='no2';break;
            case 2: rankNo ='no3';break;
          }
          return `{${rankNo}|${index+1}} {labelName|${value}}`
        },
        align: 'left',
        rich: {
            no1: {
              backgroundColor: '#ff0000',
              color: '#fff',
              padding: [2, 5, 2, 5],
            },
             no2: {
              backgroundColor: '#ff8510',
              color: 'yellow',
              padding: [2, 5, 2, 5],
            },
             no3: {
              backgroundColor: 'green',
              color: '#fff',
              padding: [2, 5, 2, 5],
            },
            labelName: {
                fontWeight: 'bold',
                textAlign: 'left',
                width: '90px',
                overflow: 'break'
            },
            noraml: {
              backgroundColor: '#ccc',
              color: '#fff',
              width: '40px',
              padding: [2, 5, 2, 5]
            }
        }
    }
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      label: {
        show: true,
        position: 'right'
      },
      color: '#009982',
      barWidth: '30px'
    }
  ]
};