一.需求
1.后端返回的是堆叠图的每个类型的数量组成的数组，需要计算出每一个横向柱状里每个类型占的百分比，然后显示
2.点击某个柱状时，弹窗tooltip里要展示这个柱状中每个类型的百分比和数量

二.效果图


注意：图片里由于有些数据是0，所有呈现时重叠了

三.代码如下

  <div id="main" style="width:100%"></div>
  //要给echarts容器一个宽度或者高度,要不然echarts不会展示

 drawChart(){ //渲染echarts的函数
     var xxx={}
     var option2={//echarts的配置项
    tooltip: { //弹窗tooltip内展示的内容和样式
        trigger: 'axis',
        axisPointer: {  // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' 或'shadow'
        },
        backgroundColor:"rgba(255, 255, 255, 0.93)",//弹窗背景色
        extraCssText:'box-shadow:0 0 0',//设置弹窗的阴影
    formatter: function (params) {//弹窗内容
            //弹窗里圆点的对应的样式，用模板字符串的方式
            let dotColor = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[0].color + '"></span>'
            let dotColor2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[1].color + '"></span>'
            let dotColor3 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[2].color + '"></span>'
            let dotColor4 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[3].color + '"></span>'
            let dotColor5 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[4].color + '"></span>'
           //弹窗里的内容+样式
            return '<span style="font-size:14px;font-weight: 600;color: #20253B">'+params[0].axisValue +'</span>'+ '<br>' +
                   dotColor + '<span style="color: #20253B">'+ params[0].seriesName +'</span>'+'：'+(params[0].data)+'%' + " " +'<span style="color:'+params[0].color+'">'+xxx[params[0].axisValue][0]+'</span>'+ '<br>' +
                   dotColor2 +'<span style="color: #20253B">'+ params[1].seriesName + '</span>'+'：' +(params[1].data)+'%' + " " +'<span style="color:'+params[1].color+'">'+xxx[params[1].axisValue][1]+'</span>'  + '<br>' +
                   dotColor3 +'<span style="color: #20253B">'+ params[2].seriesName + '</span>'+'：' +(params[2].data)+'%' + " " +'<span style="color:'+params[2].color+'">'+xxx[params[2].axisValue][2]+'</span>'  + '<br>' +
                   dotColor4 +'<span style="color: #20253B">'+params[3].seriesName + '</span>'+'：' +(params[3].data)+'%' + " " +'<span style="color:'+params[3].color+'">'+xxx[params[3].axisValue][3]+'</span>'  + '<br>' +
                   dotColor5 +'<span style="color: #20253B">'+params[4].seriesName + '</span>'+'：' +(params[4].data)+'%' + " " +'<span style="color:'+params[4].color+'">'+xxx[params[4].axisValue][4]+'</span>'  + '<br>'
          }
},
    legend: {
        selectedMode:false,
        data: ['完成', '较好', '一般', '较差', '无进展'],
        bottom: '4%',
        left: 'center',
        itemHeight: 9,
          itemWidth:9,
          itemGap: 25,
          icon: "circle",
          textStyle: {
           fontSize: 12,
           color: '#8A90A3'
          },
    },
    color:["#5CA4FC","#7F5EF3","#FBCF36","#42D6CC","#D9DCE4"],
    grid: {
        left: '3%',
        right: '4%',
        bottom: '8%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        show: false
    },
    yAxis: {
        type: 'category',
        data: [],
        axisLabel: {//y轴文字的配置
                textStyle: {
                     color: "rgba(138, 144, 163, 1)",
                },
        },
        axisLine: {//y轴线的颜色以及宽度
                show: true,
                lineStyle: {
                    color: "#ECEDF0",
                    width: 1,
                    type: "solid"
                },
            }
    },
    series: [
        {
            name: '完成',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideLeft',//完成这个类型的数据在该段柱状里面靠左呈现
                formatter: '{c}%',
                textStyle: {
                fontSize: 10,
                }
            },
            data:[]
        },
        {
            name:  '较好',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideLeft',//较好这个类型的数据在该段柱状里面靠左呈现
                formatter: '{c}%',
                 textStyle: {
                fontSize: 10,
                }

            },
            data:[]
        },
        {
            name: '一般',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideLeft',//一般这个类型的数据在该段柱状里面靠左呈现
                formatter: '{c}%',
                 textStyle: {
                fontSize: 10,
                }

            },
            data: []
        },
        {
            name:  '较差',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideLeft',//较差这个类型的数据在该段柱状里面靠左呈现
                formatter: '{c}%',
                 textStyle: {
                fontSize: 10,
                }

            },
            data: []
        },
        {
            name: '无进展',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideLeft',//无进展这个类型的数据在该段柱状里面靠左呈现
                formatter: '{c}%',
                 textStyle: {
                fontSize: 10,
                }

            },
            data:[]
        }
    ]
      }
      //将后端返回的y轴的数据，即部门名称
      var part = this.part
      //后端返回的5个类型分别的数量组成的5个数组
      var data = this.zhudata
      var percent = [[],[],[],[],[]];
      //提前定义一个数组，里面每一个数组是承接计算好的百分比组成一个类型的数组
       var sum = [];
       //定义一个数组，里面的数是每个柱状里数量相加的总数
       for (var i = 0; i < 5; i++) {
       //由于只有5个类型，所以最外层循环5次
          for (var j = 0; j < part.length; j++) {
          //先循环Y轴部门的长度
                const n = sum[j] || 0
                sum[j] = data[i][j] + n
                //计算每个柱状的数量的总数
          }
       }
       for (var i = 0; i < part.length; i++) {
          for (var j = 0; j < 5; j++) {
               var v = (data[j][i]/sum[i] * 100).toFixed(1);
               //计算此类型占整个柱状的百分比，取一位小数
                  if (sum[i] === 0) v = '0.0'
                  percent[j][i] = v
                  //再把百分比竖向调转位置放到数组里
                }
          }
        part.forEach((item,i)=>{
        //将部门循环
          let arr = []
          for (let j = 0; j < data.length; j++) {
            arr.push(data[j][i])
            //把每个横向数组的数据竖向取值变成一个数组
          }
          xxx[item] = arr
          //把部门每一项item当做一个动态key，将计算好的数据当做value循环插入进xxx这个数组里；等于将部门和数据关联成key和value的形式
        })

        for (var i = 0; i < 5; i++) {
              option2.series[i].data = percent[i];
              //把计算好的百分比的每一个数组循环挨个赋值到配置项option2里的每个类型的数据series[i]中的数据源
            }
            for (let i = 0; i < part.length; i++) {
              option2.yAxis.data[i] = part[i]
              //把部门数据循环赋值到配置项option2里的y轴数据
            }       
      //渲染echarts
      let myChart = this.$echarts.init(document.getElementById('main'))
      myChart.setOption(option2);
      //echarts容器高度随后端返回的动态数据自适应
      var autoHeight = option2.yAxis.data.length* 50 + 150
      myChart.getDom().style.height = autoHeight + "px"
      myChart.getDom().childNodes[0].style.height = autoHeight + "px"
      myChart.getDom().childNodes[0].childNodes[0].setAttribute("height",autoHeight)
      myChart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + "px"
      myChart.resize()
   },