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 相关文章推荐
javascript offsetX与layerX区别
Mar 12 Javascript
JS数组的常见用法实例
Feb 10 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 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 多行多列显示
2009/08/15 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
vue中轮训器的使用
2019/01/27 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
js验证密码强度解析
2020/03/18 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
浅谈Python中的数据类型
2015/05/05 Python
Python实现线程池代码分享
2015/06/21 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
医院总经理岗位职责
2014/02/04 职场文书
法制宣传月活动总结
2014/04/29 职场文书
婚宴邀请函
2015/01/30 职场文书
医德医风自我评价2015
2015/03/03 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android