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为绿色点的真实数据的话，那就会带来新的问题:点击单个绿色的图例的时候，地图上的点并不会消失，只有点击绿色这个图例的时候才会所有消失。或许有其余的解决办法，可是如今的这种瑕疵是能够接受范围内的，因此。。。。。。有缘再解决这个小问题吧┓(;´_｀)┏(起码功能实现了)