如何使用Apache ECharts创建简单直方图

• 首先明确版本支持差异：Apache ECharts v5.0及以上版本原生支持直方图图表类型，v4及更早版本无内置支持，需要基于柱状图二次封装实现。
• 文档查找说明：直方图相关配置归类在统计类图表板块下，不属于基础柱状图分类，在基础图表目录下查找会找不到对应指引。

v5+版本最简实现方法 #

• 不需要提前对原始数据做分箱计算，内置直方图系列会自动完成分箱、频次统计逻辑
• 核心配置只需要将series的type设置为histogram即可，支持自定义分箱宽度、分箱数量、柱子样式等属性
• 最简可运行配置示例：

const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom);
const option = {
  xAxis: {
    name: '数值区间'
  },
  yAxis: {
    name: '频次'
  },
  series: [
    {
      type: 'histogram',
      data: [8, 11, 13, 15, 17, 19, 22, 24, 26, 28, 31, 33, 35, 37, 40, 43, 46],
      binWidth: 5, // 自定义每个分箱的区间宽度
      itemStyle: {
        color: '#5470c6'
      }
    }
  ]
};
myChart.setOption(option);

v4及更早版本兼容方案 #

旧版本无内置histogram类型时，可先手动完成数据分箱：先确定区间范围、统计每个区间内的数值出现频次，再使用普通柱状图（type: 'bar'）渲染，将barGap设置为'-100%'、barCategoryGap设置为0，消除柱子间的空隙，即可实现标准直方图视觉效果。

内容的提问来源于stack exchange，提问作者Emeka Obasi