echarts之legend-改變圖例的圖標爲自定義圖片

legend是echarts中的圖例

名稱	類型	默認值	可選值	效果
data	Array	[]		圖例內容數組，數組項一般爲{string}，每一項表明一個系列的name，默認佈局到達邊緣會自動分行（列），傳入空字符串」可實現手動分行（列）。 使用根據該值索引series中同名系列所用的圖表類型和itemStyle，若是索引不到，該item將默認爲沒啓用狀態。 如需個性化圖例文字樣式，可把數組項改成{Object}，指定文本樣式和個性化圖例icon

先來一個demo

legend:{
        show:true,
        orient:'horizontal',
        borderColor:'#df3434',
        borderWidth:2,
        data:['蒸發量','降水量','最低氣溫']
    }

效果圖以下：

自定義每一個圖例樣式

legend:{
        show:true,
        orient:'horizontal',
        borderColor:'#df3434',
        borderWidth:2,
        data:[
            {
                name:'蒸發量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#cccccc'
                },
                icon:'stack'
            },
            {
                name:'降水量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#df3434'
                },
                icon:'pie'
            }
        ]
    }

效果圖以下：

修改圖例的圖標爲自定義圖片

首先我找了以下兩張圖片放在根目錄下的images文件夾下

legend:{
        show:true,
        orient:'horizontal',
        borderColor:'#df3434',
        borderWidth:2,
        data:[
            {
                name:'蒸發量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    color:'#cccccc'
                },
                icon:'image://./images/icon1.png'//格式爲'image://+icon文件地址'，其中image::後的//不能省略
            },
            {
                name:'降水量',
                textStyle:{
                    fontSize:12,
                    fontWeight:'bolder',
                    icon:'image://./images/icon2.png'//格式爲'image://+icon文件地址'，其中image::後的//不能省略
                },
                icon:'pie'
            }
        ]
    }

效果圖以下：