1. 程式人生 > >Echarts 自定義legend圖片,修改點選之後的顏色圖解

Echarts 自定義legend圖片,修改點選之後的顏色圖解

第一個問題:echarts 可以自定義圖例的圖示,百度上很多回答都是引用的相對路徑,但是不知道為啥,我的vue專案就是引用不顯示,在network裡面找不到相應圖片

後來我想了個法子,就是先獲取到這個圖片,然後複製它的dataURL 也就是在網頁上解析之後的圖片路徑,就能正常顯示了——————至於原因,emmmmmmmm……

第二個問題:echarts 自定義圖例的圖示成功後,點選會顯示關閉的功能(我是這樣理解的);要實現點選顏色變淺並且實現關閉功能,經過我和我另一個前端同事總結出了兩種方法,

  第一種,繪製svg圖片,在阿里巴巴圖示庫上製作新的svg圖片下載,下載的包裡面會有一個iconxx,svg 獲取到路徑,寫在icon:'path://',echarts會自動識別這個圖例圖片,好處是圖片也不需要上傳,

    並且echarts自己會處理顏色變化,個人覺得可能是echarts圖例的實現原理也是這樣的,但是沒看到原碼——這是我同事的實現方式

     第二種,寫個自定義的png圖片,利用icon:icon ,data:{

      icon:''xxxxxxxx.png

    },。利用echarts的點選選擇圖例事件觸發

      程式碼如下:  var myChart = echarts.init(this.$refs.xxxx);

            myChart.on('legendselectchanged',function(params){

              var name = params.name;

              if(name === '主動風險'){

                if(!params.selected[name]){

                  this.icon = 'aaaaaaa.png';

                  mychart.setOption(self.getOption(data))

                }else{

                  this.icon = 'xxxxxx.png';

                  mychart.setOption(self.getOption(data))


                }

              }

            })

暫時自定義需求只有一個圖示需要處理,如果多的話,可以自定去寫個公共方法封裝一下,應該也是可以的