el-table树状表格popover弹窗中显示不出Echarts图表

Question

  <el-table-column
          prop="name"
          align="center"
          label="name"
          sortable="custom"
        >
<template slot-scope="scope">
            <el-popover
              trigger="hover"
              placement="top"
              :open-delay="500"
              @after-enter="
                createChart( scope.row.id)
              "
            >
              <div
                :ref="scope.row.id"
                style="width: 200px; height: 200px"
              ></div>
<div slot="reference" class="name-wrapper">
                {{ scope.row.name }}
              </div>
              </el-popover>
          </template> 
        </el-table-column>


 createChart(e) {
    
      var myChart = this.$echarts.init(this.$refs[e]);
var option = {
            title: {
              text: "xx",
            },
            tooltip: {},
            legend: {
              data: [""],
            },
            xAxis: {
              data: ["1", "2", "3", "4", "5", "6"],
            },
            yAxis: {},
            series: [
              {
                name: "",
                type: "bar",

                data: [5, 20, 36, 10, 10, 20],
                itemStyle: {
                  color: "#1890ff",
                },
              },
            ],
          };
          myChart.setOption(option);
}

在非树状表格是没问题的，id也是唯一的

Answer 1

如果显示正常的东西，没问题，只是echarts无法显示，你可以把echarts放外面试试，如果也能显示，就说明是echarts的问题，你打印一下myChart看看可不可以获取到容器dom，如果可以获取到，则说明option有问题。