记录一次封装图表的时候出现的bug

封装Echarts使用指南

一、开发意图

为了能够实现在本项目当中的多次运用,方便数据迭代更新,采用了封装组件的方式进行开发

二、开发思路

• 将公共组件存储在了components -> chenEchart 中
• 使用文件存储在了 dashoard -> ui ->  xxx.vue 中

三、使用方法

以line为例:

1. 在所需要用到该组件的地方,进行创建,
2. 引用公共组件当中,我们封装好的图表
3. 通过传递数据(后端提供的数据),注意数据的格式
4. 在onMounted中,我们需要获取到更改的元素,通过DOM获取,发送第三步得到的数据
   

四、封装过程

1. 引入echarts以及对应的vue依赖

import * as echarts from "echarts";
import { onBeforeUnmount, onMounted, ref } from "vue";

2. 通过ref获取到对应的DOM元素

const chartRef = ref(null);

3. 对于类型进行判断,防止使用者传递错误的类型.导致组件无法使用,而找不到问题所在点

  type: {
    type: String,
    default: "line",
    validator: (value) => {
      if (!["line"].includes(value)) {
        throw new Error("type类型只能为 line");
      }
      return true;
    },
  },

• 该类型为line,跟需要使用的组件leixing需要对应,详情请看下图
  

4. 规定了数据传输的格式.

data: {
  type: Object,
  required: true,
},

5. 防止使用者不给高度,导致图表无法显示,我们也提供了默认的高度为300

height: {
  type: [String, Number],
  default: 300,
},

6. 为了图表能够自适应浏览器的大小,而显示对应的图标,我们也采用了适配的方案

onMounted(() => {
  initChart();
  // 监听浏览器的变化
  window.addEventListener("resize", resize());
  const resizeObserver = new ResizeObserver((entries) => {
    resize();
  });
  // 监听DOM尺寸的变化,将输入给到observe
  resizeObserver.observe(chartRef.value)
});

7. 当使用了监听,不进行取消监听,会导致内存泄漏等情况,我们也考虑到了这个点,并进行处理

onBeforeUnmount(() => {
  // 注销resize监听事件
  window.removeEventListener("resize", resize);
  // 把echarts给销毁，它比较占用内存
  myChart.dispose();
});

8. 进行对应的echarts图表的属性进行书写,这里大量的运用了echarts的API,注意点就是我们在获取data数据的时候要小心,否则可能会出现其他异常的错误

xAxis: {
  data: props.data.axis,
},

9. 当窗口改变,要进行重新计算一次

const resize = () => {
  myChart.resize();
}

五、开发过程中遇到的问题

• 在组件通信的时候,没有正确的使用setup语法,将数据存储在了onMounted中进行了数据的处理,导致组件库接收不到数据,出现undefined的情况.
• 随后,把数据放在了外面进行处理,在抛发,就能够接收到数据了.此外,该BUG的出现,也对今后的数据处理有了极大的帮助.

六、重大bug出现的问题 解决方案

• 在通过echarts的时候进行渲染图表,出现了数据后端数据的加载问题,导致前端的图表没有展示
  
• 第一种思路:

• • 通过settimeout进行延迟加载....[能显示,但是不建议!!!!!你不仅要清除它,还会因为后端数据量大了,你照样出不来!!]

• 第二种思路:

• • 通过nextTick这个也走不通,多次刷新也不会显示

• 第三种思路:

• • 使用v-if来进行防错判断!!加在父组件上,因为我父组件通过ajax请求,拿到数据之后,在进行判断,会出现数据的请求的时间问题
    

• 第四种思路:

• • 通过在标签上添加key,因为key值改变了,整个就需要重新渲染,所以就避免了这个问题