ECharts绘制盒须图

一、箱线图

反应一组数据的分布情况，通过四分位数以图形的方式展示数值数据的局限性、分布和偏度组的方法。

四分位数：即把所有数值由小到大排列并分成四等份，处于三个分割点的数值就是四分位数。

下四分位：第一四分位Q1：25%

中位数：第二四分位Q2：50%

上四分位：第三四分位 Q3: 75%

上极限，下极限：异常值

IQR：四分位距，Q3-Q1，盒子的宽度

1.整体越长，数据分布越广，整体越短，数据分布越密集

2.（25%-75%中间一半的数据分布情况）箱子越长，数据越分散，箱子越短，数据越集中

3.箱子的偏向性，箱子靠下，正态分布峰值越靠左，箱子靠上偏高，正态分布值越靠右

4.中位数：中位数的水平，不受极大值极小值影响的平均水平。

黑线在箱子的位置：中间，偏上，偏下

中间：中位数= 均值，正常分布

偏上：中位数>均值，负偏分布（左偏态）左侧长尾较长的分布

偏下：中位数<均值，正偏分布（右偏态）

检测异常值：outlier

二、图例

<template>
  <div id="main"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  // 1.基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));
  // 2.指定图表的配置项和数据, Echarts 图的配置
  var option = {
    title: [
      {
        text: '基础盒须图',
        left: 'center'
      },
      {
        text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
        borderColor: '#999',
        borderWidth: 1,
        textStyle: {
          fontWeight: 'normal',
          fontSize: 14,
          lineHeight: 20
        },
        left: '10%',
        top: '90%'
      }
    ],
    dataset: [
      {
        // prettier-ignore
        source: [
          [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
          [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
          [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
          [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
          [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
        ]
      },
      {
        transform: {
          type: 'boxplot',
          config: { itemNameFormatter: 'expr {value}' }
        }
      },
      {
        fromDatasetIndex: 1,
        fromTransformResult: 1
      }
    ],
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      nameGap: 30,
      splitArea: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: 'km/s minus 299,000',
      splitArea: {
        show: true
      }
    },
    series: [
      {
        name: 'boxplot',
        type: 'boxplot',
        datasetIndex: 1
      },
      {
        name: 'outlier',
        type: 'scatter',
        datasetIndex: 2
      }
    ]
  }
  // 3.使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize()
  })
});
</script>

<style>
#main {
  width: 600px;
  height: 90vh;
}
</style>