大屏-echart之叠加柱形图

echart 版本： 5.4.0

类目轴-> type: category
值轴 -> type： value

1、如果让两个bar重合
series.barGap: ‘-100%’ -> 必须放在最后一个上
series.zlevel: 2 -> 上面的一个设置

2、类目轴得刻度，标签和bar在一条线上
yAxis.boundaryGap = true && yAxis.axisTick.alignWithLabel = true && 类目轴

3、Bar上得值在bar很短得时候做兼容，这里做的是隐藏

完整配置：

const options = {
   legend: {
     itemWidth: 23,
     itemHeight: 14,
     padding: 35,
     itemGap: 60,
     textStyle: {
       color: '#fff',
       fontSize: 16,
       padding: 10
     },
     selectedMode: false
   },
   grid: {
     left: "3%",
     right: "3%",
     bottom: "3%",
     containLabel: true,
   },
   xAxis: {
     show: true,
     type: 'value',
     min: 0,
     max: 100,
     splitNumber: 10, // value轴上刻度分割
     splitLine: { // 背景分割竖线
       show: true,
       lineStyle: {
         color: 'rgba(142, 227, 255, .3)'
       },
     },
     axisLine: {
       show: true,
       symbol: ['none', 'arrow'], // x轴末端箭头，'arrow'->两端都有
       symbolSize: [10, 10], // 箭头大小
       lineStyle: {
         width: 1,
         color: 'rgba(142, 227, 255, 1)', // x坐标线
       },
     },
     axisLabel: {
       show: true,
       margin: 20,
       formatter: '{value}%',
       textStyle: {
         fontSize: 12,
         color: 'rgba(166, 205, 255, 1)', // x坐标文字
       },
     },
     axisTick: { // 设置x轴刻度
       show: true,
     },
     axisPointer: { // 鼠标经过时得
       show: true,
       type: 'shadow',
       label: {
         color: '#fff'
       },
       shadowStyle: {}, // type === 'shadow'
       lineStyle: {}, // type === 'line'
     }
   },
   yAxis: {
     type: 'category',
     boundaryGap: true, // category轴的柱子是否在刻度上 false->是
     data: dataList.map((item) => `${item.areaName}`), // 在category中有效
     splitLine: { // 背景分割横线
       show: true,
       lineStyle: {
         color: 'rgba(142, 227, 255, .3)',
       },
     },
     axisLabel: { // 刻度文字
       margin: 10, // 文字与轴得间距
       textStyle: {
         fontSize: 12,
         color: 'rgba(166, 205, 255, 1)'
       },
     },
     axisLine: { // y坐标线
       show: true,
       lineStyle: {
         color: 'rgba(142, 227, 255, 1)'
       },
     },
     axisTick: { // y轴刻度
       show: true,
       alignWithLabel: true, // 刻度和标签对其 boundaryGap=true & category
       length: 5,
       lineStyle: {}
     },
     axisPointer: { // 鼠标经过时得
       show: true,
       type: 'shadow',
       label: {
         color: '#fff'
       },
       shadowStyle: {}, // type === 'shadow'
       lineStyle: {}, // type === 'line'
     }
   },
   series: [
     {
       type: 'bar',
       name: '占用',
       barWidth,
       zlevel: 2,
       data: dataList.map(function (item) {
         return {
           ...item,
           value: item.fullRate,
         }
       }),
       label: {
         show: true,
         position: 'inside',
         align: 'center',
         verticalAlign: 'middle',
         lineHeight: 16,
         formatter: function (params) {
           const { data: { value } } = params
           const rate = value < 10 ? '' : `${params.data.value}%`
           return rate
         },
         color: '#fff',
         fontSize: 12,
       },
       itemStyle: { // 设置柱形
         borderRadius: 10,
         color: {
           type: 'linear',
           x: 0,
           y: 0,
           x2: 0,
           y2: 1,
           colorStops: [{
             offset: 0, color: '#02e1a1'
           }, {
             offset: 0.8, color: '#05a778'
           }],
           global: false
         }
       },
     },
     {
       type: 'bar',
       name: '空闲',
       barWidth: barWidth,
       barGap: '-100%',
       data: dataList.map(function (item) {
         return {
           ...item,
           value: 100,
         };
       }),
       label: {
         show: true,
         position: ['94%', '60%'],
         align: 'center',
         verticalAlign: 'middle',
         lineHeight: 16,
         formatter: function (params) {
           const { data: { freeRate } } = params
           const rate = freeRate < 11 ? '' : `${params.data.freeRate}%`
           return rate
         },
         color: '#fff',
         fontSize: 12,
       },
       itemStyle: {
         borderRadius: 10,
         color: {
           type: 'linear',
           x: 0,
           y: 0,
           x2: 0,
           y2: 1,
           colorStops: [{
             offset: 0, color: '#01bfff'
           }, {
             offset: 0.2, color: '#74cbff'
           }],
           global: false
         }
       }

     },
   ],
 };