vue使用echarts实现箱线图

<template>
  <div>
    <div id="main"
         style="height:500px;width:600px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import dataTool from "echarts/extension/dataTool";
export default {
  data() {
    return {};
  },
  watch: {},
  // 监听
  computed: {},
  // 计算属性
  mounted() {
    var myChart = echarts.init(main);
    myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
    var data = echarts.dataTool.prepareBoxplotData([
      [
        400,
        200,
        1070,
        630,
        850,
        950,
        980,
        980,
        880,
        1000,
        980,
        930,
        100,
        760,
        810,
        1000,
        1000,
        960,
        960,
      ],
    ]);
    let option = {
      title: [
        {
          text: "年龄分布箱体图",
          left: "center",
          textStyle: {
            fontSize: 20,
            color: "green",
          },
        },
      ],
      tooltip: {
        trigger: "item", //触发类型,数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        axisPointer: {
          //指示器类型。
          type: "shadow",
        },
      },
      grid: {
        //直角坐标系网格。
        //show: true,//default: false
        left: "10%",
        right: "10%",
        bottom: "15%",
        //borderWidth: 1,
        //borderColor: '#000',
      },
      xAxis: {
        type: "category", //'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
        show: false,
      },
      yAxis: {},
      series: [
        {
          name: "boxplot", //箱线图
          type: "boxplot",
          hoverAnimation: true,
          itemStyle: {
            borderColor: "#108EE9", //boxplot图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
          },
          data: data.boxData,
          tooltip: {
            formatter: function (param) {
              return [
                "类目名 " + param.name + ": ",
                "upper: " + param.data[5],
                "Q3: " + param.data[4],
                "median: " + param.data[3],
                "Q1: " + param.data[2],
                "lower: " + param.data[1],
              ].join("<br/>");
            },
          },
        },
        {
          name: "异常值", //异常值
          type: "scatter", //分散
          data: data.outliers,
        },
      ],
    };

    console.log(data.outliers, "异常值");
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    setTimeout((_) => myChart.hideLoading(), 100);
    // setTimeout(myChart.hideLoading(),10000)
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
</style>

具体效果如下图：