ECharts堆叠柱状图的归一化

在数据可视化领域，将数据转换成比例或百分比的形式以进行比较叫做数据归一化。归一化能够在保持数据比例的同时，将绝对量差异缩小至相同的比例尺上，这对于多个变量之间的比较具有重要意义。ECharts作为一款功能强大的数据可视化库，在堆叠柱状图的制作中也提供了归一化的选项，以更直观、更公平地反映不同数据的占比情况。本文将探讨在ECharts中如何实现堆叠柱状图的归一化，并提供详细的代码和解释。

堆叠柱状图归一化的意义

在某些情况下，原始的数据量级差异较大，直接展示这些数据可能会导致信息的误读。归一化处理后的堆叠柱状图，每个柱子的高度固定，内部分割比例展示了各部分数据在总和中的占比，从而便于观察不同系列在不同分类下的相对大小关系。

计算归一化数据

在执行归一化之前，首先需要计算每个分类的所有系列数据总和，这将作为后续归一化的基数。以下为计算总和的JavaScript代码：

const rawData = [
  [100, 302, 301, 334, 390, 330, 320],
  // ...其他原始数据
];

const totalData = [];
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0;
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i];
  }
  totalData.push(sum);
}

在totalData数组中，每个元素代表相应分类下的数据总和。

创建归一化的系列数据

接着，需要创建表示归一化比例的堆叠柱状系列。ECharts的series配置中允许为每个数据点添加一个标签来显示信息，这里的标签将用于显示归一化后的百分比。

const series = [
  'Direct',
  'Mail Ad',
  // ...其他系列名称
].map((name, sid) => {
  return {
    name,
    type: 'bar',
    stack: 'total',
    barWidth: '60%',
    label: {
      show: true,
      formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
    },
    data: rawData[sid].map((d, did) => totalData[did] <= 0 ? 0 : d / totalData[did])
  };
});

在上述代码中，每个系列的数据是通过取个别原始数据与对应总和的比例来计算得出。formatter函数确保了标签显示为正确的百分比格式。

ECharts配置项的构建

最后，构建ECharts需要的option配置项，并在其中设置图表的布局、坐标轴、图例和归一化后的堆叠柱状图系列。

const grid = {
  left: 100,
  right: 100,
  top: 50,
  bottom: 50
};

option = {
  legend: {
    selectedMode: false
  },
  grid: grid,
  yAxis: {
    type: 'value'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: series
};

在配置项中设置了不同的布局参数以适应图表的显示需要。由于归一化后各系列的数据已为比例值，因此不需要具体的数值轴标签，yAxis的类型设为value。

使用ECharts配置项初始化图表

将上述option配置项赋予ECharts实例即可初始化堆叠柱状图，并在对应的DOM元素中显示归一化的结果。

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

在网页中添加一个具有id="main"的DOM元素作为图表的容器，ECharts将在此容器中渲染归一化堆叠柱状图。

结论

归一化在多变量的数据比较中具有至关重要的作用。在ECharts中进行归一化处理的堆叠柱状图能够以一种简洁明了的方式展示各个系列数据在总体中的相对比例。通过本文的说明和代码示例，应用者可以快速理解和实施堆叠柱状图的归一化处理，进而创建出更加专业和准确的数据可视化图表。

Echarts堆叠柱状图的归一化