最近在做一个轮播图,使用的是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. golang中channels的本质详解,经典!

    原文:https://www.goinggo.net/2014/02/the-nature-of-channels-in-go.html The Nature Of Channels In Go 这篇 ...

  2. [Vue @Component] Dynamic Vue.js Components with the component element

    You can dynamically switch between components in a template by using the reserved <component>  ...

  3. Redis源代码分析(三十)--- pubsub公布订阅模式

    今天学习了Redis中比較高大上的名词,"公布订阅模式".公布订阅模式这个词在我最開始接触听说的时候是在JMS(Java Message Service)java消息服务中听说的. ...

  4. android 使用post 提交

    1.使用post 方式提交时不要把须要传递的參数写在URL 中,一定要使用 BasicNameValuePair 这个类来完毕 创建我想发送一个类似Get 方式的一个URL ---------- ht ...

  5. 放大的X(杭电2565)

    /*放大的X 请你编程画一个放大的'X'. Input 输入数据第一行是一个整数T,表示有T组測试数据: 接下来有T行,每行有一个正奇数n(3 <= n <= 79).表示放大的规格. O ...

  6. pygame save that Stream as video output.

    python - how to save pygame camera as video output - Stack Overflow  https://stackoverflow.com/quest ...

  7. 【Codeforces】 Round #374 (Div. 2)

    Position:http://codeforces.com/contest/721 我的情况 开始还是rank1,秒出C.(11:00机房都走光了,我ma到11:05才走,只打了一个小时) 结果.. ...

  8. caffe to tensorflow alexnet model

    from kaffe.tensorflow import Network class AlexNet(Network): def setup(self): (self.feed('data') .co ...

  9. python pass 的用法

    python pass用法 1.空语句 do nothing 2.保证格式完整 3.保证语义完整 4.以if语句为例: C/C++中写法: if(true) ; // do nothing else ...

  10. 类型判断----小白讲解typeof,instanceof,Object.prototype.toString.call()

    1.typeof只能判断基本类型数据, 例子: typeof 1 // "number" typeof '1' // "string" typeof true ...