业务需要,需要在地图上进行一定的操作,比如增加圆点啊,然后用一个图例控制另一些图例的显示如否,具体效果图如下
![](https://oss.jqhtml.com/wp-content/uploads/2020/7/aaymQr.png)
这是点击右下角绿色以后的样子
![](https://oss.jqhtml.com/wp-content/uploads/2020/7/BFfy2a.png)
可以看到我只点击右下角的绿色这个图例,其他所有的绿色图例都被反选了
![](https://oss.jqhtml.com/wp-content/uploads/2020/7/32ai2a.png)
而且单独某个图例的显示与否并不受影响。
具体地图的显示,图例数据的处理这里暂且不表,网上资料有很多,而关于图例相关的操作,网上的资料很少,少数几个通过单个图例控制其他多个图例的要么是一个图的图例控制另一个图的图例,要么就是通过html事件操作而非通过echarts自带的机制进行操作,略显复杂。
下面就来说如何进行这样的操作:
![](https://oss.jqhtml.com/wp-content/uploads/2020/7/qyUFjm.png)
上图是图中点位的坐标点和相应的数据,数据中的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({