echarts 实现legend添加icon

实现的最终效果

高中低是icon图，后面的数字是根据接口动态变化，可切换图例查看不同图例的数据

一 文档位置

二 关键代码部分

注意事项：

1. 图片需要放在public文件夹下面，不然获取不到
2. 后台返回的legend名称需要跟data里面的数据对应起来

三 图例名称动态展示

根据后台返回的数据来进行sum求和

四 整体代码

1 区分type是因为页面上有两个堆叠图，并且是不同的图例，就使用了type来进行区分

import { color } from '../../hooks/color';
import {sum} from 'lodash';
export function useBarStack(series = [], xaxis,type = 'left') {
  const legend = [];
  const seriesList = [];
  const sumList = getSum(series,type);
  series &&
    series.forEach((v, i) => {
      legend.push(v.name);
      seriesList.push({
        stack: 'total',
        barWidth: 4,
        name: v.name,
        data: v.data,
        type: 'bar',
        showSymbol: false,
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: 'top',
              color: '#fff'
            },
            color: color.quoatBar[i]
          }
        }
      });
    });
  const dataleft = [
    {
      name: '高',
      textStyle: {
        fontSize: 25,
        fontWeight: 'bold',
        color: 'red',
        fontFamily: 'monospace'
      },
      icon: 'image://img/charts/quoat/gao.png'
    },
    {
      name: '中',
      textStyle: {
        fontSize: 25,
        fontWeight: 'bold',
        color: '#FAA81A',
        fontFamily: 'monospace'
      },
      icon: 'image://img/charts/quoat/zhong.png'
    },
    {
      name: '低',
      textStyle: {
        fontSize: 25,
        fontWeight: 'bold',
        color: '#22A7E4',
        fontFamily: 'monospace'
      },
      icon: 'image://img/charts/quoat/di.png'
    }
  ];
  const dataright = [
    {
      name: '特大',
      textStyle: {
        fontSize: 25,
        fontWeight: 'bold',
        color: 'red',
        fontFamily: 'monospace'
      },
      icon: 'image://img/charts/quoat/td.png'
    },
    {
      name: '重大',
      textStyle: {
        fontSize: 25,
        fontWeight: 'bold',
        color: '#FAA81A',
        fontFamily: 'monospace'
      },
      icon: 'image://img/charts/quoat/zd.png'
    },
    {
      name: '较大',
      textStyle: {
        fontSize: 25,
        fontWeight: 'bold',
        color: '#22A7E4',
        fontFamily: 'monospace'
      },
      icon: 'image://img/charts/quoat/jd.png'
    },
    {
      name: '一般',
      textStyle: {
        fontSize: 25,
        fontWeight: 'bold',
        color: '#47967A',
        fontFamily: 'monospace'
      },
      icon: 'image://img/charts/quoat/yb.png'
    }
  ];
  // 基于危险等级的告警响应时长
  const barBase = {
    legend: {
      show: true,
      orient: 'horizontal',
      itemWidth: type == 'left' ? 23 : 40,
      itemHeight: type == 'left' ? 23 : 23,
      left: 0,
      itemGap: type == 'left' ? 32 : 28,
      // top: -10,
      data: type == 'left' ? dataleft : dataright,
      formatter: function (v) {
        console.log(sumList,v,2323)
        const l = sumList.filter(i=>{
          return i.name == v;
        })
        return l[0].sum;
      }
    },

  const optBar = {
    ...barBase,
    legend: {
      ...barBase.legend
      // data: legend
    },

    series: seriesList
  };

  return optBar;
}

const getSum = (series,type) => {
  const listLeft = [
    {name:'高',sum:0},
    {name:'中',sum:0},
    {name:'低',sum:0},
  ]
  const listRight = [
    {name:'特大',sum:0},
    {name:'重大',sum:0},
    {name:'较大',sum:0},
    {name:'一般',sum:0},
  ]
  let list = [];
  if (type == 'left') {
    list = listLeft;
  }else {
    list = listRight;
  }
  list.forEach((v,i,arr)=>{
    series.forEach((v2)=> {
      if (v.name == v2.name) {
        arr[i].sum = sum(v2.data);
      }
    })
  })
  return list
}