为了直观查看公司服务器各个进程占用的内存动态情况,我使用echarts进行数据可视化,具体的实现过程按下不表。

最后实现的效果如图:

然后问题就来了,因UI采用了Bootstrap响应式框架,所以除了图表之外其他都是响应式。当窗口缩小后,就会发生很尴尬的出界事件。

如图:

针对这个问题,刚开始的解决思路及方法:把echart容器的宽度设置为100%;

<div class="col-sm-12 row" id="logic1_node" style="width:100%;height:700px"></div>

这样之后依然存在问题:页面初始的宽度是多少,canvas宽度就是多少,之后不会再变化

便尝试通过jsDOM操作,强行令canvas的宽度为100%,however too young too simple

调整浏览器宽度发现,canvas画布的宽度是随之变化的,然而画布里面的图表内容却像被挤压在一起的馅饼,模糊扭曲了。

到这里细心的同学可以发现,echart图表一旦绘制成功,内容就不会再变化。所以对于echart图表,其"响应式"应该是可以随着窗口调整不断被重新绘制,不是简单的调整宽高。

到echart官网看了Example,发现官网的实例都具有响应式功能,确实不是单纯的宽度改变,是每次调整后图表是重新绘制。猜想echart源码里应该有resize这个API,打开调试器,打开echart源码,Ctrl+F,果然找到了。

再仔细查看官方文档:

echart图表本身是提供了一个resize的函数的。

于是当浏览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas。(也可以通过其他事件触发)

---over---

一起来玩echarts系列(二)------echarts图表自适应问题的更多相关文章

  1. windows下mongodb基础玩法系列二CURD附加一

    windows下mongodb基础玩法系列 windows下mongodb基础玩法系列一介绍与安装 windows下mongodb基础玩法系列二CURD操作(创建.更新.读取和删除) windows下 ...

  2. windows下mongodb基础玩法系列二CURD操作(创建、更新、读取和删除)

    windows下mongodb基础玩法系列 windows下mongodb基础玩法系列一介绍与安装 windows下mongodb基础玩法系列二CURD操作(创建.更新.读取和删除) windows下 ...

  3. windows下mongodb基础玩法系列一介绍与安装

    windows下mongodb基础玩法系列 windows下mongodb基础玩法系列一介绍与安装 windows下mongodb基础玩法系列二CURD操作(创建.更新.读取和删除) windows下 ...

  4. 深入浅出ECharts系列 (二) 折线图

    深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载 ...

  5. ECharts学习总结(二)-----图表组件漏斗图(funnel)

    今天在学习ECharts时,想要在ECharts图表的原生态Demo中抠出漏斗图,却不知如何下手,经过一番研究,特总结如下: 首先我们需要这样做 1.拷贝出两个js文件:esl.js 和echarts ...

  6. Angular echarts图表自适应屏幕指令

    关于echarts图表自适应问题 一.引入js文件 1. 在html页面引入angular.min.js文件 2. 在html页面引入echarts.min.js文件 3. 在html页面引入app. ...

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

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

  8. echarts入门,5分钟上手写ECharts的第一个图表

    1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...

  9. 深入浅出ECharts系列(一)地图+散点图

    深入浅出ECharts系列(一) 目标 本次教程的目标是实现“微博签到点亮中国”散点图,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你 ...

  10. vue和echarts 封装的 v-charts 图表组件

    https://v-charts.js.org/#/ 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2. ...

随机推荐

  1. Android 4.4堆叠结构的变化

    我们知道,activity 在 AMS 的形式是 ActivityRecord,task 在 AMS 的形式TaskRecord,流程 AMS 该管理形式 ProcessRecord. 我们先看下 4 ...

  2. CentOS上安装WordPress搭建博客平台

    前两天在服务器上搭建了AMP,今天试着在上面安装了一个WordPress(中文:http://cn.wordpress.org/,英文:http://wordpress.org/),我安装的是英文最新 ...

  3. [译]JDK 6 and JDK 7中的subString()方法

    (说明,该文章翻译自The substring() Method in JDK 6 and JDK 7) 在JDK 6 and JDK 7中的substring(int beginIndex, int ...

  4. .Net Framework基础知识

    .net常识 .net framework是微软为开发应用程序而创建的一个富有革命性的新平台:   .net可以用来开发windows应用程序,web应用程序,web服务和其它各种类型的程序.   . ...

  5. List environment variables from Command Prompt

    Request: List the environment variables from Command Promt To list one varibales , the syntax is lik ...

  6. android微信付费

    原文地址:http://blog.csdn.net/intbird 微信官方文档地址:t=resource/res_main_tmpl&verify=1&lang=zh_CN" ...

  7. 使用GDB调试器(一)

    使用GDB调试器 GDB概要---- GDB是GNU开源组织公布的一个强大的UNIX下的程序调试工具.也许,各位比較喜欢那种图形界面方式的,像VC.BCB等IDE的调试,但假设你是在UNIX平台下做软 ...

  8. 在SQL Server中添加Linked Server 图解版

    在开发中,经常需要一个SQL Server服务器去访问另一个服务器,微软提供了一种方式Linked Server 下面是配置流程: 1).打开Server Objects下 Linked Server ...

  9. 利用servlet产生随机数,原理是获取Graphics对象进行绘图

    public class ResonpeRandomImgDemo extends HttpServlet { int width=100; int height=30; public void do ...

  10. Net 4.0 之 Dynamic 动态类型

    Net 4.0 之 Dynamic 动态类型 本文主要旨在与网友分享.Net4.0的Dynamic 对Duck Type 的支持.     一..net4.0主要新特性 .Net4.0在.Net3.5 ...