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’。

需求搞定~