Echarts箱线图如何显示异常值

在 ECharts 中，箱线图（Boxplot）是一种用于展示数据分布的图表类型，它可以显示数据的中位数、上下四分位数以及异常值。要在 ECharts 中显示箱线图的异常值，你需要按照以下步骤操作：

1. 引入 ECharts 库：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

2. 创建一个用于渲染图表的 DOM 元素：

<div id="boxplot" style="width: 600px; height: 400px;"></div>

3. 准备你的数据集，例如：

const data = [
  [1, 2, 3, 4, 5],
  [2, 3, 4, 5, 6],
  [3, 4, 5, 6, 7],
  [4, 5, 6, 7, 8],
  [5, 6, 7, 8, 9],
  [6, 7, 8, 9, 10],
  [7, 8, 9, 10, 11],
  [8, 9, 10, 11, 12],
  [9, 10, 11, 12, 13],
  [10, 11, 12, 13, 14],
];

4. 配置 ECharts 选项，包括箱线图的设置：

const option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'boxplot',
      data: data,
      tooltip: {
        formatter: function (params) {
          return [
            'Category: ' + params.name,
            'Median: ' + params.value[2],
            'Upper Quartile: ' + params.value[3],
            'Lower Quartile: ' + params.value[1],
            'Outliers: ' + params.outliers.join(', '),
          ].join('<br/>');
        },
      },
    },
  ],
};

5. 初始化 ECharts 实例并设置配置：

const chart = echarts.init(document.getElementById('boxplot'));
chart.setOption(option);

这样，ECharts 箱线图就会显示异常值。在这个例子中，我们使用了 tooltip.formatter 函数来自定义鼠标悬停时显示的信息，包括异常值。