Echarts图表，防抖+自适应。

Echarts图表库还是很好使的，就是在网页屏幕大小变化大时候，图表还是不变，这就让人很苦恼！

我看大部分网上的都是用的定时器，但是我参考别人的代码，没有效果，就自己想了一个比较原始的代码

 template部分

创建用来展示图表的div

<template>
   <div id="columnar" style="width: 100%; height: 100%"></div>
   <div id="piegirl" style="width: 230px; height: 143px"></div>
   <div id="pieman" style="width: 230px; height: 143px"></div>
</template>  
 

JS部分

1、我用的是按需引入自己封装了echarts.js文件

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";

/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart, PieChart } from "echarts/charts";

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LegendComponent
} from "echarts/components";

// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
    TitleComponent,
    LegendComponent,
    PieChart,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    LineChart,
]);

// 导出
export default echarts;

2、接下来是代码运用，展示图表

import { onMounted, ref, onUnmounted } from "vue";
import echarts from "../../../assets/echarts.js";

//定义Echarts
const charColumn = ref();
const charPiegirl = ref();
const charPieman = ref();

//定义图表的展示数据
const tableData = ref([
  {
    CreatedAt: "计科",
    man: "16",
    girl: "24",
    name: "pang",
  },
  {
    CreatedAt: "数据",
    man: "16",
    girl: "24",
    name: "pang",
  },
  {
    CreatedAt: "物联",
    man: "16",
    girl: "24",
    name: "pang",
  },
  {
    CreatedAt: "信工",
    man: "16",
    girl: "24",
    name: "pang",
  },
  {
    CreatedAt: "通信",
    man: "16",
    girl: "24",
    name: "pang",
  },
]);
//和上面一样，图表的展示数据，所有我就不写啦！
const columnardata = ref({});
const piedata = ref({});

//屏幕大小变化重新加载
window.addEventListener("resize", () => {

  if (charColumn.value) {//如果有这个图表实例就进行销毁
    charColumn.value.dispose();
    charPiegirl.value.dispose();
    charPieman.value.dispose();
    // dispose()，Echarts自带的销毁图表实例的方法
    echartsResize();
  }
});
const echartsResize = () => {
  // 使用刚指定的配置项和数据显示图表。
  charColumn.value = echarts.init(document.getElementById("columnar"));
  charPiegirl.value = echarts.init(document.getElementById("piegirl"));
  charPieman.value = echarts.init(document.getElementById("pieman"));

  if (charColumn.value && charPiegirl.value && charPieman.value) {
    //都存在的时候进行图表渲染
    // 使用刚指定的配置项option和数据显示图表。
    charColumn.value.setOption(columnardata.value);
    charPiegirl.value.setOption(piedata.value);
    charPieman.value.setOption(piedata.value);
  }
};


onMounted(() => {
  echartsResize();//调用方法渲染图表
});
onUnmounted(() => {
//切换页面的时候销毁图表
  if (charColumn.value) {
    charColumn.value.dispose();
    charPiegirl.value.dispose();
    charPieman.value.dispose();
  }
});