vue echarts 合须图/箱线图 配置项 后端返回大数据处理结果的情况

一 、简介

Boxplot 中文可以称为『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』，是一种用作显示一组数据分散情况资料的统计图。它能显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。

二、配置项 option说明

主要关注渲染数据结构，其他的配置项内容 跟别的图表类似。

 数据是二维数组

[ [min, Q1, median (or Q2), Q3, max], [min, Q1, median (or Q2), Q3, max],...]

每一组[min, Q1, median (or Q2), Q3, max]渲染一个箱线图，

为了生成这样的数组，数据来源有两种：

1. 数据源数据不多，前端可以做处理，借助echarts.dataTool.prepareBoxplotData来做简单处理；

2. 数据源数据量很大，交给后台做处理，返回给前端处理结果。

本文就第二种情况做代码说明，第一种情况可以参考官网示例。

 三、代码示例

1. 后台返回结果(对象数组)处理成目标数据结构：

this.seriesData = this.initData.map(item=>{
    return {
        name: item.name,  // 从你的数据结构中找到对应箱线图单项的名字,即x轴的label
        type: `boxplot`,
        itemStyle: { color: `#3ba1ff` }, // 箱线图盒子体背景颜色
        data: [
            [
              item.min,
              item.q1,
              item.mediman,
              item.q3,
              item.max,
            ],
          ]
    }
})

 option中series为上方的this.seriesData，其他设置项同其他图表

const option = {
  tooltip: { trigger: `item`, formatter: this.formatter }, // formatter可不设置
  color: `#8d8d8d`, // 箱线图线框的颜色
  grid: {
    left: 0,
    right: 10,
    bottom: 10,
    top: 20,
    containLabel: true,
  },
  xAxis: { // 此处设置与其他图表类似
    type: `category`,
    axisLine: {
      //坐标轴轴线相关设置
      show: false,
    },
    axisLabel: {
      // 坐标轴刻度标签的相关设置
      show: true,
      interval: 0,
      showMaxLabel: true,
    },
    axisTick: {
      //刻度相关设置
      show: false, //让刻度隐藏
    },
  },
  yAxis: {  // 此处设置与其他图表类似
    type: `value`,
    splitArea: { show: false },
    axisLine: { lineStyle: { color: `#8d8d8d` } },
  },
  series: this.seriesData,
}

// 鼠标移入箱须图提示信息，可自定义，可使用默认值
formatter (params) {
  let txt = ``
  txt +=
    `${params.name}<br><hr>`
    + `最大值：${params.data[5]}%`
    + `<br>上四分位数：${params.data[4]}%`
    + `<br>平均数：${params.data[3]}%`
    + `<br>下四分位数:${params.data[2]}%`
    + `<br>最小值：${params.data[1]}%`
    + `<br>`
  return txt
},

 四、文档附件

文档： Documentation - Apache ECharts