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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
基于openlayers实现角度测量功能
Sep 28 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
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
Python 多线程的实例详解
2017/09/07 Python
django输出html内容的实例
2018/05/27 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
社区工作感言
2014/02/21 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
初中作文评语大全
2014/04/23 职场文书
爱心捐书活动总结
2014/07/05 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
总账会计岗位职责
2015/04/02 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
MySQL常见优化方案汇总
2022/01/18 MySQL
Java数组详细介绍及相关工具类
2022/04/14 Java/Android