详解Echarts的图例图标echartslegendicon

一、图例图标介绍

图例是Echarts中非常重要的一个组件，它可以展示你的数据在图表中的颜色、线型等信息，让用户更好地了解数据分布和差异。而图例图标就是图例中每个数据对应的小图标，通常表现为不同的颜色、线条等样式。

在Echarts中，我们可以通过echartslegendicon来对图例图标的样式进行自定义，包括颜色、线条样式、形状等。

二、颜色样式

颜色样式是图例图标中最常见的自定义方式。我们可以通过设置legend.data中每个数据对应的icon值来自定义图例图标的样式。

  
    legend: {
      data: [
        {
          name: "数据1",
          icon: "circle"
        },
        {
          name: "数据2",
          icon: "rect"
        },
        {
          name: "数据3",
          icon: "roundRect"
        }
      ]
    }
  

在上面的例子中，我们分别使用了圆形（circle）、矩形（rect）和带圆角的矩形（roundRect）作为图例图标。Echarts中还提供了多种可选的图标样式，如三角形（triangle）、钻石形（diamond）等，可以根据自己的需求进行选择。

三、线条样式

除了颜色样式外，我们还可以为图例图标自定义线条样式，包括线条粗细、虚实样式等。

  
    legend: {
      data: [
        {
          name: "数据1",
          icon: "circle",
          textStyle: {
            width: 2,
            type: "dashed"
          }
        },
        {
          name: "数据2",
          icon: "rect",
          textStyle: {
            width: 4,
            type: "solid"
          }
        },
        {
          name: "数据3",
          icon: "roundRect",
          textStyle: {
            width: 1,
            type: "dotted"
          }
        }
      ]
    }
  

在上面的例子中，我们通过设置legend.data中每个数据的textStyle属性，分别自定义了三种不同的线条样式，包括线条宽度、线条虚实样式等。

四、自定义形状

除了Echarts提供的基本图标样式外，我们还可以通过自定义形状来实现更加个性化的图例图标。下面是一个自定义心形的例子。

  
    echarts.registerMap("heart", {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": {
            "type": "Polygon",
            "coordinates": [[
              [0, 10],
              [5, 5],
              [10, 10],
              [10, 0],
              [0, 0],
              [0, 10]
            ]]
          }
        }]
    });
    
    option = {
      legend: {
        data: [
          {
            name: "数据1",
            icon: 'path://M10 20 C 30 10 60 20 80 10',
            textStyle: {
              color: '#FF0000'
            }
          },
          {
            name: "数据2",
            icon: "image://http://echarts.baidu.com/images/favicon.png"
          },
          {
            name: "自定义形状",
            icon: "heart",
            textStyle: {
              color: '#FF0000'
            }
          }
        ]
      },
      series : [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          data:[
            {value:235, name:'视频广告'},
            {value:274, name:'联盟广告'},
            {value:310, name:'邮件营销'}
          ]
        }
      ]
    };
  

在上面的例子中，我们通过echarts.registerMap方法注册了一个心形的形状（注意这里需要定义为FeatureCollection类型），并将其作为图例图标的icon值。除此之外，我们还可以通过其他方式实现自定义形状，比如直接使用svg路径等。

五、总结

Echarts的图例图标echartslegendicon是一个非常简单易用的组件，通过对其进行自定义可以实现许多个性化效果，让数据更加清晰明了。我们可以通过不同的属性设置来调整图标的颜色、线条样式、形状等，为数据展示提供更加丰富的元素。