echarts經過一個圖例控制多個圖例的方法

業務須要，須要在地圖上進行必定的操做，好比增長圓點啊，而後用一個圖例控制另外一些圖例的顯示如否，具體效果圖以下

這是點擊右下角綠色之後的樣子

能夠看到我只點擊右下角的綠色這個圖例，其餘全部的綠色圖例都被反選了

並且單獨某個圖例的顯示與否並不受影響。

具體地圖的顯示，圖例數據的處理這裏暫且不表，網上資料有不少，而關於圖例相關的操做，網上的資料不多，少數幾個經過單個圖例控制其餘多個圖例的要麼是一個圖的圖例控制另外一個圖的圖例，要麼就是經過html事件操做而非經過echarts自帶的機制進行操做，略顯複雜。

下面就來講如何進行這樣的操做：

上圖是圖中點位的座標點和相應的數據，數據中的state就是直觀的點位的顏色。

testValue = [] //只用來存實際的數據
convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = this.geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                    state: data[i].state
                });
            }
        }
        // return res;
        this.testValue = res
    };

上面的代碼是對數據和座標點的合併，處理之後能夠在地圖上使用而且展現的數據以下

準備工做已經作好，下面來說圖例控制中最重要的兩個配置項：一個是legend,一個是series

series是頁面上展現的數據的主要控制配置，具體文檔echarts的官網有。在series配好之後，legend這個配置項你只須要在option裏面寫上，什麼都不用作，圖例就會智能根據相關的數據把全部在series裏面有的數據都轉換成圖例顯示出來，也就是，series裏面有幾個花括號，頁面上的圖例就會有幾個（legend在不作多餘配置的狀況下），明白這點對legend和series的對應關係和操做都很是重要。

如上圖，個人series裏面有六個花括號包含的實際數據，因此在前面幾張圖裏我在legend裏面沒有配置data相關屬性的時候，天然而然會顯示六個圖例。

這時候地圖上就會有六個點和六個圖例了，此時我想用一個圖例，控制四個綠色的圖例和對應地圖上數據的顯示與否該如何操做呢

分解問題，首先增長一個單獨的圖例：

如上圖，我在series裏面新增一個空的對象，其中data欄你把它置空'data:[ ]',或者像我同樣，直接不設置data也行，咱們來看看頁面有什麼變化

如上圖，咱們能夠看到左邊的圖例變成了七個，多了一個名字叫綠色的圖例，可是在地圖上，仍是隻有六個點位。這就是data爲空的意義，這個綠色，只是一個用來進行圖例操做的標記而已，若是沒有明白legend和series的對應關係的話，理解這點就有點困難。

接下來進行進一步的操做，這個綠色圖例和其餘的實際點位擺在一塊兒確定不行，我想把它單獨擺在右下角，那就在legend裏面單獨新增一個只顯示綠色的圖例

能夠看到頁面上右下角多了一個名字爲綠色的圖例，提一嘴，圖例的名稱是跟着series裏面的name屬性走的，固然若是要強制改變的話，legend裏面有一個formatter屬性，能夠改變這個圖例的名字,具體查閱官方文檔。

如今咱們要作的是把左上角的圖例裏面的綠色給排除掉，也就是在legend裏面的控制左上角的object裏面，把data項設置爲排除綠色的數據。

這樣頁面就回到了最開始的那一張圖的狀態

接下來就是另外具體的事件操做了，也就是我要點擊右下角的綠色圖例，而後至關於把左上角的屬於綠色圖例所有點一遍

查閱官方文檔，其中API中有一個events，events中有一個lengendselectchagned

用代碼來表示這個事件如何觸發

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

注意，若是想要在這個事件裏面使用this的話，得這樣

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

否則this指向會出錯。

上圖裏面的name就是你點擊的那個圖例的name，返回的selected是series裏面全部對象的boolean值，你點了哪一個圖例的值，哪一個圖例的boolean值就會變化，然而，這個true和false，毫無luan用，它！完！全！不！能！改變圖例的狀態！它僅僅只是告訴你這個圖例是true和false的狀態！！！冊那那你告訴我可是我操做true和false之後沒有用，那你告訴我幹嗎，毫無心義嘛這是！

可是不要慌，點圖例的時候圖例終究是變化了，這說明是可以控制的，官方文檔API裏有個action,action裏面恰好有個legendToggleSelect

這個是能夠真切改變圖例的顯示與否的，可是每次只能改變一個，由於

name是個string對象啊。。。。爲什麼不能改爲array呢，讓人少些操做很差嗎。。。。
因此想要一次改變多個圖例的狀態，得用循環操做，代碼以下

myChart.on('legendselectchanged' ,function (params) {
            if(params.name == '綠色'){
               let tempArray = this.chooseData('green','state')
               //this.chooseData()是本身寫的一個方法，用於把傳進來的'green'之類把
               //上面的testValue裏面的state的值與'green'相同的數據篩選出來，不過重要，因此不復制上來了。
               
               tempArray.forEach(res=>{
                    // params.selected[res.name] = false
                    //這個狀態並無什麼ruan用,只是給你看的，改變這個並不能改變圖例的狀態

                    myChart.dispatchAction({//這個能夠改變圖例的狀態
                        type: 'legendToggleSelect',
                        // 圖例名稱
                        name: `${res.name}` //只能傳一個string對象，不能傳array，還要循環來重複這件事.
                        })

               })
            }
            console.log(params);

            //myChart.setOption(option);

        },this);

到此爲止也算是結束了，能夠經過一個圖例切換其餘多個圖例的狀態。惟一有點不足的就是鼠標移動到綠色這個圖例上的時候，地圖上的點並無像其餘有真實數據點同樣有Hover反應，這是正常的，由於這個綠點的data爲空啊。。。若是綠色的data爲綠色點的真實數據的話，那就會帶來新的問題:點擊單個綠色的圖例的時候，地圖上的點並不會消失，只有點擊綠色這個圖例的時候纔會所有消失。或許有其餘的解決辦法，可是如今的這種瑕疵是能夠接受範圍內的，因此。。。。。。有緣再解決這個小問題吧┓(;´_｀)┏(起碼功能實現了)