ECharts 地图颜色跟随图例变化的奥秘：VisualMap 如何掌控数据与颜色之间的对应关系？

echarts地图颜色跟随图例变化的奥秘

在echarts绘制的地图中，点击图例时发现地图区域的颜色发生了变化，但其配置选项中并没有明确设置该颜色。这究竟是何缘由，又该如何自定义颜色变更？

VisualMap：掌控数据与颜色之间的对应关系

echarts中有一个名为VisualMap的对象，它负责管理数据与图像颜色之间的对应关系。也就是说，当点击图例时，就是VisualMap在幕后操控着地图区域颜色的变化。

自定义颜色映射：分段折线图

要修改地图区域的颜色映射，需要调整VisualMap的type和pieces属性。具体来说：

• type: ‘piecewise’：表示采用分段折线图方式映射。
• pieces: 定义分段规则。其中的min和max分别表示数据范围，color指定对应范围内的颜色。

示例配置：故障时变红

例如，要实现故障时间图例点击时地图变红，可以这样配置VisualMap：

visualMap: {     type: 'piecewise',     pieces: [{ max: 150, color: 'red' }, { min: 151, max: 200, color: 'green' }] }

通过这些配置，当故障时间数据小于等于150时，对应区域将填充红色。大于151且小于200时，填充绿色。