echarts-箱线图(盒须图)

2021-12-29 16:58:56 阅读：355 来源： 互联网

标签：线图 color tooltip 盒须 params marker ele data 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

echarts-箱线图(盒须图)