VUE 单页面使用 echart 窗口变化时的用法


Posted in Javascript onJuly 30, 2020

在 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的框架写的自适应

VUE 单页面使用 echart 窗口变化时的用法

一、index.vue的文件

引入chart图表``

VUE 单页面使用 echart 窗口变化时的用法

这里是数据

chartData: {
    title: {
     text: '3-1(2)',
     textStyle: {
      color: '#979797',
      fontSize: 14
     }
    },
    tooltip: {
     trigger: 'axis'
    },
    legend: {
     icon: 'rect',
     itemWidth: 4, // 图例标记的图形宽度
     itemHeight: 11,
     textStyle: {
      lineHeight: 65,
      fontSize: 14
     },
     data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
     left: '3%',
     right: '4%',
     bottom: '3%',
     containLabel: true
    },
    xAxis: {
     type: 'category',
     boundaryGap: false,
     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
     type: 'value'
    },
    series: [
     {
      name: '邮件营销',
      type: 'line',
      stack: '总量',
      data: [0, 132, 101, 134, 90, 230, 210]
     },
     {
      name: '联盟广告',
      type: 'line',
      stack: '总量',
      data: [220, 12, 191, 234, 20, 330, 10]
     },
     {
      name: '视频广告',
      type: 'line',
      stack: '总量',
      data: [15, 232, 201, 154, 190, 330, 110]
     },
     {
      name: '直接访问',
      type: 'line',
      stack: '总量',
      data: [320, 420, 301, 334, 60, 330, 320]
     },
     {
      name: '搜索引擎',
      type: 'line',
      stack: '总量',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
     }
    ]
 }

二、chart.vue

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

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
 mixins: [resize],
 props: {
  className: {
   type: String,
   default: 'chart'
  },
  width: {
   type: String,
   default: '100%'
  },
  height: {
   type: String,
   default: '300px'
  },
  autoResize: {
   type: Boolean,
   default: true
  },
  chartData: {
   type: Object,
   required: true
  }
 },
 data() {
  return {
   chart: null
  }
 },
 watch: {
  chartData: {
   deep: true,
   handler(val) {
    this.setOptions(val)
   }
  }
 },
 mounted() {
  this.$nextTick(() => {
   this.initChart()
  })
 },
 beforeDestroy() {
  if (!this.chart) {
   return
  }
  this.chart.dispose()
  this.chart = null
 },
 methods: {
  initChart() {
   this.chart = echarts.init(this.$el, 'macarons')
   this.setOptions(this.chartData)
  },
  setOptions(chartData) {
   this.chart.setOption(chartData)
  }
 }
}
</script>

三、resize.js

import { debounce } from './debounce'

export default {
 data() {
  return {
   $_sidebarElm: null
  }
 },
 mounted() {
  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/2116
 activated() {
  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
  $_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 窗口变化时的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 #Javascript
Vue Render函数原理及代码实例解析
Jul 30 #Javascript
vue - props 声明数组和对象操作
Jul 30 #Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 #Javascript
vue如何使用外部特殊字体的操作
Jul 30 #Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 #Javascript
JavaScript JSON使用原理及注意事项
Jul 30 #Javascript
You might like
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
Python中使用item()方法遍历字典的例子
2014/08/26 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python列表(List)知识点总结
2019/02/18 Python
python3注册全局热键的实现
2020/03/22 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
python中sys模块是做什么用的
2020/08/16 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
怎样写好自荐信和推荐信
2013/12/26 职场文书
优秀语文教师事迹
2014/05/18 职场文书
项目经理任命书内容
2014/06/06 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2015年党建工作总结
2015/03/30 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2015年测量员工作总结
2015/05/23 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
国际贸易实训总结
2015/08/03 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技