vue-echarts动态调整

vue3整合echarts 动态调整

---

前言

本文主要适用于vue2、vue3 对Echarts进行整合，动态跟随的方法， 以及防抖功能的实现

环境：vue3，Echarts：4.9.0

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用步骤

1.依赖安装

代码如下（示例）：

npm install echarts@4.9.0 -S

2. App.vue的html

为Echarts提供一个可依赖的Element，里面的参数于data进行绑定，可为数据实时展示提供基础

  <div
    :class="className"
    :style="{ height: height, width: width }"
  />

3. App.vue引入依赖情况

这里根据实际工程进行引入，仅供参考

import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./utils/resize";

3. App.vue的逻辑部分

export default {
   
//  vue的混入，下文会用到，需要的同学可自行了解 https://cn.vuejs.org/v2/guide/mixins.html
  mixins: [resize],
//  进行父子传值的模式方便后期父组件控制子组件
  props: {
   
    className: {
   
      type: String,
      default: "chart",
    },
    width: {
   
      type: String,
      default: "100%",
    },
    height: {
   
      type: String,
      default: "300px",
    },
  },
  data() {
   
    return {
   
      chart: null,
      animationDuration: 6000,
    };
  },
 //  dom更新完成进行初始化
  mounted() {