echarts 叠加柱状图柱顶显示百分比

 

采坑：

1. formatter不起作用：使用 formatter: function (params) 只能直接setOption，不能使用this.option

2. 柱顶的百分比其实是一个另一截的柱，只是颜色为白色，值小于1；然后使用 formatter: function展示为百分比

    renderChart () {
      // 线上问题总量柱状图，按产研部门统计（如教学、服务运营）
      var chart1Line = echarts.init(document.getElementById('chart1'))
      if (this.caughtStatus === '1') {
        // var optionChart2 = this.echarts.init(document.getElementById('allData'))
        if (this.departments.restData.length !== 0) {
          chart1Line.setOption({
            grid: {
              bottom: '25%'
            },
            title: {
              text: '线上问题拦截率（' + this.departments.caught + '%）',
              x: 'center'
            },
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                console.log('22')
                console.log(params)
                var display = params[0].axisValue + '<br>已拦截：' + params[0].data + '<br>未拦截：' + params[1].data + '<br>拦截率：' + params[2].data * 100 + '%'
                return display
                // if (params.data > 0) {
                //   return (params.data * 100) + '%'
                // } else {
                //   return params.data
                // }
              }
            },
            legend: {
              orient: 'vertical',
              x: '85%',
              y: 'top',
              itemWidth: 15,
              itemHeight: 15,
              data: ['已拦截', '未拦截', '']
            },
            xAxis: {
              name: '',
              type: 'category',
              data: this.departments.departments,
              axisLabel: {
                interval: 0,
                rotate: -30
              }
            },
            yAxis: {
              type: 'value',
              name: '单位(个)'
            },
            series: [
              {
                name: '已拦截',
                type: 'bar',
                stack: '拦截情况',
                data: this.departments.restData,
                itemStyle: {
                  color: '#3FBB49'
                },
                label: {
                  show: true,
                  position: 'inside',
                  textStyle: {
                    color: 'black'
                  }
                },
                barWidth: '40px'
              },
              {
                name: '未拦截',
                type: 'bar',
                stack: '拦截情况',
                data: this.departments.onlineData,
                itemStyle: {
                  color: '#FF8849'
                },
                label: {
                  show: true,
                  position: 'inside',
                  formatter: function (params) {
                    if (params.value > 0) {
                      return params.value
                    } else {
                      return ''
                    }
                  },
                  textStyle: {
                    color: 'black'
                  }
                },
                barWidth: '40px'
              },
              {
                name: '拦截率',
                type: 'bar',
                stack: '拦截情况',
                data: this.departments.caughtRate,
                itemStyle: {
                  color: '#FFFFFF'
                },
                label: {
                  show: true,
                  position: 'insideBottom', // 关键
                  formatter: function (params) {
                    if (params.data > 0) {
                      return (params.data * 100) + '%'
                    } else {
                      return ''
                    }
                  },
                  textStyle: {
                    color: 'black'
                  }
                },
                barWidth: '40px'
              }
            ]
          })
        }