vue 前端使用最新版eachrts画箱线图，并修改横坐标为自己需要的内容（附代码）

之前我发过一次，前端vue使用echarts画箱线图，并修改横坐标为自己需要的内容的代码：

链接：vue 中画echarts 箱线图代码，并修改横坐标为自己的数据（多系列箱线图 和单组数据的箱线图，两张图的代码）

但是这个用的是5.1.2版本的echarts画的箱线图，最近我又研究了一下，用最新版本的eachrts画箱线图，可以看看哦，上面那个老版代码也是可以画的。

<template>
  <span>
    <div id="newmain" style="height:500px;width:1000px"></div>
  </span>
</template>

<script>

    import * as echarts from "echarts";
    import dataTool from "echarts/extension/dataTool";


export default {
  name: "hometu",
  mounted() {
    let newmain = echarts.init(document.getElementById('newmain'));
    let option = {
      title: [
        {
          text: 'Michelson-Morley Experiment',
          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内容是修改的横坐标内容的函数
              itemNameFormatter: function (params) {
                switch (params.value) {
                  case 0:
                    return 'tom';
                    break;
                  case 1:
                    return 'kack';
                    break;
                  case 2:
                    return 'lucy';
                    break;
                  case 3:
                    return 'jenny';
                    break;
                  case 4:
                    return 'jelly';
                    break;
                  default:
                    return 'ungrouped';
                }
              }
            }
          }
        },
        {
          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
        }
      ]
    };

    option && newmain.setOption(option);

  },

}
</script>

<style scoped>

</style>