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点击后一组图片左右滑动的实现代码
Aug 16 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
AngularJs表单验证实例详解
May 30 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 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
网站防止被刷票的一些思路与方法
2015/01/08 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
动态样式类封装JS代码
2009/09/02 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
会计核算科岗位职责
2014/03/19 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
师范生见习总结范文
2015/06/23 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
python 单机五子棋对战游戏
2022/04/28 Python
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android