解决报错model.js?e0d3:494 Uncaught TypeError: Cannot read properties of undefined(reading ‘getAttribute‘

导读:本篇文章讲解 解决报错model.js?e0d3:494 Uncaught TypeError: Cannot read properties of undefined(reading ‘getAttribute‘,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

报错

在这里插入图片描述
右侧console 控制台向拖动 会报这个错误
在这里插入图片描述

原因

原因是html的执行顺序是从上到下,在标签还没有加载的时候该方法就被调用了
加载顺序的问题

修改前:

解决报错model.js?e0d3:494 Uncaught TypeError: Cannot read properties of undefined(reading ‘getAttribute‘

修改后:

在这里插入图片描述

this.init() : 是 echart图根据窗口大小进行渲染的方法
this.initChart():是echart图进行初始化以及数据赋值渲染的方法

总结

this.init() 应放在数据方法前面调用(因为html的执行顺序是从上到下的)

完整代码

<template>
  <div
    class="chart"
    ref="Echart"
    :style="{ width: '240px', height: '200px' }"
  ></div>
</template>

<script>
export default {
  name: "lineChart",
  props: {
    //接受父组件传递来的数据
    labelList: Array,
    xAxisList: Array,
  },
  data() {
    return {};
  },
  watch: {
    labelList: function (newQuestion, oldQuestion) {
      this.initChart();
    },
  },
  mounted() {
    this.init();
    this.initChart();
  },
  methods: {
    init() {
      const self = this; //因为箭头函数会改变this指向,指向windows。所以先把this保存
      setTimeout(() => {
        window.addEventListener("resize", function () {
          self.chart = self.$echarts.init(self.$refs.Echart);
          self.chart.resize();
        });
      }, 10);
    },
    initChart() {
      // 创建 echarts 实例。
      var myChartOne = this.$echarts.init(this.$refs.Echart);
      myChartOne.setOption({
        //直角坐标系内绘图网格
        grid: {
          top: "5%",
          left: "3%", //grid 组件离容器左侧的距离
          right: "4%",
          bottom: "3%",
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签
        },
        // 如果有多个同类组件,那么就是个数组。例如这里有三个 X 轴。
        xAxis: {
          type: "category",
          data: this.xAxisList,
          name: "data",
          axisLine: {
            show: false, //隐藏x轴线
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏x轴刻度
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏y轴刻度
          },
          splitLine: {
            lineStyle: {
              // 设置背景横线
              color: "#BBBBBB",
            },
          },
        },
        series: [
          {
            data: this.labelList,
            type: "line",
            // smooth: true, //默认是false,判断折线连线是平滑的还是折线
            itemStyle: {
              normal: {
                color: "#FDE708", //改变折线点的颜色
                lineStyle: {
                  color: "#FDE708", //改变折线颜色
                },
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/79170.html

(0)

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!