詳解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是一個非常簡單易用的組件，通過對其進行自定義可以實現許多個性化效果，讓數據更加清晰明了。我們可以通過不同的屬性設置來調整圖標的顏色、線條樣式、形狀等，為數據展示提供更加豐富的元素。