Echart柱状图-柱子顶部显示数值/显示图标

柱子顶部显示数值效果

柱子顶部显示数值＋图标

import EchartInit from '@/components/EchartInit';

const IMG = [
  'https://scpic.chinaz.net/Files/pic/icons128/8328/h1.png',
  'https://scpic.chinaz.net/Files/pic/icons128/8319/w2.png',
  'https://img0.baidu.com/it/u=3119542616,1165410720&fm=26&fmt=auto',
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F061H0102U6%2F20061G02U6-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644314407&t=aa49089b06c80ff5c9e3404d3ec85382',
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21042G339292K3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644314407&t=e3a817c74754fdade94aa51858689928',
  'https://scpic.chinaz.net/Files/pic/icons128/8308/d5.png',
  'https://scpic.chinaz.net/Files/pic/icons128/8304/e7.png',
  'https://sc.chinaz.com/tubiao/220108527280.htm',
]
export default function BarEchart(props: any) {

  const options = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: {
        formatter: (value) => {
         return value + '\n'+'{' + value + '| }';
        },
        rich: {
          Mon: {
            height: 40,
            width: 40,
            backgroundColor: {
              image: IMG[0]
            }
          },
          Tue: {
            height: 40,
            width: 40,
            backgroundColor: {
              image: IMG[1]
            }
          },
          Wed: {
            height: 40,
            width: 40,
            backgroundColor: {
              image: IMG[2],
            },
          },
          Thu: {
            height: 40,
            width: 40,
            backgroundColor: {
              image: IMG[3],
            },
          },
          Fri: {
            height: 40,
            width: 40,
            backgroundColor: {
              image: IMG[4],
            },
          },
          Sat: {
            height: 40,
            width: 40,
            backgroundColor: {
              image: IMG[5],
            },
          },
          Sun: {
            height: 40,
            width: 40,
            backgroundColor: {
              image: IMG[6],
            },
          }
        }
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        label: {
          show: true,
          position: 'top',
          formatter: (value,index)=> {
            console.log('value',value,value?.dataIndex);  
            return value?.value + '{'+ 'icon' + '| }';
          },
          rich: {
            icon : {
              height: 20,
              width: 20,
              backgroundColor: {
                image: IMG[0]
              }
            }
          }
        },

      }
    ]
  };

  return (
    <div style={{height :300, width:'100%'}}>
      <EchartInit options={options} />
    </div>
  )
}

标签：Echart,IMG,image,value,height,width,柱状图,40,图标
来源： https://blog.csdn.net/weixin_40119412/article/details/122399505