echarts条形图Y轴文字前面加小图标

原创已于 2024-04-09 07:59:14 修改 · 642 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2024-04-08 18:04:02 首次发布

echarts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在图表的Y轴上使用JavaScript动态插入不同图片作为标记，通过引入PNG文件并根据供应商描述索引显示相应图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般做排名，效果图如下：

首先准备三个图片的png文件，引入文件

import top1 from '@/assets/imgs/top1.png'
import top2 from '@/assets/imgs/top2.png'
import top3 from '@/assets/imgs/top3.png'

然后Y轴配置的地方使用引入

yAxis: [
          {
            type: 'category',
            inverse: true,
            triggerEvent: true,
            boundaryGap: 0,
            axisLabel: {
              show: true,
              align: 'left',
              textStyle: {
                color: '#CCD4EF',
                fontSize: 14,
                fontFamily: 'Microsoft YaHei'
              },
              formatter: function (value:any) {
                // 找到当前对应的序号
                let curClickIndex = chartDataT.value.findIndex(item => {
                  return value === item.supplier_desc
                })
                let formatValue = (value.length > 10 ? (value.slice(0,10)+ '...') : value )
                if (curClickIndex === 0) { // 给到对应样式
                  return '{top1|}' + '{pad4|}' + formatValue
                } else if (curClickIndex === 1) {
                  return '{top2|}' + '{pad4|}' + formatValue
                } else if (curClickIndex === 2) {
                  return '{top3|}' + '{pad4|}' + formatValue
                } else {
                  return '{pad20|}' + formatValue
                }
              },
              rich: {
                top1: {
                  height: 22,
                  width: 28,
                  align: 'left',
                  backgroundColor: {
                    image: top1  // 引入的小图标的文件名
                  }
                },
                top2: {
                  height: 22,
                  width: 28,
                  align: 'left',
                  backgroundColor: {
                    image: top2 // 引入的小图标的文件名
                  }
                },
                top3: {
                  height: 22,
                  width: 28,
                  align: 'left',
                  backgroundColor: {
                    image: top3  // 引入的小图标的文件名
                  }
                },
                pad4: {
                  padding: [0, 0, 0 ,6]
                },
                pad20: {
                  padding: [0, 0, 0 ,34]
                }
              }
            },
            offset: 190,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: []
          }
        ],

就这样配置完成啦！