echarts自定义图之自定百分比的(箱线图/盒须图)：

分享一些自己在工作中遇到的非常规图

`
创作原因：因客户需要指定样式的箱线图图（七分位，存在非固定分位：10%，90%，并且能查看每个分位的具体值）。在查看echarts自带的盒须图后，发现无法支持，便自己写了个。

以下为对应的echarts配置：

option = {tooltip: {trigger: 'item',axisPointer: {type: 'shadow'},formatter:(params)=>{if(params.seriesName!=='Placeholder')return params.seriesName+':'+params.data['sum'];}},grid: {left: '3%',right: '4%',bottom: '3%',top:'10',containLabel: true},xAxis: [{type: 'category',splitLine: { show: false },data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']},{type: 'category',splitLine: { show: false },show:false,},{type: 'category',splitLine: { show: false },show:false,},{type: 'category',splitLine: { show: false },show:false,},{type: 'category',splitLine: { show: false },show:false,},{type: 'category',splitLine: { show: false },show:false,},{type: 'category',splitLine: { show: false },show:false,}],yAxis: {type: 'value'},series: [{name: 'Placeholder',type: 'bar',stack: 'Total',itemStyle: {borderColor: 'transparent',color: 'transparent'},emphasis: {itemStyle: {borderColor: 'transparent',color: 'transparent'}},data: [800, 1700, 1400, 1200, 300, 2000]},{xAxisIndex:1,name: 'min',type: 'bar',stack: 'Total',barWidth:1,itemStyle: {borderColor: '#333',color: 'rgb(96,133,167)',barWidth:0},label: {show: false,position: 'inside'},data: [{value:1100,sum:1900}, {value:1200,sum:1900}, {value:500,sum:1900}, {value:300,sum:1900}, {value:600,sum:1900}, {value:400,sum:1900}]},{xAxisIndex:2,name: '10%',type: 'bar',stack: 'Total',label: {show: false,position: 'inside',formatter:(params)=>{console.log('params',params.data[sum])return params.data[sum]}},barWidth:30,itemStyle: {borderColor: '#333',color: 'rgb(96,133,167)',borderWidth: 0.5,},data: [{value:500,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}]},{xAxisIndex:3,name: '25%',type: 'bar',stack: 'Total',label: {show: false,position: 'inside'},barWidth:50,itemStyle: {borderColor: '#000',color:'rgb(96,133,167)',borderWidth: 0.5,},data: [{value:500,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}]},{xAxisIndex:3,name: '50%',type: 'bar',stack: 'Total',label: {show: false,position: 'inside'},barWidth:50,itemStyle: {borderColor: '#000',color:'#000',borderWidth: 0.5,},data: [{value:30,sum:2400}, {value:30,sum:2400}, {value:30,sum:2400}, {value:30,sum:2400}, {value:30,sum:2400}, {value:30,sum:2400}]},{xAxisIndex:3,name: '75%',type: 'bar',stack: 'Total',label: {show: false,position: 'inside'},barWidth:50,itemStyle: {borderColor: '#000',color:'rgb(96,133,167)',borderWidth: 0.5,},data: [{value:200,sum:2400}, {value:400,sum:2400}, {value:800,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}]},{xAxisIndex:4,name: '90%',type: 'bar',stack: 'Total',label: {show: false,position: 'inside'},barWidth:30,itemStyle: {borderColor: '#000',color: 'rgb(96,133,167)',borderWidth: 0.5,},data: [{value:200,sum:2400}, {value:400,sum:2400}, {value:800,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}]},{xAxisIndex:5,name: 'max',type: 'bar',stack: 'Total',label: {show: false,position: 'inside'},barWidth:1,itemStyle: {borderColor: '#000',color: 'rgb(96,133,167)',borderWidth:2},data: [{value:200,sum:2400}, {value:400,sum:2400}, {value:800,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}, {value:500,sum:2400}]}]
};}

没错，如果各位眼熟的话，这就是柱状图模拟而成的，不同分位用不同的serive数据组，不同宽度的分位用不同的x轴配置。
至于serive的data，采取了对象租，value的为显示的大小，而sum为显示时提供的各分位的值（计算累加即可），这里记得将tooltip的 trigger改为‘item’。

需求搞定~

echart自定义图分享之自定百分比的(箱线图/盒须图)相关推荐

数据分散情况的统计图-盒须图
数据可视化分析时还常常需要观察数据的分布状态,或者查看某一个个体在整体的表现如何,这都需要用到统计分布图,盒须图就是其中的一种. 盒须图它可以用来反映一组或者多组数据的分布情况,因形状像长着胡须的盒子 ...
QCustomPlot之盒须图（十六）
盒须图的组成如下图所示: 在QCustomPlot中创建一个盒须图所需的类:QCPStatisticalBox,为盒须图添加数据主要使用的是addData接口,接口定义如下: void addData ...
盒须图（Boxplot）
盒须图(Boxplot)主要用于对数据分布的显示.对于详细数据的显示通常采用下面几种方法. 最简单的方法是把所有的数据显示在一个散点图上.读者可以直接观察数据点的分布. 但如果数据量很大,数据点就会大 ...
java盒图_盒须图简介 - Java报表工具技术讨论，Style Report 报表专题 - OSCHINA - 中文开源技术交流社区...
盒须图(Boxplot)主要用于对数据分布的显示.对于详细数据的显示通常采用下面几种方法. 最简单的方法是把所有的数据显示在一个散点图上.读者可以直接观察数据点的分布. 但如果数据量很大,数据点就会大 ...
Tableau:如何添加参考线、趋势线、参考区间、分布区间、盒须图?
序言 Tableau中的"分析"栏提供了很多功能(如下图),这些功能可以向Tableau的工作表添加各种辅助线和辅助区间.通过对其进行归类,可以将这些辅助线.辅助区间分为:参考 ...
Echarts -盒须图的使用说明
画盒须图需要dataTool.js !function(e,t){"object"==typeof exports&&"object"==typ ...
盒须图 python_什么是盒须图？
盒须图 python What the heck is a box and whisker chart, and why would you need one? Well, I'm not a sta ...
Tableau图表 • 盒须图、抖动图
盒须图,又叫箱线图,是一种用作显示一组数据分散情况资料的统计图.盒须图能够比较直观的显示数据集的分散程度.异常值等信息. 盒须图盒须图基础盒须图包括六个统计量:最小值,下四分位数(Q1),中位数, ...
ggplot2箱式图两两比较_R语言ggplot2箱线图绘图总结
主要从如何看图.用图与作图三个方面来对箱线图进行理解和总结. 1.看图箱线图概述图1 箱线图概述图2 如图所示,箱线图是将一组数据按照大小顺序排列后进行绘制的,包含6个数据节点,分别表示出数据的上边 ...

echart自定义图分享之自定百分比的(箱线图/盒须图)

echarts自定义图之自定百分比的(箱线图/盒须图)：

echart自定义图分享之自定百分比的(箱线图/盒须图)相关推荐

最新文章

热门文章