弹窗里面画echarts图 el-popover

<el-popover
                popper-class="punishmentPopover"
                placement="top"
                width="500"
                trigger="click"
              >
                <div id="punishment" ref="punishment1" />
                <div slot="reference" class="type_left" @click="handlePunishment('处分',1)">
                  <p>处分</p>
                  <span>{{punishList.dj}}人</span>
                </div>
              </el-popover>

样式:

<style>
.punishmentPopover {
  background-color: rgba(13, 5, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  z-index: 99999;
}
 
.punishmentPopover .popper__arrow::after {
  border-top-color: rgba(13, 5, 30, 0.9) !important;
}
.punishmentPopover .popper__arrow {
 border-top-color: rgba(255, 255, 255, 0.3) !important;
}
 
.punishmentPopover #punishment {
  width: 350px;
  height: 350px;
}
 
 
</style>
 

方法:

async handlePunishment(type, index) {
      let params = Object.assign({}, this.params);
      params.dataType = type;
      let res = await getAction("/casetrial/getSecondPunish", params);
      let arr = res.data.punishList;
      // console.log(arr, "情况统计下钻");
      let data = [];
      if (arr.length > 0) {
        arr.forEach(item => {
          data.push({
            value: item.count,
            name: item.level
          });
        });
 
        let str = "punishment" + index;
        // console.log(this.$refs[str], "this.$refs[str]");
        const myChart = this.$echarts.init(this.$refs[str]);
        // console.log(myChart, "myChart this.$refs[str]");
        this.drawPunishmentEcharts(myChart, type, data);
      }
    },
 
    // 情况统计下钻 图形
    drawPunishmentEcharts(myChart, title, echartData) {
      const colorList = [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: "#006AFF" // 0% 处的颜色
            },
            {
              offset: 0,
              color: "#8CE2FF" // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#92F092" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#4BB84B" // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#8BA7D8" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#8FABDA" // 100% 处的颜色
            }
          ]
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#22B3FF" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#62C6FA" // 100% 处的颜色
            }
          ]
        }
      ];
      let formatNumber = function(num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let option = {
        color: colorList,
        title: {
          text: title,
          show: true, // 是否显示标题,默认 true。
          padding: [10, 0, 5, 0],
          textStyle: {
            color: "white",
            fontSize: fontChart(18),
            fontFamily: "Alibaba PuHuiTi",
            fontWeight: 600
          },
          left: "center"
        },
        tooltip: {
          trigger: "item",
          borderColor: "rgba(255,255,255,.3)",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          padding: 5,
          textStyle: {
            color: "#fff"
          }
        },
        legend: {
          // orient: "vertical",
          bottom: 10,
          // right: 5,
          itemWidth: 20,
          itemHeight: 10,
          itemGap: 15,
          borderRadius: 4,
          textStyle: {
            color: "white",
            fontFamily: "Alibaba PuHuiTi",
            fontSize: fontChart(16),
            fontWeight: 400
          }
        },
        series: [
          {
            type: "pie",
            roseType: "radius",
            radius: ["5%", "50%"],
            center: ["50%", "45%"],
            data: echartData,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: "#15213F",
                borderWidth: 4
              }
            },
            label: {
              normal: {
                formatter: e => {
                  let newStr = " ";
                  let start = 0; //开始截取位置
                  let end = 0; //截取结束位置
                  const name_len = e.name.length; //每个内容名称的长度
                  const max_name = 5; //每行显示的最大长度
                  const new_row = Math.ceil(name_len / max_name); //显示行数
                  if (name_len > max_name) {
                    //如果名称长度大于每行最大显示长度，则
                    for (let i = 0; i < new_row; i++) {
                      //循环行数
                      let old = ""; //每次截取的字符
                      start = i * max_name; //截取的起点
                      end = start + max_name; //截取的终点
                      if (i == new_row - 1) {
                        //如果是最后一行
                        old = e.name.substring(start);
                      } else {
                        old = e.name.substring(start, end) + "\n"; //截取内容加换行
                      }
                      newStr += old; //拼接字符串
                    }
                  } else {
                    //否则不变显示
                    newStr = e.name;
                  }
                  return (
                    "{value|" +
                    formatNumber(e.value) +
                    "%" +
                    "}\n{name|" +
                    newStr +
                    "}"
                  );
                },
                rich: {
                  name: {
                    fontSize: fontChart(14),
                    color: "#F0F0F0"
                  },
                  value: {
                    fontSize: fontChart(18),
                    fontWeight: "bolder",
                    color: "#F0F0F0"
                  }
                },
                overflow: "none"
              }
            },
            labelLine: {
              length: 1,
              length2: 5
            }
          }
        ]
      };
 
      option && myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },