Echarts 图 --- 堆叠柱状图

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {
    textStyle: {
      color: '#7D7D85',
      fontSize: 13,
      padding: [0, 0, 0, 15]
    },
    top: 35,
    itemWidth: 9,
    itemGap: 15,
    icon: 'circle'
  },
  color: ['#3B98FE', '#00C891', '#FFA448', '#FF6977'],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: 60,
    height: 300,
    containLabel: true
  },

  xAxis: {
    type: 'value',
   show: false
  },
  yAxis: {
    inverse: true,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#33383F',
      fontSize: 14,
      // margin: 20,
      inside: true,
      interval:0,
      padding: [0,0,10,0],
      verticalAlign:'bottom',
          formatter: function (value, index) {
                    return ++index+ '  '+value;
                },
    },
    type: 'category',
    data: [
      '康复医院',
      '眼科医院',
      '妇产科医院',
      '呼吸内科',
      'F肿瘤医院',
      '消化内科',
      '儿童医院'
    ].reverse(0)
  },
  series: [
    {
      name: '一级',
      type: 'bar',
      stack: 'total',
      barWidth: 18,
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 14,
        // lineHeight: 36,
        offset: [0, 2]
        // verticalAlign: 'middle'
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, "-", 390, 330, 320]
    },
    {
      name: '二级',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 14,
        // verticalAlign: 'middle'
        formatter: function (params) {
          // console.log(params)
          if (params.data == 0) {
            return '';
          }
          return params.data;
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 0, 101, 134, 90, 230, 0]
    },
    {
      name: '三级',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 14,
        // verticalAlign: 'middle'
        formatter: function (params) {
          if (params.data == 0) {
            return '';
          }
          return params.data.value || params.data;
        }
      },

      emphasis: {
        focus: 'series'
      },
      data: [
        220,
        80,
        191,
        234,
        { value: 290, itemStyle: { borderRadius: [0, 18, 18, 0] } },
        330,
        310
      ]
    },
    {
      name: '四级',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        color: '#FEFEFE',
        fontSize: 14,
        // verticalAlign: 'middle'
        formatter: function (params) {
          console.log(params);
          if (params.data == 0) {
            return '';
          }
          return params.data.value || params.data;
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, { value: 154 }, 0, 100, 410],
      itemStyle: {
        borderRadius: [0, 18, 18, 0],
        color: ''
      }
    }
  ]
};

 

1. 兼容最后一级为0的情况，可用如下数据过滤方法

 

 series: [
          {
            name: "一级",
            type: "bar",
            stack: "total",
            barWidth: this.rem36,
            label: {
              show: true,
              color: "#FEFEFE",
              fontSize: this.rem24,
              // lineHeight: 36,
              offset: [0, 2],
              formatter: function(params) {
                // console.log(params)
                if (params.value == 0) {
                  return "";
                }
                return params.value;
              }
            },

            // emphasis: {
            //   focus: "series"
            // },
            data: this.barData.map(item => {
              if (
                item.opeOneNum != 0 &&
                (item.opeTwoNum == 0 &&
                  item.opeThreeNum == 0 &&
                  item.opeFourNum == 0)
              ) {
                return {
                  value: item.opeOneNum,
                  itemStyle: { borderRadius: [0, this.rem18, this.rem18, 0] }
                };
              }
              return item.opeOneNum;
            })
          },
          {
            name: "二级",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              color: "#FEFEFE",
              fontSize: this.rem24,
              // verticalAlign: 'middle'
              formatter: function(params) {
                if (params.value == 0) {
                  return "";
                }
                return params.value;
              }
            },
            // emphasis: {
            //   focus: "series"
            // },
            data: this.barData.map(item => {
              if (
                item.opeTwoNum != 0 &&
                (item.opeThreeNum == 0 && item.opeFourNum == 0)
              ) {
                return {
                  value: item.opeTwoNum,
                  itemStyle: { borderRadius: [0, this.rem18, this.rem18, 0] }
                };
              }
              return item.opeTwoNum;
            })
          },
          {
            name: "三级",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              color: "#FEFEFE",
              fontSize: this.rem24,
              // verticalAlign: 'middle'
              formatter: function(params) {
                if (params.value == 0) {
                  return "";
                }
                return params.value || params.data;
              }
            },

            // data: [
            //   220,
            //   80,
            //   191,
            //   234,
            //   {
            //     value: 290,
            //     itemStyle: { borderRadius: [0, this.rem18, this.rem18, 0] }
            //   },
            //   330,
            //   310
            // ]
            data: this.barData.map(item => {
              if (item.opeThreeNum != 0 && item.opeFourNum == 0) {
                return {
                  value: item.opeThreeNum,
                  itemStyle: { borderRadius: [0, this.rem18, this.rem18, 0] }
                };
              }
              return item.opeThreeNum;
            })
          },
          {
            name: "四级",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              color: "#FEFEFE",
              fontSize: this.rem24,
              // verticalAlign: 'middle'
              formatter: function(params) {
                // console.log(params);
                if (params.data == 0) {
                  return "";
                }
                return params.data.value || params.data;
              }
            },
            // emphasis: {
            //   focus: "series"
            // },
            data: this.barData.map(item => item.opeFourNum),
            itemStyle: {
              borderRadius: [0, this.rem18, this.rem18, 0],
              color: ""
            }
          }
        ]
      };