vue实现多个echarts根据屏幕大小变化而变化实例


Posted in Javascript onJuly 19, 2020

前言

有如下页面需求:在一个页面展示多个echarts图表,并且根据屏幕大小变化而变化。

vue实现多个echarts根据屏幕大小变化而变化实例

实例

可以封装成组件使用,以增加代码复用性

// myCharts.vue
 <template>
 <div class="charts-comps" ref="charts"></div>
</template>

<script>
import echarts from 'echarts'
export default {
 name: 'myCharts',
 props: {
 type: {
  type: String,
  default: ''
 }
 },
 data () {
 return {
  resizeTimer: null,
  myChart: null
 }
 },
 methods : {
 init () {
  let myChart = echarts.init(this.$refs.charts);
  this.myChart = myChart;
  myChart.setOption({
	 xAxis: {
  type: 'category',
  boundaryGap: false,
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	 },
	 yAxis: {
	  type: 'value'
	 },
	 series: [{
	  data: [820, 932, 901, 934, 1290, 1330, 1320],
	  type: 'line',
	  areaStyle: {}
	 }]
	 });
 }
 }
 mounted () {
 this.init(); // 初始化图表
 let _this = this;
 window.addEventListener('resize', function () { 
  if (_this.resizeTimer) clearTimeout(_this.resizeTimer);
  _this.resizeTimer = setTimeout(function () {
  _this.myChart.resize();
  }, 100)
 })
 }
}
</script>

<style lang="less" scoped>
 .charts-comps{
 width: 100%;
 height: 100%;
 }
</style>

这样就可以在需要用到的地方使用了

// index.vue
<template>
 <my-charts class="charts-comps" ref="charts" v-for="item in dataList" :key="item"></my-charts>
</template>

<script>
import myCharts from './myCharts'
export default {
 name: 'test',
 components: {myCharts},
 data () {
 return {
 dataList: ['test1','test2','test3','test4']
 }
 }
 }
 </script>

关键代码解析

let _this = this;
window.addEventListener('resize', function () { 
 ...
})

在myCharts组件中去监听窗口大小变化,这样可以针对每一个图表很方便的resize()重绘图表(Echarts.resize()是echarts的对图表进行重新绘制的方法)。这里使用window.addEventListener而不使用window.onresize的原因是:window.onresize绘覆盖掉前面定义的方法,而只执行最后一个,导致图表只有最后一个重绘了,而window.addEventListener避免了这个问题。

if (_this.resizeTimer) clearTimeout(_this.resizeTimer);
_this.resizeTimer = setTimeout(function () {
 _this.myChart.resize();
}, 100)

结合 函数防抖(debounce) 避免在窗口大小变化时频繁的进行图表的resize()。在处理复杂的function时可以很大限度的提高性能。实现原理就是对要执行的目标方法延时处理,设置一个定时器,当再次执行相同方法时(窗口大小变化时会被频繁的侦听到onresize),若前一个定时任务还未执行完,则清除掉定时任务,重新定时。这样当屏幕大小在100毫秒之内没有再次变化时才会对Echarts进行resize(),当然时间段可以根据自身需要设置长一点。

补充知识:vue+echarts 同页面多个echarts图表,明明宽度设置的都是100%,却只有第一个生效以及如何实现自适应

问题描述

三个echarts图表,明明宽度设置的都是100%,却只有第一个生效以及如何实现自适应

vue实现多个echarts根据屏幕大小变化而变化实例

解决办法

1.初始化时需要加上,确保操作的是最新的DOM

this.$nextTick(_ => {  
   
});

2.echarts图表自适应实现,需要在渲染图表后加上

window.addEventListener("resize", function() {        
 myChart.resize();      
});

完整如下:

vue实现多个echarts根据屏幕大小变化而变化实例

以上这篇vue实现多个echarts根据屏幕大小变化而变化实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
$()JS小技巧
Jul 21 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
JS变量及其作用域
Mar 29 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
手写实现JS中的new
Nov 07 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 #Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 #Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 #Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 #Javascript
JS中作用域以及变量范围分析
Jul 18 #Javascript
JS中的变量作用域(console版)
Jul 18 #Javascript
js里面的变量范围分享
Jul 18 #Javascript
You might like
PHP文件上传原理简单分析
2011/05/29 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
JS实现图片切换特效
2019/12/23 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Python assert语句的简单使用示例
2019/07/28 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
临床护士自荐信
2014/01/31 职场文书
期末评语大全
2014/05/04 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
个性与发展自我评价
2015/03/06 职场文书
质检员岗位职责范本
2015/04/07 职场文书
考试后的感想
2015/08/07 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL