詳解echartssymbol

一、基本介紹

echartssymbol是echarts中的一個重要功能模塊，它支持用戶自定義各種形狀的圖標，並且可以通過設置symbolSize、symbolRotate屬性對圖標進行尺寸、旋轉的調整，從而讓echarts中展示的圖標更加個性化、豐富化。

二、製作自定義圖標

echartssymbol支持自定義圖標，用戶可以根據自己的需求，使用SVG或者Canvas繪製自己的圖標，通過echarts中的symbol屬性引入自定義的圖標，下面是一個簡單的自定義圖標實例：

option = {
    series: [
        {
            type: "line",
            symbol: "path://M512 896h-384c-70.656 0-128-57.344-128-128v-640c0-70.656 57.344-128 128-128h384c70.656 0 128 57.344 128 128v640c0 70.656-57.344 128-128 128zM128 128c-35.328 0-64 28.672-64 64v640c0 35.328 28.672 64 64 64h768c35.328 0 64-28.672 64-64v-640c0-35.328-28.672-64-64-64h-384c-35.328 0-64-28.672-64-64s28.672-64 64-64h384c35.328 0 64 28.672 64 64v640c0 35.328-28.672 64-64 64h-768c-35.328 0-64-28.672-64-64v-640c0-35.328 28.672-64 64-64z",
            symbolSize: 16
        }
    ]
}

上述代碼中，我們使用了一個SVG路徑表達式，定義了一個「打勾」的圖標，並且將其大小設置為16。

三、調整圖標的尺寸和旋轉角度

使用echarts基本可以實現大部分的圖表需求，echartssymbol進一步提供了圖標的尺寸和旋轉角度的調整功能，通過設置symbolSize、symbolRotate屬性可以輕鬆實現。

option = {
    series: [
        {
            type: "line",
            symbol: "path://M512 896h-384c-70.656 0-128-57.344-128-128v-640c0-70.656 57.344-128 128-128h384c70.656 0 128 57.344 128 128v640c0 70.656-57.344 128-128 128zM128 128c-35.328 0-64 28.672-64 64v640c0 35.328 28.672 64 64 64h768c35.328 0 64-28.672 64-64v-640c0-35.328-28.672-64-64-64h-384c-35.328 0-64-28.672-64-64s28.672-64 64-64h384c35.328 0 64 28.672 64 64v640c0 35.328-28.672 64-64 64h-768c-35.328 0-64-28.672-64-64v-640c0-35.328 28.672-64 64-64z",
            symbolSize: function(value) {
                return value[2] / 10;
            },
            symbolRotate: -135
        }
    ]
}

上述代碼中，我們設置了symbolSize為一個函數，它的返回值是value數組的第三個元素值除以10，這樣可以根據數據的不同動態地調整圖標的大小。我們同時也對圖標的旋轉角度進行了設置，將它旋轉了135度。

四、使用圖標庫

echarts為我們提供了常見的圖標庫，我們可以直接使用圖標庫中的圖標，並調整它的尺寸和旋轉角度，下面是一個簡單的使用圖標庫中的圖標的實例：

option = {
    series: [
        {
            type: "line",
            symbol: "circle",
            symbolSize: 20,
            itemStyle: {
                normal: {
                    color: "#ff7f50"
                }
            }
        }
    ]
}

上述代碼中，我們使用了echarts自帶的圖標庫中的圓形圖標，在itemStyle中設置了圓圈的顏色。

五、使用Symbol屬性的注意事項

在使用echartssymbol時，需要注意以下幾個問題：

1、當symbol為字符串時，它對應着echarts內置的圖標庫中的某一個圖標；

2、當symbol為數組時，它的元素可以是以下三種情況之一：（1）字符串，與上述情況相同；（2）SVG路徑表達式；（3）Canvas繪製函數；

3、symbolRotate屬性的取值範圍為[-180,180]；

4、symbolSize屬性可以設置為一個具體的數值或者函數，其中函數的返回值需要是一個數值。

六、總結

echartssymbol是echarts中非常實用的功能模塊，它支持用戶自定義圖標，可以通過設置symbolSize、symbolRotate屬性對圖標的尺寸和旋轉角度進行調整，使用起來非常方便。在使用時，需要注意上述幾點。希望本篇文章可以幫助到大家。