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的eval()中使用函数的进一步讨论
Jul 26 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
Cookie 小记
Apr 01 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
vue slot与传参实例代码讲解
Apr 28 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制作静态网站的模板框架(一)
2006/10/09 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Python查询IP地址归属完整代码
2017/06/21 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
特步官方商城:Xtep
2017/03/21 全球购物
银行求职推荐信范文
2013/11/30 职场文书
运动会广播稿200字
2014/01/15 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
初中化学教学反思
2016/02/22 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
Go语言入门exec的基本使用
2022/05/20 Golang