1.echarts的图表只绘制一次,所以要想大小随着父容器变化就得调方法重新绘制。所以把绘制图表的方法提出来。

<div class="echart">
<div :id="id" style="height: 100%;width: 100%;"></div>
</div>
data(){
return{
chart:""
}
},
methods:{
init(){
let _width=$("#"+this.id).width();
let _height=$("#"+this.id).height();
this.chart=this.$echarts.init(document.getElementById(this.id));
console.log(this.option);
this.chart.resize({ //根据父容器的大小设置大小
width:_width,
height:_height
});
this.chart.setOption(this.option,true);
}
}
2.用window窗口改变大小是调用的方法来调用echarts中的init方法(win和echarts组件是非父子组件)
win组件中:
$("#" + _this.id).window({
title: _this.data.title,
width:_this.data.width,
height:_this.data.height,
top:_this.data.top,
left:_this.data.left,
cls:_this.class,
collapsible:false,
minimizable:false,
maximizable:_this.data.maximizable,
closable:true,
modal: false,
shadow: false,
draggable: true,
resizable:_this.data.resizable,
onBeforeClose: function () { //点击窗口关闭按钮的时候触发
if (this) {
$(this).window('destroy');
}
_this.$store.commit("win/win_close", {win_id: _this.id});
},
onResize:function (){ //窗口大小改变时触发
_this.bus.$emit("echart") //通过echarts调用echarts里的方法
}
});
echarts组件中:
mounted() {
setTimeout(()=>{ //做异步是为了先获取到父容器的宽高之后再进行绘制canvas,设置时长为2000ms是为了保留动画效果
this.init();
},2000);
this.bus.$on("echart",()=>{
this.init();
})
},

echarts的图表根据父容器大小的改变而改变(弹窗easy-ui的window窗口)的更多相关文章

  1. echarts 调整图表大小的方法

    第一次使用Echarts,大小用的不是那么随心应手,通过文档和百度出的结果,发现其实很简单: 内部图表大小是与div容器大小相关的,如果想调整图表大小,调整div就可以了 如果是想调整图表与div间上 ...

  2. 【Unity】UGUI控件大小适配父容器

    需求:需要把UGUI控件的尺寸调整到指定大小,如匹配至设计的分辨率.或者说想制定覆盖全屏的背景图片. 做法:将这个UGUI控件的RectTransform组件里的Anchor Presets设为预设的 ...

  3. ECharts 图表设置标记的大小 symbolSize 和获取标记的值

    ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  4. 【CSS】div父容器根据子容器大小自适应

    Div即父容器不根据内容自动调节高度,我们看下面的代码: <div id="main"> <div id="content"></ ...

  5. echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起

    <div  id="chartContainer" style="height:100%;width:100%;"></div> cha ...

  6. eCharts使用图表简单示例

    https://blog.csdn.net/hlbt0112/article/details/48862427 1. eCharts官网 http://echarts.baidu.com/index. ...

  7. ECharts数据图表系统? 5分钟上手!

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  8. 移动端框架篇-控制父容器的滑屏框架-slip.js

    设计滑屏框架的办法一般有2种 控制父容器法 控制子容器法 这个算是控制父容器法 通过控制父容器的transform: translateY或margin-top或top的值来上下滑动页面,每次的位移的 ...

  9. H5弹性盒布局的使用(父容器属性)

    为父容器添加display:flex/inline-flex 父容器可以使用的属性有: 1.flex-direction:决定主轴的方向 有四个属性值: row(默认值):主轴为水平方向,起点在左端. ...

随机推荐

  1. idea下远程debug配置

    一. 背景: 在测试工作中,为方便发现代码中的逻辑问题,尝试使用远程debug模式,在测试过程中走查代码,不仅可以辅助测试减少与开发的沟通成本,更便于了解业务提升测试深度. 二. 配置方式: 1. 调 ...

  2. 运维监控篇Zabbix简单的性能调优

    Zabbix是一款高性能的分布式监控报警系统.比如现在常见的家用台式机配置处理器I5-3470.内存4GB1600MHz.硬盘7200rpm就能够监控1000台左右的HOST,是的没错Zabbix就是 ...

  3. Rabbitmq的延时队列的使用

    配置: spring: rabbitmq: addresses: connection-timeout: username: guest password: guest publisher-confi ...

  4. Spring学习笔记(4)——IoC学习

    IoC理论的背景我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 如果我们打开机械式手表 ...

  5. redis(集群一)主从复制

    1.主从复制原理 主从复制工作流程 从服务器连接主服务器,发送SYNC命令. 主服务器接收到SYNC命令后,开始执行bgsave命令生成RDB文件并使用缓冲区记录此后执行的所有命令 主服务器bgsav ...

  6. ASP.NET MVC 学习笔记之View 和Redriect的区别

    首先先说一下Redriect 和RedirectToAction 两个没什么区别,都是向浏览器发送302 Found相应,再有浏览器向对应的url进行请求 只是参数的意义不同而已 再说Redirect ...

  7. 杭电多校第四场-H- K-th Closest Distance

    题目描述 You have an array: a1, a2, , an and you must answer for some queries.For each query, you are g ...

  8. mysql莫名报"unknown column ... in 'on clause'"

    今天遇见个会诡异的问题 一个web程序本地调试的好好的,结果发布到服务器上程序就报错了,报"unknown column ... in 'on clause'",网上搜了下,说是m ...

  9. python 文件复制压缩

    import os import time #这里是需要文件所在的位置 source=['"C:\\My Documents"',"C:\\Code"] #转换 ...

  10. centos 安装 ImageMagick

    ImageMagick很好用,shell下可以批量对图片做处理,很赞!~ 编译安装 wget http://www.imagemagick.org/download/ImageMagick.tar.g ...