echarts 柱狀圖添加排序圖標/序號

echarts 柱狀圖添加排序圖標/序號

• 一、實現效果
• 二、核心代碼（圖片序號）
• 三、核心代碼（文字序號）
• 四、源碼（這里用了vue）

一、實現效果

使用echarts的柱狀圖實現下面效果，須在名稱前面添加序號：

二、核心代碼（圖片序號）

核心代碼在於配置屬性中的 axisLabel，需要formatter 和 rich 屬性配合，注意看代碼注釋
formatter中格式化為 {a1| 張三 }
然后rich中通過匹配 a1來配置序號樣色，這里使用了圖片，所以 backgroundColor 里設置image路徑即可

this.chartOption = {
        yAxis: {
          ......
          axisLabel: {
            color: '#D8D9D9',
            margin: 90, // 距離右側圖形距離，配合axisLabel.left 和 grid.left 使用

            // 必須使用formatter，配合rich使用
            formatter: (params, index) => {
              return [`{a${index + 1}|} ${params}`].join('\n')
            },
            align: 'left', // 文字左排序
            rich: {
              a1: {
                backgroundColor: { image: '圖片路徑' }, // 序號元素
                width: 18, // 序號元素寬
                height: 18, // 序號元素高
              },
              ......
            },
          },
        },

三、核心代碼（文字序號）

如果序號不用圖片，而是常規的文字序號，也是可以的，效果如下：

其中 formatter中格式化為 {a1|1 張三 }，| 線后的1就是文字序號了，然后通過rich的各種屬性配置風格

核心代碼如下

this.chartOption = {
        yAxis: {
          ......
          axisLabel: {
            color: '#D8D9D9',
            margin: 90, // 距離右側圖形距離，配合axisLabel.left 和 grid.left 使用

            // 必須使用formatter，配合rich使用
            formatter: (params, index) => {
              return [`{a${index + 1}|${index + 1}} ${params}`].join('\n')
            },
            align: 'left', // 文字左排序
            rich: {
              a1: {
                color: '#fff',
                backgroundColor: 'red',
                width: 18,
                height: 18,
                align: 'center',
                borderRadius: 4,
              },
              ......
            },
          },
        },

四、源碼（這里用了vue）

export default {
  components: {},
  data() {
    return {}
  },
  computed: {},
  created() {
    this.chartId = 'chart-PersonalRanking' // 圖表對象Id
    this.chart = null // echart 對象
    this.chartOption = {} // echart 配置項
    this.inv = null // 計時器，每隔x秒拉一次數據

    // 排序圖標
    this.rankIcons = [
      require('@/assets/images/data-panel/rank1.png'),
      require('@/assets/images/data-panel/rank2.png'),
      require('@/assets/images/data-panel/rank3.png'),
      require('@/assets/images/data-panel/rank4.png'),
      require('@/assets/images/data-panel/rank5.png'),
    ]

    // 排序圖標大小
    this.rankIconsSize = 18
  },
  mounted() {
    this.init()
    this.update()
    this.inv = setInterval(this.update, 10000)
  },
  beforeDestroy() {
    clearInterval(this.inv)
    window.removeEventListener('resize', this.chartsResize)
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    // 更新
    update() {
      console.log('個人任務排名-每隔10秒更新數據')
      const xData = [120, 200, 150, 80, 70]
      const yData = ['張三', '李四', '王小五', '趙六', '張三豐']

      // 更新在線圖表
      this.chartOption.yAxis.data = yData
      this.chartOption.series[0].data = xData
      this.chart.setOption(this.chartOption)
    },

    // 初始化
    init() {
      this.chartOption = {
        yAxis: {
          type: 'category',
          inverse: true, // 反向坐標
          data: [],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#D8D9D9',
            margin: 90, // 距離右側圖形距離，配合axisLabel.left 和 grid.left 使用

            // formatter必須，配合rich使用
            formatter: (params, index) => {
              return [`{a${index + 1}|} ${params}`].join('\n')
            },
            align: 'left', // 文字左排序
            rich: {
              a1: {
                backgroundColor: { image: this.rankIcons[0] },
                width: this.rankIconsSize,
                height: this.rankIconsSize,
              },
              a2: {
                backgroundColor: { image: this.rankIcons[1] },
                width: this.rankIconsSize,
                height: this.rankIconsSize,
              },
              a3: {
                backgroundColor: { image: this.rankIcons[2] },
                width: this.rankIconsSize,
                height: this.rankIconsSize,
              },
              a4: {
                backgroundColor: { image: this.rankIcons[3] },
                width: this.rankIconsSize,
                height: this.rankIconsSize,
              },
              a5: {
                backgroundColor: { image: this.rankIcons[4] },
                width: this.rankIconsSize,
                height: this.rankIconsSize,
              },
            },
          },
        },
        xAxis: {
          show: false,
          type: 'value',
        },
        color: ['#898FFC'],
        grid: {
          left: 110,
          top: 0,
          right: 20,
          bottom: 10,
        },
        tooltip: {
          show: true,
          backgroundColor: 'rgba(0,0,0,.7)',
          borderWidth: 0,
          textStyle: {
            color: '#fff',
          },
        },
        series: [
          {
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: '#292B30',
              borderRadius: 100,
            },
            barWidth: 6,

            itemStyle: {
              borderRadius: 100,
            },
          },
        ],
      }
      this.chart = this.$echarts.init(document.getElementById(this.chartId))
      window.addEventListener('resize', this.chartsResize)
    },

    // 圖表調整尺寸
    chartsResize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
  },
}

如果幫到你，點個贊再走