javascript - 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

两个点：
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)) //图标初始化\    

Answer 2

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

Answer 3

这个问题出现的原因可能是你在初始化echarts实例的时候，DOM元素还没有被渲染出来。你在initChart方法中使用了this.$echarts.init(document.getElementById("echart1"))来初始化echarts实例，但是当该方法被调用的时候，可能DOM元素还未被渲染出来，因此出现了"Initialize failed: invalid dom"的错误。

你可以尝试将初始化echarts实例的代码放到Vue的生命周期钩子mounted中，这样可以确保在DOM元素被渲染出来之后再进行初始化。另外，你在openEchart方法中调用了this.initChart()，但是这个方法并没有被定义为一个Vue的方法，而是作为了一个普通的方法。因此，你需要将这个方法放到Vue的methods对象中。

下面是修改后的代码：

<template>  <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></template><script>export default {  data() {    return {      dialogTableVisible: false,    };  },  methods: {    openEchart() {      console.log(2222);      this.dialogTableVisible = true;    },    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],          },        ],      });    },  },  mounted() { // 在DOM挂载后执行初始化操作    this.initChart(); // 在mounted钩子中调用initChart方法初始化echarts实例。  },};</script>