echarts map 地图在react项目中的使用

2022-05-24 05:18| 来源: 网络整理| 查看: 265

点击三沙市图片，更换市区数据，并替换成高亮状态下的三沙市图片。这个比较容易解决，在图片上绑定click事件，更新图片选中状态isSS和市区数据cityInfo。

点击三沙市图片，海南地区原高亮区域取消。 echarts官方提供了action. downplay，用于取消高亮指定的数据图形。（但我又一次失败了，可能是没能正确理解他的使用方法😭）我的解决方法是通过选中状态isSS重新设置option.series，注意setOption第二个参数notMerge为true，否则无法正确更新地图数据。

echarts官方对该参数的说明文档，为了方便后期查看，直接copy过来。

notMerge: boolean

可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则，详见组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。

replaceMerge: string | string[]

可选。用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件，也可使用 "replaceMerge"。详见组件合并模式。

组件合并模式

对于一种类型的组件（如：xAxis, series）：如果设置opts.notMerge为true，那么旧的组件会被完全移除，新的组件会根据option创建。如果设置opts.notMerge为false，或者没有设置 opts.notMerge：如果在opts.replaceMerge里指定组件类型，这类组件会进行替换合并。否则，会进行普通合并。

什么是普通合并和替换合并？普通合并

对于一种类型的组件（如：xAxis, series），新来的 option 中的每个“组件描述”（如：{type: 'xAxis', id: 'xx', name: 'kk', ...}）会被尽量合并到已存在的组件中。剩余的情况，会在组件列表尾部创建新的组件。整体规则细节如下：先依次对 option 中每个有声明 id 或者 name 的“组件描述”，寻找能匹配其 id 或者 name 的已有的组件，找到的话则合并。再依次对 option 中剩余的“组件描述”，寻找还未执行过前一条的已有组件，找到的话则合并。其他 option 中剩余的“组件描述”，用于在组件列表尾部创建新组件。特点：永远不会删除已存在的组件。也就是说，只支持增加，或者更新组件。组件的索引（componentIndex）永远不会改变。如果 id 和 name 没有在 option 中被指定（这是经常出现的情况），组件会按照它在 option 中的顺序一一合并到已有组件中。这种设定比较符合直觉。

替换合并

对于一种类型的组件（如：xAxis, series），只有 option 中指定了 id 并且已有组件中有此 id 时，已有组件会和 option 相应组件描述进行合并。否则，已有组件都会删除，新组件会被根据 option 创建。细节规则如下：先依次对 option 中每个有声明 id 的“组件描述”，寻找能匹配其 id 或者 name 的已有的组件，找到的话则合并。删除其他没匹配到的已有组件。依次对 option 中剩余的“组件描述”，创建新组件，填入刚因删除而空出来的位置上，或者增加到末尾。特点：与普通合并相比，支持了组件删除。已有组件的索引永远不会变。这是为了保证，option 或者 API 中的 index 引用（例如：xAxisIndex: 2）仍能正常一致得使用。整个处理过程结束后，可能存在一些“洞”，也就是说，在组件列表中的某些 index 上，并没有组件存在（被删除了）。但是这是可以被开发者预期和控制的。

删除组件有两种方法能删除组件：

删除所有：使用 notMerge: true，则所有组件都被删除。删除部分：使用 replaceMerge: [...]，被指定的组件类型，会根据 replaceMerge 的规则：如果 id 匹配就合并（ merge ），否则旧组件被删除，新组件被创建。“部分删除” 有助于，在删除该删除的组件时，保留其他组件的状态（如高亮、动画、选中状态）。

普通合并例子：

// 已有组件： { xAxis: [ { id: 'm', interval: 5 }, { id: 'n', name: 'nnn', interval: 6 } { id: 'q', interval: 7 } ] } // 新来的 option ： chart.setOption({ xAxis: [ // id 没有指定。会寻找到第一个没有进行过合并的已有组件，进行合并。 // 即合并到 `id: 'q'`。 { interval: 77 }, // id 没有指定。最终会创建新组件。 { interval: 88 }, // id 没有指定，但是 name 指定了。会被合并到已有的 `name: 'nnn'` 组件。 { name: 'nnn', interval: 66 }, // id 指定了，会被合并到已有的 `id: 'm'` 组件。 { id: 'm', interval: 55 } ] }); // 结果组件： { xAxis: [ { id: 'm', interval: 55 }, { id: 'n', name: 'nnn', interval: 66 }, { id: 'q', interval: 77 }, { interval: 88 } ] }

替换合并例子：

// 已有组件： { xAxis: [ { id: 'm', interval: 5, min: 1000 }, { id: 'n', name: 'nnn', interval: 6, min: 1000 } { id: 'q', interval: 7, min: 1000 } ] } // 新来的 option : chart.setOption({ xAxis: [ { interval: 111 }, // id 已经指定了。因此会被合并进已有的组件 `id: 'q'`。 { id: 'q', interval: 77 }, // id 已经指定了。但是已有组件没有此 id 。 { id: 't', interval: 222 }, { interval: 333 } ] }, { replaceMerge: 'xAxis' }); // 结果组件： { xAxis: [ // 原来的 id 为 'm' 的组件，被移除。 // 替换为新的组件。新组件中，并没有原来的 `min: 1000` 了。 { interval: 111 }, // 原来的 id 为 'n' 的组件，被移除。 // 替换为新的组件。新组件中，并没有原来的 `min: 1000` 了。 { id: 't', interval: 222 }, // 原来的组件没有被移除，而是和 option 中的组件描述进行了合并。 // 所以 `min: 1000` 被保留了。 { id: 'q', interval: 77, min: 1000 }, // 新添加的组件。 { interval: 333 } ] }

【本文地址】

公司简介

联系我们