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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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
自动跳转中英文页面
2006/10/09 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
vue3.0 上手体验
2020/09/21 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
对python中list的五种查找方法说明
2020/07/13 Python
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
架构师岗位职责
2013/11/18 职场文书
平面设计师的工作职责
2013/11/21 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
酒店端午节促销方案
2014/02/18 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python