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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 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树的代码,可以嵌套任意层
2006/10/09 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php根据年月获取季度的方法
2014/03/31 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
JavaScript面向对象编程
2008/03/02 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
解析Python中的异常处理
2015/04/28 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
在python中实现对list求和及求积
2018/11/14 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
python3 re返回形式总结
2020/11/20 Python
北承题目(C++)
2012/05/16 面试题
《最可爱的人》教学反思
2014/02/14 职场文书
统计专业自荐书
2014/07/06 职场文书
普通党员对照检查材料
2014/08/28 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
员工给公司的建议书
2019/06/24 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
利用JavaScript写一个简单计算器
2021/11/27 Javascript