如何使用 echarts 创建直方图答案

【问题标题】：Ho to create a histogram with echarts如何使用 echarts 创建直方图
【发布时间】：2022-07-08 16:12:55
【问题描述】：

如何使用 apache echarts 创建简单的直方图？我检查了他们的文档，但它没有出现在那里。 echarts没有直方图吗？

【问题讨论】：

如果他们的文档中没有，它似乎不受支持。

标签： reactjs echarts

【解决方案1】：

简单的手工解决方案

您可以使用条形图创建看起来像直方图的图表。您的数据需要一些格式，使其看起来像[x,y] 的列表：

x : (rangeMax - rangeMin)/2
y : 该范围内的点数

您还需要将 barWidth 设置为 100% 并将 xAxis.type 设置为“值”，使其看起来像一个直方图。

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

option = {
  xAxis: [
    {
      type: 'value',
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '100%',
      data: [[5,20], [15,52], [25,200], [35,334], [45,390], [55,330], [65,220]]
    }
  ]
};

myChart .setOption(option)

<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <div id="main" style="width: 600px; height:400px;"></div>
  </body>
</html>

使用 Echarts 工具和数据集的方法

Echarts data transformation 可用于将数据集整形为直方图数据集，使用 'ecStat:histogram'。这是一个very good example，展示了如何使用这个工具。你也可以在 github 上找到good documentation。

此解决方案处理起来有点复杂（了解 datasets 和数据转换），但它是制作直方图的简洁方法。

【讨论】：