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. Tomcat启动脚本(1)startup.bat

    @echo off rem Licensed to the Apache Software Foundation (ASF) under one or more rem contributor lic ...

  2. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

  3. sql语句(删除重复数据只保留一条)

    用SQL语句,删除掉重复项只保留一条 在几千条记录里,存在着些相同的记录,如何能用SQL语句,删除掉重复的呢 1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select ...

  4. python之将Unicode文本标准化

    在需要比较字符串的程序中使用字符的多种表示会产生问题. 为了修正这个问题,你可以使用unicodedata模块先将文本标准化: s1 = 'Spicy Jalape\u00f1o' s2 = 'Spi ...

  5. linux系统:go build报错import cycle not allowed

    go build 困扰我多时的 go 编译报错:循环导入,代码肯定是没问题的,网上查说重新安装go 我觉得也不是太好的办法 import cycle not allowed package day01 ...

  6. mybatis中的命名空间(namespace)的作用

    mybatis中为每一个映射文件添加一个namespace,这样不同的映射文件中sql语句的id相同也不会有冲突,只要定义在映射文件中的sql语句在该映射文件中id唯一就可以

  7. Django rest_framework 自动生成接口文档

    自动生成接口文档 REST framework可以自动帮助我们生成接口文档. 接口文档以网页的方式呈现. 自动接口文档能生成的是继承自APIView及其子类的视图. 1. 安装依赖 REST fram ...

  8. teb教程3

    配置和运行机器人导航 简介:配置teb_local_planner作为navigation中local planner的插件 参考teb安装 由于局部代价地图的大小和分辨率对优化性能影响很大,因为占据 ...

  9. JS对象 屏幕分辨率的高和宽 window.screen 对象包含有关用户屏幕的信息。 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽

    屏幕分辨率的高和宽 window.screen 对象包含有关用户屏幕的信息. 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽 注意: 1.单位 ...

  10. 使用Hystrix实现断路器处理

    在之前的架构的基础上我们会发现,一旦级别低的服务宕了,会导致调用它的服务也挂掉,这样容易产生级联效应(雪崩效应),为了防止这种情况的出现,我引入了Hystrix来处理,先介绍ribbon使用Hystr ...