echarts-箱线图(盒须图)

搞了一套和官网不同的option，也能渲染出效果来，虽然我不知道这个箱线图有啥意义啊哈哈哈~

需求：填充背景色(中间的横线我是真的无能为力了，有搞出来的小伙伴欢迎留言)

剩下的一些自定义轴刻度显示、tooltip的自定义就很常规了。。。

option: {
        color: ["#007FFF", "#F5A623", "#B620E0", "#F11455"],
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: "10px",
          left: "60px",
          right: "0px",
          bottom: "30px",
        },
        legend: {
          textStyle: {
            color: "#fff"
          },
          icon: 'circle',
          bottom: 0
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          nameGap: 30,
          splitArea: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0,205,225,0.25)",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(0,205,225,0.25)",
            },
          },
        },
        yAxis: {
          type: "value",
          splitArea: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            formatter: function (value) {
              return parseFloat(value).toFixed(2) + "%";
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0,205,225,0.25)",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "transparent",
            },
          },
        },
        series: [],
      },

这个是基本的option

数据填充时 顺序为：

["base", "min", "Q1", "median", "Q3", "max"]

和平时的习惯相反的

和官网不同的是series中的data

let tempSeries = [];
// _this.plateData 为请求回来的数据
          tempSeries = new Array(_this.plateData.length).fill().map((v,i) => {
            return {  
              name: _this.plateData[i].fundName,
              type: 'boxplot',
              itemStyle: {
                color: _this.option.color[i]    // 这里就填充了箱体的颜色，同时也会覆盖中间那跟横线的颜色
              },
              data: []
            }
          })

_this.plateData.forEach((ele, eleIndex) => {
   let tempArr = new Array();
   tempArr.push(ele.min, ele.q1, ele.median, ele.q3, ele.max)    // base要是没有需求就可以不填 默认是在第一位 为 0
   tempSeries[eleIndex].data.push(tempArr)
})

配置tooltip

// tooltip
_this.option.tooltip.formatter = (params) => {
    let txt = '';
    txt += params.seriesName + '<br>' 
        + params.marker + '上限值：' + params.data[5] + '%' + '<br>' 
        + params.marker + '上四分位数：' + params.data[4] + '%' + '<br>' 
        + params.marker + '中位数：' + params.data[3] + '%' + '<br>' 
        + params.marker + '下四分位数:' + params.data[2] + '%' + '<br>' 
        + params.marker + '下限值：' + params.data[1] + '%' + '<br>' 
    return txt
}

标签：线图,color,tooltip,盒须,params,marker,ele,data,echarts
来源： https://blog.csdn.net/heyNewbie/article/details/122219427