实现el-table操作列点击弹出echarts

代码：

<el-table-column :width="90">
    <template #default="scope">
      <el-popover placement="left-end" width="550" trigger="click">
        <div>
          <div style="font-size: 18px; margin-left: 10px">近7日传播情况</div>
          <div
            :id="scope.row.index"
            :style="{ width: '500px', height: '350px' }"
          ></div>
        </div>

        <template #reference>
          <el-button
            :key="scope.$index + scope.row.id + '0'"
            @click="handleClick(scope.row)"
            type="primary"
            link
            size="small"
          >
            分析
          </el-button>
        </template>
      </el-popover>
    </template>
  </el-table-column>

方法：

let myChart1 = null;
let myChart2 = null;
let myChart3 = null;

let domId = ref("");
const handleClick = (row) => {
  domId.value = row.index;
  mychart();
};
const mychart = () => {
  setTimeout(() => {
    let myChart = "myChart" + domId.value;
    myChart = echarts.init(document.getElementById(domId.value));
    // 绘制图表
    myChart.setOption({
      grid: {
        // 直角坐标系内绘图网格
        left: "30", //grid 组件离容器左侧的距离,
        //left的值可以是80这样具体像素值，
        //也可以是'80%'这样相对于容器高度的百分比
        top: "10%",
        right: "0",
        bottom: "0",
        containLabel: true, //gid区域是否包含坐标轴的刻度标签。为true的时候，
        // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
        //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
      },
      tooltip: {
        trigger: "item",
        formatter: function (params) {
          let str1 = params.data.name;
          let str2 = params.data.num;
          let str = str1 + "
" + "传播力：" + str2;
          return str;
        },
      },
      xAxis: {
        type: "category",
        data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
      },
      yAxis: {
        type: "value",
        name: "单位：万",
        nameTextStyle: {
          color: "#5c5c5c",
          padding: [0, 50, 0, 0],
        },
      },
      series: [
        {
          name: "传播力",
          type: "line",
          data: [
            {
              name: "第一天",
              value: 193,
              num: 193321.33,
            },
            {
              name: "第二天",
              value: 204,
              num: 204556.73,
            },
            {
              name: "第三天",
              value: 175,
              num: 175284.06,
            },
            {
              name: "第四天",
              value: 218,
              num: 218246.24,
            },
            {
              name: "第五天",
              value: 231,
              num: 231092.75,
            },
            {
              name: "第六天",
              value: 266,
              num: 266247.24,
            },
            {
              name: "第七天",
              value: 335,
              num: 335274.95,
            },
          ],
        },
      ],
    });
    window.onresize = function () {
      // 自适应大小
      myChart.resize();
    };
  }, 200);
};