vue中echarts图表大小适应窗口大小且不需要刷新案例


Posted in Javascript onJuly 19, 2020

我就废话不多说了,大家还是直接看代码吧~

内容如下:

// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
//根据窗口的大小变动图表 --- 重点
window.onresize = function(){
  myChart.resize();
  //myChart1.resize();  //若有多个图表变动,可多写
 
}

代码如下:

mounted() {
  
 const that = this
   window.onresize = () => {// 根据窗口大小调整曲线大小
   let myChart = this.$echarts.init(document.getElementById('myChart'));
    myChart.resize();
   }
 },

补充知识:如何解决Vue项目中使用echarts,宽度变化导致图不能resize问题

情景:

开发PC端管理系统,项目左侧目录可收缩,右侧是对应的页面,右侧页面里面包含了echarts开发的几个折线图,如图:

vue中echarts图表大小适应窗口大小且不需要刷新案例

当左侧目录展开的时候,会把右侧页面压缩,右侧页面的echarts折线图宽度就会发生改变,因为项目考虑到适配大屏的问题,所以,右侧两个echarts使用的都是百分比宽度,左侧菜单展开后的样子如图:

vue中echarts图表大小适应窗口大小且不需要刷新案例

vue中echarts图表大小适应窗口大小且不需要刷新案例

会导致echarts折线图超出画布,所以为了解决这个问题,

第一个想法是:

通过js逻辑判断左侧菜单是否展开来动态改变echarts折线图的宽度,结果是 没有用;

第二个想法是:

通过动态判断左侧菜单是否撑开,然后在右侧文件mounted生命周期里写一个无限定时器,每间隔500毫秒动态执行下,初始化echarts折线图的方法,结果:也没用

最终百度了一波,通过网上其他大佬写的博客,找到了解决方法:

划重点

1.引入 element-resize-detector依赖

2.新建 chart.resize.js 文件,添加下面代码

import echarts from 'echarts';
import Vue from 'vue';
import elementResizeDetectorMaker from "element-resize-detector"

export var version = '0.0.1';
var compatible = (/^2\./).test(Vue.version);
if (!compatible) {
  Vue.util.warn('vue echarts resize directive ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
}
let HANDLER = "_vue_echarts_resize_handler"

function bind(el) {
  unbind(el);
  el[HANDLER] = function () {
    let chart = echarts.getInstanceByDom(el);
    if (!chart) {
      return;
    }
    chart.resize();
  }
  //监听window窗体变化,更新echarts大小
  //window.addEventListener("resize", el[HANDLER])
  //监听绑定的div大小变化,更新echarts大小
  elementResizeDetectorMaker().listenTo(el,el[HANDLER])
  
}
function unbind(el) {
  //window.removeEventListener("resize", el[HANDLER]);
  elementResizeDetectorMaker().removeListener(el,el[HANDLER])
  delete el[HANDLER];
}
var directive = {
  bind: bind,
  unbind: unbind
};
Vue.directive("on-echart-resize", directive)

然后需要对应的在 echarts 图 上绑定一个 v-on-echart-resize

不绑定 v-on-echart-resize ,不起效果 ,亲测

<template>
 <div id="leftEchartsLine" ref="leftEchartsLine" v-on-echart-resize></div>
</template>

v-on-echart-resize

这个是新增的 ,之前没有

引入

import elementResizeDetectorMaker from "element-resize-detector";

import "./chart.resize";

然后在 mounted 写

mounted() {
  let erd = elementResizeDetectorMaker();
  let that = this;
  erd.listenTo(document.getElementById("leftEchartsLine"), (element) => {
   let width = element.offsetWidth;
   let height = element.offsetHeight;
   that.$nextTick(() => {
    //使echarts尺寸重置
    that.echarts.init(document.getElementById("leftEchartsLine")).resize();
   });
  });
 },

改完后的样子:

vue中echarts图表大小适应窗口大小且不需要刷新案例

这样就能解决 echarts 折线图,宽度变化 ,导致的图不能resize问题咯~~~

以上这篇vue中echarts图表大小适应窗口大小且不需要刷新案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS的replace方法介绍
Oct 20 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
Vue代码分割懒加载的实现方法
Nov 23 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 #Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 #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
You might like
PHP has encountered an Access Violation
2007/01/15 PHP
php 获取本机外网/公网IP的代码
2010/05/09 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
PHP数组操作类实例
2015/07/11 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python切片及sys.argv[]用法详解
2018/05/25 Python
python进行文件对比的方法
2018/12/24 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
中学运动会广播稿
2014/01/19 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
环卫工人节活动总结
2014/08/29 职场文书
班主任经验交流材料
2014/12/16 职场文书
2015政治思想表现评语
2015/03/25 职场文书
八一建军节主持词
2015/07/01 职场文书
德能勤绩工作总结
2015/08/11 职场文书
2019年工作总结范文
2019/05/21 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
Python进程池与进程锁之语法学习
2022/04/11 Python