最近在做一个轮播图,使用的是element的Carousel走马灯,每一个走马灯里是eachrts图,开始页面加载的时候发现echarts图并不能自适应,开始以为是走马灯的问题,后来发现不是

不知道大家在用echarts的时候有没有遇到这种情况:

最开始盛放图表的容器是隐藏(或者tab切换)的,然后再显示的时候,里面echarts图表就没用初始大小了。比如我遇到的这种:

有童鞋这会儿估计看出原因了:因为元素最初隐藏,再显示之后没有自动变化宽度,所以echarts图表没有初始宽高,官方文档的说法:

请注意:这个宽度在一些情况下设置 百分比 是没有作用的,所以得设置为具体数字或者用js赋值,类似这种:

$('main').style.width = (document.body.clientWidth-300)*0.6+'px';

P.S:这里没说高度是因为如果不给容器固定高度,图表是完成不显示的(高度为0的容器肯定不会显示哦)

那么如果想设置echart图表随窗口的缩放变化呢?以下两种写法都可以:

第一种:

window.onresize = myChart.resize;
// .resize后不用加括号哦,一般如果window resize的时候不设置其他,可以这样写

第二种:

window.onresize = function () {
this.myChart.resize();
// .resize后加括号哦,这里还可以写其他的事件
};

echarts官方文档写的很详细哦,需要的童鞋自己去翻阅。

具体到我的代码,我是这样实现的,因为我的容器是百分比写的,所以我的实现方式如下:

即是dom节点渲染以后,调用echarts实例的resize()方法;

echarts图表初始大小问题及echarts随窗口变化自适应的更多相关文章

  1. Echarts图表统计学习

    史上最全的Echarts图表学习文档 http://echarts.baidu.com/doc/doc.html 勤加练习,多做总结! http://www.stepday.com/topic/?79 ...

  2. Echarts图表插件(4.x版本)使用(二、带分类筛选的多个图表/实例化多个ECharts,以关系图/force为例)

    导读 如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...

  3. vue3.x版本安装element-ui、axios及echarts图表插件

    项目中安装使用element-UI 命令行: vue add element 安装成功后,项目会自动将element-UI引入项目中,刷新项目即可 项目中安装使用axios数据请求 vue add a ...

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

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

  5. echarts图表自适应盒子的大小(盒子的大小是动态改变的),大到需要全屏展示

    项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...

  6. mui在tab选项卡中echarts图表不能动态随页面变化大小 只能固定大小

    在mui tab选项卡中一直都不能让echarts动态变化大小 只能固定大小来展示图表,网上说的window.onresize = mycharts.resize;方法根本就没有效果,后面在https ...

  7. echarts图表自适应浏览器窗口的大小

    echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...

  8. echarts图表第一个案例

    1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...

  9. 图表插件使用汇总(echarts,highchairts)

    1.echarts之饼图显示数字 option={ title: { text: '某站点用户访问来源', subtext: '纯属虚构', x: 'center' }, tooltip: { tri ...

随机推荐

  1. InnoDB: Error: log file .\ib_logfile0 is of different size 0 10485760 bytes

    启动WAMP Server的时候报例如以下的错误: 140618 23:12:32 [Note] Plugin 'FEDERATED' is disabled. 140618 23:12:32 Inn ...

  2. Unity3D-碰撞測试

    碰撞測试这个再游戏的开发中是非常有必要的.当敌人的攻击的时候,发生碰撞这时候就会造成一定的伤害,因此我们须要依据受到的伤害对用户的生命值进行控制,因此碰撞的測试是 我们在游戏的开发过程中须要的一种比較 ...

  3. Android Studio最新配置教程2016

    http://blog.csdn.net/wen_demo 一.Android studio 基本简单介绍 1.Android studio和Eclipse的差别: 1.Studio中有Project ...

  4. luogu2679 子串

    题目大意 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一 个新的字符串,请问 ...

  5. luogu2346 四子连棋

    题目大意 在一个4*4的棋盘上摆放了14颗棋子,其中有7颗白色棋子,7颗黑色棋子,有两个空白地带,任何一颗黑白棋子都可以向上下左右四个方向移动到相邻的空格,这叫行棋一步,黑白双方交替走棋,任意一方可以 ...

  6. c++ vector数组的定义使用

    /* *********************************************** Author :guanjun Created Time :2017/3/18 13:32:52 ...

  7. E: Unable to lock the administration directory (/var/lib/dpkg/)

    如何修复 Ubuntu 中的“Unable to lock the administration directory (/var/lib/dpkg/)” 在 Ubuntu 或者它的衍生版如 Linux ...

  8. cf 749D Leaving Auction

    Leaving Auction time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  9. ADTS结构

    ADTS全称是(Audio Data Transport Stream),是AAC的一种十分常见的传输格式.转载请注明来自:http://www.binkery.com/ ADTS内容及结构一般情况下 ...

  10. codeforces educational round 25

    A 出题人不给样例解释...具体程序 #include<bits/stdc++.h> using namespace std; int n; ]; int main() { scanf() ...