echarts之视觉映射组件 visualMap

视觉映射组件 visualMap

visualMap 是 ECharts 中的一个组件，用于显示数据的视觉映射。它可以用来展示数据的范围，以及如何在视觉上表示这些数据。visualMap 通常用于连续或离散的颜色映射，以帮助用户更好地理解数据分布

以下是工作中常用到配置，不包括图表样式调整。

连续型映射 type：continuous

visualMap:[{
    seriesIndex: 1, 	// 该配置应用到哪个系列
    show:true,          // 是否显示 visualMap 组件, 即控制数据显示区间的控制器
	type: 'continuous',    // 连续型 continuous
    dimension: 2,       // 指定取数据的第几维度进行映射,
    min: 0,			   // 组件允许最小值
    max: 15,           // 组件允许最大值
    range: [0,10],       // 拖拽组件的数值范围
    calculable:true,    //是否显示拖拽手柄（拖拽调整选中范围）
    realtime: true,      // 拖拽 visualMap 组件时，是否实时渲染
    inRange: {           // 如词义，选中范围内的数据点配置
        symbol:  'rect',  // 数据点形状
        symbolSize: 30,    // 数据点大小
        color: ['#000', '#fff'],   // 数据点颜色,从黑色渐变到白色
        opacity: 0.5    // 数据点透明度
        ... 
    },
    outOfRange:{      // 如词义，选中范围外的数据点配置
        ...   // 同上
    },
}]

写了个简单的 单个系列 连续型视觉映射demo，如下图所示，可以看到数据在设置范围内的和范围外的都能如期的按照配置进行绘制。当每个系列都有单独的映射规则时，只需要多写一份配置并指定seriesIndex即可。

分段型映射 type: piecewise

 visualMap: [
    {
      seriesIndex: 1, // 该配置应用到哪个系列
      show: true, // 是否显示 visualMap 组件, 即控制数据显示区间的控制器
      type: 'piecewise', // 分段型 piecewise
      dimension: 2, // 指定取数据的第几维度进行映射,
      splitNumber: 5, // 将数据平均切段，切成多少段
      pieces: [      // 数据分段映射
        {
          min: 0, // 范围最小值
          max: 5, // 范围最大值
          color: 'red', // 该范围的颜色
          label: '价格0-5', //  自定义该范围的标签内容
          symbol: 'triangle', // 该范围图元符号形状，可以是'circle', 'rect', 'roundRect'
          symbolSize: 20 // 该范围图元符号大小
        },
        {
          gt: 15, // 大于 100
          lte: 150, // 小于 150
          color: 'orange', // 该范围的颜色
          label: '价格>15',
          symbol: 'diamond'
        }
      ]
    }
  ],

以下是分段型映射的一个简单demo，主要应用了pieces进行对数据分段映射。注意限制范围的两种方法区别.

• min 和 max：这种方式定义了一个闭区间 [min, max]，即区间包括 min 和 max 两个边界值。
• gt 和 lte：这种方式定义了一个半开区间 (gt, lte]，即区间包括 lte 边界值但不包括 gt 边界值

这两者的区别：

• 连续型：数据点映射是在区间内线性渐变的。
• 分段型：数据在一个区间就是一个样式。

当然还有最重要的一点，就是visualMap里的的配置（对数据点样式）优先级是比 series.data 里配置的要高的。如果此时一个系列上的部分数据要使用series.data的配置样式的话，可以把单个数据点的取消映射，让它走自己的配置，只需要把 数据点格式 改为 { value:[1,1,1], visualMap: false } 这样即可。如以下示例所示