Echarts–热力图 – 颜色的离散映射

热力图通常用来表示空间上的数据密度或某些特定的统计值，它通过颜色的渐变或变化来呈现数值的大小，从而提供一种直观的数据可视化方式。在数据可视化的工具箱中，Echarts提供了强大的功能来创建这样的图表。其中，颜色的离散映射是实现这一功能的关键技术之一。本文将详细介绍如何在Echarts中利用颜色的离散映射来创建热力图，并提供详细的代码示例。

颜色的离散映射原理

与连续的颜色映射不同，离散的颜色映射将数据值划分为几个区间，并且每个区间分配一种特定的颜色。这样一来，每个数据点不再按照连续的渐变进行颜色填充，而是根据其值所在的区间选择颜色。离散映射适用于分类数据的展示或那些需要突出不同数据区段差异的场景。

Echarts热力图颜色离散映射设置

在Echarts配置热力图时，通过visualMap组件的piecewise类型来实现颜色的离散映射。接下来的代码示例显示了如何引入噪声生成库来随机生成数据，并应用离散颜色映射来绘制热力图。

// 初始引入 Perlin 噪声生成函数
let noise = getNoiseHelper();
let xData = [];
let yData = [];
noise.seed(Math.random());

// 生成热力图所需的数据集
function generateData(theta, min, max) {
  let data = [];
  for (let i = 0; i <= 200; i++) {
    for (let j = 0; j <= 100; j++) {
      data.push([i, j, noise.perlin2(i / 40, j / 20) + 0.5]);
    }
    xData.push(i);
  }
  for (let j = 0; j < 100; j++) {
    yData.push(j);
  }
  return data;
}

let data = generateData(2, -5, 5);

// Echarts热力图的配置信息
let option = {
  tooltip: {},
  grid: {
    right: 140,
    left: 40
  },
  xAxis: {
    type: 'category',
    data: xData
  },
  yAxis: {
    type: 'category',
    data: yData
  },
  visualMap: {
    type: 'piecewise',
    min: 0,
    max: 1,
    left: 'right',
    top: 'center',
    calculable: true,
    realtime: false,
    splitNumber: 8,
    inRange: {
      color: [
        '#313695',
        '#4575b4',
        '#74add1',
        '#abd9e9',
        '#e0f3f8',
        '#ffffbf',
        '#fee090',
        '#fdae61',
        '#f46d43',
        '#d73027',
        '#a50026'
      ]
    }
  },
  series: [
    {
      name: 'Gaussian',
      type: 'heatmap',
      data: data,
      emphasis: {
        itemStyle: {
          borderColor: '#333',
          borderWidth: 1
        }
      },
      progressive: 1000,
      animation: false
    }
  ]
};

// 初始化Echarts实例并进行渲染
var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);

// 下方是用于生成噪声的辅助代码，来自 https://github.com/josephg/noisejs
// 这部分通常放置在单独的文件或模块中
// Perlin 噪声生成函数的实现细节...

在上述代码中，使用了 Perlin 噪声生成库来模拟真实世界的自然变化，并生成了一个 200×100 的随机数据集。在visualMap中，通过设置type: 'piecewise'激活了离散映射，并对应了各个数据区间的颜色。这样一来，当热力图上的点落在不同的数据区间中时，就会显示出不同的颜色，从而让数据的不同范围变得更加明显。

优化热力图的离散颜色映射

离散颜色映射的优化需要注意以下几个方面：

1. 色彩选择：颜色的选择对于图表的可读性有极大的影响。应选择易于区分且符合数据含义的颜色。

2. 分类清晰：离散映射中的区间划分应根据数据的实际分布合理设置，避免造成误解。

3. 交互设计：虽然realtime属性在这个配置中设置为false，但在需要实时反映用户输入的场景中，将其设置为true可以提高用户体验。

4. 图例解读：适当的图例可以帮助用户快速识别对应的数据等级，应当在图表中包含清晰的图例说明。

结论

Echarts 通过颜色映射的方式为热力图提供了丰富的视觉表现力，而离散颜色映射让分类数据的展示成为可能。结合Perlin噪声的随机数据生成方法和Echarts强大的热力图配置项，可以创建出色彩分明、层次丰富的热力图。本文提供的示例代码及解释为理解和创建颜色的离散映射热力图提供了入门向导，读者可以在此基础上进行更多的实验和探索，制作出更符合业务需求的可视化产品。

原文链接：https://juejin.cn/post/7318214394613399588 作者：前端可视化砖家