echart图表渲染不出？

Question

echarts图表渲染不出来，查看元素canvas标签都没有。
需求：在表格内点击生成echart图
解决：表格数据渲染，其中一列判断为csv属性后，实现在单元格内点击文字，触发dialog弹窗，弹窗中显示echart图表。

模板：

  <span v-else-if="item.prop === 'csv'">
                  <el-dialog
                    title="图表展示"
                    :visible.sync="dialogTableVisible"
                  >
                    <div style="height: 100%; width: 80%">
                      <div
                        id="echart1"
                        style="
                          height: 400px;
                          width: 500px;
                          background-color: green;
                        "
                      ></div>
                      <div
                        id="echart2"
                        style="
                          height: 400px;
                          width: 500px;
                          background-color: pink;
                        "
                      ></div>
                    </div>
                  </el-dialog>
                  <span
                    @click="openEchart"
                    style="color: blue; text-decoration: underline"
                    >图表</span
                  >
                </span>

data:

dialogTableVisible: false

methods:

openEchart() {
      console.log(2222);
      this.dialogTableVisible = true;
      this.$nextTick(() => {
        this.initChart();
      });
    },
    initChart() {
      const echart1 = this.$echarts.init(document.getElementById("echart1"));
      echart1.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },

渲染出来了(可能一开始就渲染出来没注意到)，但是弹窗上不显示，而是后面阴影部分显示出来....

改变渲染时机放到获取数据源方法中去初始化echart容器，控制台报错：Initialize failed: invalid dom。

---

已经解决了：弹窗标签不应该放到表格内，放到表格外等待触发才是正确的。但原理是什么没研究明白。

Answer 1

试试把v-if和v-else换成v-show吧，因为你如果用v-if，条件不成立时，dom还没有生成，你这个时候初始化的时候是拿不到那个容器的

Answer 2

两个点：
1、听到你说是表格，那说明每行点击都会弹出一个chart图对吧？那么我就做一个组件lineEchart.vue或者barEChart.vue等等看你需求。

watch: {
dataSource: {
  deep: true,
  immediate: true,
  handler() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.drawChart()
      }, 500)
    })
  },
},
},

子组件里监听一下数据，然后延时500毫秒，为了就是让页面加载完了，再渲染。

2、另外你页面还有没有其他的chart图一同展示，如果是多视图公用一个组件那么id值一定是个动态的，非固定。id值不比class值。

<div :id="moduleId" style="width: 100%; height: 320px"></div>

var myChart = this.$echarts.init(document.getElementById(this.moduleId)) //图标初始化\