自定义Echarts图表图例的图片_echarts 自定义图例-优快云博客

本文链接：https://blog.youkuaiyun.com/HuLuWa1997/article/details/115671191

本文介绍了如何在Echarts中自定义图例，特别是如何使用图片作为图例标记。提供了两种实现方法，包括直接设置图例样式和通过转换工具将图片转为base64格式后引入。

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

从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: "%",