山东大学软件学院创新实训——项目记录（十六）

零、前言

本篇记录主要为了解决使用echarts的一个典型错误和解决办法。

一、问题的表现

当访问/charts页面时，总是会重定向到localhost:8080，而且这种情况是在没设置路由里的重定向下发生的。
查看http请求：

请求 URL:
http://localhost:8080/charts
请求方法:
GET
状态代码:
304 Not Modified

可以看到返回的不是标准的200状态码。

二、问题的本质

TypeError: Cannot read properties of null (reading 'getAttribute')
    at Object.getAttribute (model.js:494:1)
    at getInstanceByDom (echarts.js:1999:1)
    at Object.init (echarts.js:1922:1)
    at eval (charts.vue:128:1)

从中我们找到了真正的问题所在:

`TypeError: Cannot read properties of null (reading 'getAttribute')` 这个错误表明你的代码试图读取一个 `null` 对象的 `getAttribute` 属性，通常这是由于尝试在未渲染的 DOM 元素上初始化 ECharts 实例引起的。你可以采取以下步骤来排查并解决这个问题。

三、解决办法

1. 确保 DOM 元素存在

在初始化 ECharts 实例前，确保目标 DOM 元素已经渲染完成。

<template>
  <div id="charts-container" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Charts',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('charts-container');
      if (chartDom) {
        const myChart = echarts.init(chartDom);
        const option = {
          // 你的图表配置
        };
        myChart.setOption(option);
      } else {
        console.error('Chart container element not found');
      }
    }
  }
}
</script>

2. 确保样式设置正确

确保你的图表容器有宽度和高度，否则 ECharts 无法正确初始化。

#charts-container {
  width: 100%;
  height: 100%;
}

3. 延迟初始化

如果仍然出现问题，可以尝试在 mounted 钩子中使用 nextTick 确保 DOM 完全渲染后再初始化图表。

import * as echarts from 'echarts';

export default {
  name: 'Charts',
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('charts-container');
      if (chartDom) {
        const myChart = echarts.init(chartDom);
        const option = {
          // 你的图表配置
        };
        myChart.setOption(option);
      } else {
        console.error('Chart container element not found');
      }
    }
  }
}

四、解决结果展示