echarts boxplot

ECharts 中的 boxplot（箱线图）是一种用于展示数据分布和离散程度的可视化图表类型。下面是使用 ECharts 绘制箱线图的一些基本步骤：

1. 导入 ECharts 库。在 HTML 文件中，通过 `<script>` 标签导入 ECharts 库。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>

2. 创建一个包含箱线图的 DOM 元素。在 HTML 文件中，创建一个 `<div>` 元素，并为其指定一个唯一的 id。

<div id="boxplot"></div>

3. 初始化 ECharts 实例。在 JavaScript 文件中，使用 `echarts.init` 方法初始化一个 ECharts 实例，并传入要绑定的 DOM 元素的 id。

var chart = echarts.init(document.getElementById('boxplot'));

4. 配置箱线图的数据和样式。使用 `option` 对象来配置图表的数据和样式。

var option = {
  xAxis: {
    type: 'category',
    data: ['Category 1', 'Category 2', 'Category 3'], // 横轴数据
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'boxplot',
      data: [
        // 数据格式：[最小值, Q1, 中位数, Q3, 最大值]
        [650, 750, 800, 900, 1000], // Category 1 的数据
        [600, 700, 750, 800, 950], // Category 2 的数据
        [700, 800, 850, 950, 1050], // Category 3 的数据
      ],
    },
  ],
};

// 将配置项设置给图表实例并渲染图表
chart.setOption(option);

5. 渲染图表。使用 `setOption` 方法将配置项设置给图表实例，并渲染出箱线图。

chart.setOption(option);

这样就可以在指定的 DOM 元素中绘制出箱线图了。根据需求，你可以根据实际数据和样式需求进行相应的调整和定制。