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

• 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'
              }
          ]
      }
  

  　　

  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'
            }
        ]
    }

　　效果圖如下：