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

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

需求搞定~