echarts封装

目录：

resize.js:

/*** @param {Function} func* @param {number} wait* @param {boolean} immediate* @return {*}*/
export function debounce(func, wait, immediate) {let timeout, args, context, timestamp, resultconst later = function() {// 据上一次触发时间间隔const last = +new Date() - timestamp// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 waitif (last < wait && last > 0) {timeout = setTimeout(later, wait - last)} else {timeout = null// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用if (!immediate) {result = func.apply(context, args)if (!timeout) context = args = null}}}

import { debounce } from '@/utils'export default {data() {return {$_sidebarElm: null,$_resizeHandler: null}},mounted() {this.$_resizeHandler = debounce(() => {if (this.chart) {this.chart.resize()}}, 100)this.$_initResizeEvent()this.$_initSidebarResizeEvent()},beforeDestroy() {this.$_destroyResizeEvent()this.$_destroySidebarResizeEvent()},// to fixed bug when cached by keep-alive// https://github.com/PanJiaChen/vue-element-admin/issues/2116activated() {this.$_initResizeEvent()this.$_initSidebarResizeEvent()},deactivated() {this.$_destroyResizeEvent()this.$_destroySidebarResizeEvent()},methods: {// use $_ for mixins properties// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential$_initResizeEvent() {window.addEventListener('resize', this.$_resizeHandler)},$_destroyResizeEvent() {window.removeEventListener('resize', this.$_resizeHandler)},$_sidebarResizeHandler(e) {if (e.propertyName === 'width') {this.$_resizeHandler()}},$_initSidebarResizeEvent() {this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)},$_destroySidebarResizeEvent() {this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)}}
}

echarts封装 - 续2相关推荐

Vue echarts封装
做大屏的时候经常会遇到 echarts 展示,下面展示在 Vue2.7 / Vue3 中对 echarts (^5.4.0) 的简单封装. 文章首发于https://blog.fxss.work/vu ...
echart 时间滚动_基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...
vue+echarts封装日历图
前端可视化封装日历图 html <template><divref="calendar":style="{ width: `${width}px`, h ...
Echarts 封装常用图表组件
npm 安装 echarts npm install echarts 在项目根目录下的 src/components 中新建一个Chart.vue组件. 在 src 下新建一个 charts 文件夹, ...
vue+echarts的组件封装
本文是把echarts封装成一个公共组件,方便调用, 首先:先给echarts设置一个canvas画布,也就是俗称的div盒子其次:下载echarts依赖,然后引入,如果报错的话就按照下面这种方式引 ...
vue3使用echarts并封装echarts组件
vue3使用echarts并封装echarts组件前言: 一.安装并导入echart 1.npm下载包 2.配置echarts 二.使用echarts 三.封装echarts为组件前言: 本文使用 ...
技术图文：如何利用C# + Echarts 绘制「堆叠条形图」？
背景前几天,我们介绍了如何利用C# + Echarts 绘制 Bar Simple?,原以为把 Echarts 封装到这种程度就可以完成当前任务了. 可是,把软件原型提交给对方时,发现对方更希望& ...
「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表，得学学了，必须要会的基本操作了
依旧还是学妹给的封面直接进入主题-在vue中使用个啥,都差不多是一个流程. 引入Echarts 安装 npm install echarts --save 我们写一个Echarts组件,在内进行引入 ...
echart vue 图表大小_vue之将echart封装为组件
最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用.本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将其封装为 ...
vue中如何清除echarts上次保留的数据（亲测有效）
因为我是将echarts封装好后,父组件只要传递值就可以进行渲染. 但是点击多次数据请求的时候echarts会多次渲染.如果试过 clear() 与setOption(this.options, tr ...

echarts封装 - 续2

echarts封装 - 续2相关推荐

最新文章

热门文章