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() {