党建工作微信小程序_VUE 单页面使用 echart 窗口变

发布时间:2021-01-05 12:20 作者:jianzhan

摘要: VUE 宣传单页面应用 echart 对话框转变时的使用方法 本文关键详细介绍了VUE 宣传单页面应用 echart 对话框转变时的使用方法,具备非常好的参照使用价值,期待对大伙儿有一定的协

VUE 单页面使用 echart 窗口变化时的用法       这篇文章主要介绍了VUE 单页面使用 echart 窗口变化时的用法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在 VUE 项目中,为了使 echart 在窗口变化时能够自适应,要用到 window.resize = function(){ .......};

但是我在项目刚开始的时间就有一个地方的高度变化使用了 window.resize ,在里面再次使用 会覆盖掉原来的,所以在里面图表使用时可以用

window.addEventListener('resize',this.resizeFu,false);

resixeFu 就是图表变化时的方法

resizeFu(){
 let div = document.getElementById('changeData');
 if(div this.changeData.DataTime.length 0){
 this.chartsDiv.changeData.resize();
}

但里面有一个问题就是:每次进来当前页面都会执行 window.addEventListener

解决方法是在路由勾子函数中把它给去掉,方法是

beforeRouteLeave(to, from, next) {
 //页面走掉把事件给清除掉
 window.removeEventListener("resize", this.resizeFu,false);
 next()
},

补充知识:vue+echart图表自适应屏幕大小、点击侧边栏展开收缩图表自适应大小resize

开发中用到了echart图表,需要图表自适应大小resize,一开始使用的方法是:

window.onresize = function () {
 this.myChart.resize();
};

但是又遇到一个问题,点击侧边栏的展开收起的时候,图表的大小没有自适应(因为窗口的大小没有变化)

这里参考vue+element+admin的框架写的自适应

一、index.vue的文件

引入chart图表``

这里是数据


// to fixed bug when cached by keep-alive // PanJiaChen/vue-element-admin/issues/2116 activated() { this.$_initResizeEvent() this.$_initSidebarResizeEvent() deactivated() { this.$_destroyResizeEvent() this.$_destroySidebarResizeEvent() methods: { // use $_ for mixins properties // v2/style-#Private-property-names-essential $_resizeHandler() { return debounce(() = { if (this.chart) { this.chart.resize() }, 100)() $_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)

四、debounce.js

 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
export function debounce(func, wait, immediate) {
 let timeout, args, context, timestamp, result
 const later = function() {
 // 据上一次触发时间间隔
 const last = +new Date() - timestamp
 // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
 if (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
 return function(...args) {
 context = this
 timestamp = +new Date()
 const callNow = immediate !timeout
 // 如果延时不存在,重新设定延时
 if (!timeout) timeout = setTimeout(later, wait)
 if (callNow) {
 result = func.apply(context, args)
 context = args = null
 return result

以上这篇VUE 单页面使用 echart 窗口变化时的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


  • 凡科抠图图形怎么添加霓

    ps图型如何加上霓虹黑冰实际效果?百度搜索工作经验 公布 创作者:MHSJS001 我想评价ps图型如何加上霓虹黑冰实际效果?ps中绘图的图型,要想加上一些实际效果,该如何制作霓虹黑

  • 相比开发APP,开发小程序

    手机微信微信小程序是一种新的对外开放对外开放工作中工作能力,开发设计设计方案者可以快速地开发设计设计方案一个手机微信微信小程序。手机微信微信小程序可以手中机手机微

  • 微信小程序扫二维码运用

    模拟题目:手机微信微信小程序扫二维码应用系统软件手机软件 手机微信微信小程序的火爆水准不言而喻易见的,每一次都深更半夜公布对外开放对外开放大作用,很多商家也逐一开发

  • 石油化工行业网站建设解

    石油化工设备机器设备团队门户网网的建立,其目的之一在于建立起石油化工设备机器设备团队统一的宣传策划方案策划营销推广营销推广和信息内容內容发布门户网网,更重要的在于

  • 怎样构建一款火爆且有特

    在网上购物的方式让现如今年轻人的消費观念一开始变更,忙碌的大成县市生活起居让人们更要想在家里里里休息,出门购物的机会减少,也就需要各式的在网上手机微信微信小程序有