vue echart Initialize failed: invalid dom.

vue echart显示线型图报错

原因：绘制图标的方法中，this.$refs.line_div为undefined.

methods:{
	drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.line_div);
        // 绘制图表
        myChart.setOption({
          tooltip: {
            backgroundColor: "#00B7B8",
            trigger: "axis",
            axisPointer: {
              type: "none",
            },
            formatter: '<span style="color:#fff">{b0}: {c0}</span>',
          },
          grid: {
            left: "2%",
            right: "2%",
            bottom: "14%",
            top: "16%",
            containLabel: true,
          }, //表格位置
          xAxis: {
            axisLabel: {
              color: "#87A0DC",
            },
            axisLine: {
              lineStyle: {
                color: "#6076AD",
                opacity: 1,
              },
            },
            axisTick: {
              lineStyle: {
                color: "#6076AD",
                opacity: 0,
              },
            },
            type: "category",
            data: this.xData,
          },
          yAxis: {
            type: "value",
            name: "单位：万元",
            nameLocation: "end",
            splitLine: {
              lineStyle: {
                color: "#6076AD", //横轴的线线颜色
                opacity: 0.15,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#87A0DC", //y轴的值颜色
                opacity: 0.5,
              },
            },
            axisTick: {
              lineStyle: {
                color: "#87A0DC",
                opacity: 0,
              },
            },
            axisLabel: {
              color: "#87A0DC",
            },
          },
          series: [{
            symbol: "none",
            itemStyle: {
              normal: {
                color: "#ffcc00",
                borderRadius: 200,
                // 添加渐变颜色
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: this.color1,
                  },
                  {
                    offset: 1,
                    color: this.color2,
                  },
                ]),
              }, 改变折线点的颜色
              lineStyle: {
                color: "#409EFF",
              }, //改变折线颜色
            },
            name: "日期",
            data: this.yData,
            type: "line",
            areaStyle: {},
            smooth: true,
          }, ],
        });
      },
}

解决办法：在相应调用drawline的地方延时加载即可。

setTimeout(() => {
     this.drawLine();
}, 200);

结果：