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要是没有需求就可以不填 默认是在第一位 为 0tempSeries[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
}

echarts-箱线图(盒须图)相关推荐

echart自定义图分享之自定百分比的(箱线图/盒须图)
echarts自定义图之自定百分比的(箱线图/盒须图): 分享一些自己在工作中遇到的非常规图 ` 创作原因:因客户需要指定样式的箱线图图(七分位,存在非固定分位:10%,90%,并且能查看每个分位的具 ...
【Tableau 图表大全21】之箱型图(盒须图)
文章目录箱型图样式构建箱形图 GIF演示箱型图样式箱形图,也称为箱须图,用于显示沿轴的分布.它通常分别在列和行上有一个维度和一个度量.尽管 Tableau 中的"显示我"功 ...
QT实现绘制箱须图(盒须图)
QT实现绘制箱须图项目简介项目技术项目展示主要源码片段解析项目简介显示了如何创建箱须图. 显示了如何从文件中读取非连续数据,对其进行排列并查找箱须图的中位数. 项目技术 qt5.12,Qt ...
echarts 盒须图配置
下载依赖包地址 cv工程师: <!DOCTYPE html> <html><head><meta charset="utf-8">& ...
Tableau:如何添加参考线、趋势线、参考区间、分布区间、盒须图?
序言 Tableau中的"分析"栏提供了很多功能(如下图),这些功能可以向Tableau的工作表添加各种辅助线和辅助区间.通过对其进行归类,可以将这些辅助线.辅助区间分为:参考 ...
Tableau图表 • 盒须图、抖动图
盒须图,又叫箱线图,是一种用作显示一组数据分散情况资料的统计图.盒须图能够比较直观的显示数据集的分散程度.异常值等信息. 盒须图盒须图基础盒须图包括六个统计量:最小值,下四分位数(Q1),中位数, ...
从明日方舟入手数据统计--盒须图
(封面源自必应,侵删)(多图预警) 由于此文的目的是数据统计学习而非游戏攻略且时间仓促,文中所用数据皆出自题主自己的明日方舟干员库,可能与实际数据有所出入.如需要权威数据请去明日方舟官方wiki 引子 ...
漏刻有时数据可视化Echarts组件开发(27)：盒须图(箱线图)前后端php交互的实战案例
Boxplot 中文可以称为『箱形图』.『盒须图』.『盒式图』.『盒状图』.『箱线图』,是一种用作显示一组数据分散情况资料的统计图.它能显示出一组数据的最大值.最小值.中位数.下四分位数及上四分位数. ...
保姆式教学：用Tableau制作盒须图（箱线图）
盒须图(箱线图)是一种常用的统计图形,用来显示数据的位置.分散程度和异常值等.箱线图主要包括6个统计量:下线.第一四分位数.中位数.第三四分位数.上限和异常值.通过绘制盒须图,观测数据在同类群体中的位 ...

echarts-箱线图(盒须图)

echarts-箱线图(盒须图)相关推荐

最新文章

热门文章