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

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时,填充绿色。

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容