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 相关文章推荐
Javascript 事件流和事件绑定
Jul 16 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
js清空form表单中的内容示例
May 20 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
vue导出html、word和pdf的实现代码
Jul 31 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
如何手写一个简易的 Vuex
Oct 10 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
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python数据类型详解(一)字符串
2016/05/08 Python
Apache如何部署django项目
2017/05/21 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
python 自定义装饰器实例详解
2019/07/20 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python压包的概念及实例详解
2021/02/17 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
服装设计师职业生涯规划范文
2014/02/28 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
申报材料格式
2014/12/30 职场文书
材料员岗位职责范本
2015/04/11 职场文书
检讨书格式范文
2015/05/07 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
Python matplotlib多个子图绘制整合
2022/04/13 Python