自定义Echarts图表图例的图片

从Echarts官网上我们可以知道图例默认的图片样式有以下几种，分别是’circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’,那如果我们要实现图片的标记类型该怎么实现呢，给大家分享两种实现方式
第一种：

<script>
import imgZhiWu from "./img/jhx/1.png"; 
import imgDongWu from "./img/jhx/2.png";
import imgZhenJun from "./img/jhx/3.png";
</script>

  Options: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          left: "center",
          top: "top",
          data: [
            {
              name: "xxx",
              textStyle: {
                fontSize: 12,
                color: "rgb(255, 255, 255)",
              },
              icon: "image://" + imgZhiWu + "",
            },
            {
              name: "xxx",
              textStyle: {
                fontSize: 12,
                color: "rgb(255, 255, 255)",
              },
             icon: "image://" + imgDongWu + "",
            },
            {
              name: "xxx",
              textStyle: {
                fontSize: 12,
                color: "rgb(255, 255, 255)",
              },
             icon: "image://" + imgZhenJun + "",
            },
          ],
        },
        grid: {
          left: "0",
          right: "4%",
          bottom: "10%",
          top: "17%",
          containLabel: true,
        },
        xAxis: {
          name: "%",
          nameTextStyle: {
            color: "#fff",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#727ea8",
            },
          }, // 坐标轴轴线相关设置
          max: "10",
          type: "value",
          axisTick: {
            show: false,
          }, // 坐标轴刻度相关设置
          axisLabel: {
            formatter: "{value}",
            interval: "0",
            color: "#fff",
          }, // 刻度标签相关设置
          splitLine: {
            lineStyle: {
              color: "#22446a",
            },
          }, //分割线相关设置
        },
        yAxis: {
          type: "category",
          data: ["未列保护", "三级", "二级", "一级"],
          axisTick: {
            show: false,
          }, // 坐标轴刻度相关设置
          axisLine: {
            show: true,
            lineStyle: {
              color: "#727ea8",
            },
          }, // 坐标轴轴线相关设置
          axisLabel: {
            color: "#fff",
          }, // 刻度标签相关设置
        },
        series: [
          {
            name: "动物",
            type: "bar",
            stack: "total",
            color: "#00ffff",
            barWidth: "6",
            emphasis: {
              focus: "series",
            },
            data: [2, 4, 3, 3],
          },
          {
            name: "真菌",
            type: "bar",
            stack: "total",
            color: "#ffd500",
            barWidth: "6",
            emphasis: {
              focus: "series",
            },
            data: [3, 4, 5, 6],
          },
          {
            name: "植物",
            type: "bar",
            stack: "total",
            color: "#17d486",
            barWidth: "6",
            emphasis: {
              focus: "series",
            },
            data: [2, 4, 6, 3],
          },
        ],
      },

第二种：

 Options: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          left: "center",
          top: "top",
          data: [
            {
              name: "植物",
              textStyle: {
                fontSize: 12,
                color: "rgb(255, 255, 255)",
              },
              // icon: "image://" + imgZhiWu + "",
              icon: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAhElEQVQokY2RMQ5AQBBFn41WIQqdznU2TqV3E5zFCfRCcACZZMkawv5q5ue/nclslA91CVgg4Vsb0JvAMC5jTWD4gmJlFEAFpK6fgRYYz4BRgPXCuLryAxrIXtbwH3gAv9LA9ALcPA30wOL1Uot3SV9JrtF8rSUT5AdDtQsgI/cAYgW6AwFKFCcXTG1fAAAAAElFTkSuQmCC`,
            },
            {
              name: "动物",
              textStyle: {
                fontSize: 12,
                color: "rgb(255, 255, 255)",
              },
              // icon: "image://" + imgDongWu + "",
             icon: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAfklEQVQokZWRQQ5AQAxFH7GdhdjbuY64iws4Eo5kL8TMnjRBRgnjrdrmv5kmjVjXAigBwzsW6EWoA8IHNv4RFkyiBjlQAeneT0ALDEcgVkLphdnryg9oIXtYw3/gJnyihfFBuMy00AOz10stsxO5Q/N3JblgKE4E+dIFGAvQbYlRGHaIHPgMAAAAAElFTkSuQmCC`
            },
            {
              name: "真菌",
              textStyle: {
                fontSize: 12,
                color: "rgb(255, 255, 255)",
              },
              // icon: "image://" + imgZhenJun + "",
              icon: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAgUlEQVQokY2RQQ5AMBBFn8bWQuztXKfp1dwEd3EBeyHYk0lKagj9q5mf/zqTabL3VIAFMr61Ap2JDOMz1kSGLyhVRgk4IPf9BDTAcAaMAmwQxtcuDGigeFkjfOAB/EoD4wtw8zTQAXPQSy3eJX0luUb9tZZMkB+M1SaAjNwiiAVoD+VWFIrODzLdAAAAAElFTkSuQmCC`
            },
          ],
        },
        grid: {
          left: "0",
          right: "4%",
          bottom: "10%",
          top: "17%",
          containLabel: true,
        },
        xAxis: {
          name: "%",
          nameTextStyle: {
            color: "#fff",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#727ea8",
            },
          }, // 坐标轴轴线相关设置
          max: "10",
          type: "value",
          axisTick: {
            show: false,
          }, // 坐标轴刻度相关设置
          axisLabel: {
            formatter: "{value}",
            interval: "0",
            color: "#fff",
          }, // 刻度标签相关设置
          splitLine: {
            lineStyle: {
              color: "#22446a",
            },
          }, //分割线相关设置
        },
        yAxis: {
          type: "category",
          data: ["未列保护", "三级", "二级", "一级"],
          axisTick: {
            show: false,
          }, // 坐标轴刻度相关设置
          axisLine: {
            show: true,
            lineStyle: {
              color: "#727ea8",
            },
          }, // 坐标轴轴线相关设置
          axisLabel: {
            color: "#fff",
          }, // 刻度标签相关设置
        },
        series: [
          {
            name: "动物",
            type: "bar",
            stack: "total",
            color: "#00ffff",
            barWidth: "6",
            emphasis: {
              focus: "series",
            },
            data: [2, 4, 3, 3],
          },
          {
            name: "真菌",
            type: "bar",
            stack: "total",
            color: "#ffd500",
            barWidth: "6",
            emphasis: {
              focus: "series",
            },
            data: [3, 4, 5, 6],
          },
          {
            name: "植物",
            type: "bar",
            stack: "total",
            color: "#17d486",
            barWidth: "6",
            emphasis: {
              focus: "series",
            },
            data: [2, 4, 6, 3],
          },
        ],
      },

利用在线转换工具将图片转换为base64的形式，然后引入。
最后实现效果如下：