echarts学习笔记之图表自适应问题详解

前言

为了直观查看公司服务器各个进程占用的内存动态情况，我使用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。（也可以通过其他事件触发）

附：Echarts 页面多图自适应的解决办法

网上看到有不少人使用Echarts抽象出来的框架,实现自适应的效果代码:window.onresize  = option.chart.resize() ,  这个代码基本是官网上的window.onresize = myCharts.resize();的翻版。

但在实际的应用中一个页面可能会有好几个Echarts图表，而使用window.onresize = option.chart.resize() ,加载页面图表后，页面上只有一个图表会根据浏览器的变化而自适应。如果要是页面上的图表都要自适应。则需要将resize事件叠加在不同的图上面，使用一下代码可以实现。

 window.addEventListener("resize", function () {

           option.chart.resize();

         });

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • jQuery插件Echarts实现的渐变色柱状图

    jQuery插件Echarts实现的渐变色柱状图

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts柱状图</title> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="container" style="width:

  • 在Vue中使用echarts的实例代码（3种图）

    在Vue中使用echarts的实例代码（3种图）

    前言 公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图 以下数据已做脱敏处理 这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换

  • vue.js+Echarts开发图表放大缩小功能实例

    vue.js+Echarts开发图表放大缩小功能实例

    最近使用echarts来开发某系统的图表功能,先申明我以前用的ext.js,ext.js对图表有自己的一套组件,用起来也很方便.但是由于ext.js过于臃肿,公司决定使用echarts来开发图表功能.当我们使用的时候才悲催的发现,echart绘制之后,不能随着容器div的大小而变化.而我们所开发的图表是需要有放大缩小功能,于是在网上找了很久,也没有找到合适的答案,大部分是通过监听窗口大小改变事件来设置,然而并不是我们所需要的.于是自己用了一点点时间,了解了为何echarts不能重新渲染,原来是在

  • echarts学习笔记之箱线图的分析与绘制详解

    echarts学习笔记之箱线图的分析与绘制详解

    一.箱线图 Box-plot 箱线图(Boxplot)也称箱须图(Box-whisker Plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布范围,可以粗略地看出数据是否具有对称性.通过将多组数据的箱线图画在同一坐标上,则可以清晰地显示各组数据的分布差异,为发现问题.改进流程提供线索. 什么是四分位数 箱线图需要用到统计学的四分位数(Quartile)的概念,所谓四分位数,就是把组中所有数据由小到大排列并分成四等份,处于三个分割点位置的数

  • jsp使用ECharts动态在地图上标识点

    ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:＇map＇)是如何实现的. 首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里,它是一个JS的字典对象,由键/值对组成,键表示点的名称,值则表达它的坐标,由经纬度组成,它是一个数组,如[136.00,32.00]它就表示了一个坐标． 地图类型的图表需要关注的元素 title:标题,显示这个地图所表示的名称 title: { text: '清大云

  • 基于Echarts 3.19 制作常用的图形(非静态)

    基于Echarts 3.19 制作常用的图形(非静态)

    饼图: 环境:Echarts 3.19 vs2013 实现方式:ajax+ashx+json 注意事项: 官网所需格式为 [{value:23,name:'xxxx' }] 请将key 的名字不要写错 具体代码,各位看官 请下移目光. <!--请先引用文件--> <script src="../Scripts/jquery-1.8.2.min.js"></script> <script src="../Scripts/echarts/

  • 在vue中添加Echarts图表的基本使用教程

    在vue中添加Echarts图表的基本使用教程

    前言 我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网 现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D

  • echarts3 使用总结（绘制各种图表,地图）

    echarts3 使用总结（绘制各种图表,地图）

    由于项目需要自学了echarts,下面将学到的东西总结如下,如果有哪里写的不好,请批评指正 一.前期准备 1.使用echarts之前先要引入echarts.js,js可以到官网下载 2.写一个div容器用来装echarts内容,这个容器必须有高度,不然看不到内容. 3.在script中获取div容器的id,根据需要写option中的参数(也许你现在还不知道option是干嘛用的,不要着急往下看),使用setoption生成图表. (代码如下)注:后面将不再对引入js,获取id,调用option生

  • Vue2 使用 Echarts 创建图表实例代码

    在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用 通常是在需要使用图表的 .vue 文件中直接引入 import echarts from 'echarts' 也可以在 main

  • echarts学习笔记之图表自适应问题详解

    echarts学习笔记之图表自适应问题详解

    前言 为了直观查看公司服务器各个进程占用的内存动态情况,我使用echarts进行数据可视化,具体的实现过程按下不表. 最后实现的效果如图: 然后问题就来了,因UI采用了Bootstrap响应式框架,所以除了图表之外其他都是响应式.当窗口缩小后,就会发生很尴尬的出界事件. 如图: 针对这个问题,刚开始的解决思路及方法:把echart容器的宽度设置为100%: <div class="col-sm-12 row" id="logic1_node" style=&q

  • C#学习笔记- 随机函数Random()的用法详解

    Random.Next() 返回非负随机数: Random.Next(Int) 返回一个小于所指定最大值的非负随机数 Random.Next(Int,Int) 返回一个指定范围内的随机数,例如(-100,0)返回负数 1.random(number)函数介绍 见帮助文档,简单再提一下,random(number)返回一个0~number-1之间的随机整数.参数number代表一个整数. 示例: trace(random(5)); 2.Math.random() 见帮助文档.返回一个有14位精度的

  • Go语言学习笔记之文件读写操作详解

    Go语言学习笔记之文件读写操作详解

    目录 文件写 文件读 小结 文件操作比较多,分为几篇来写吧.首先是文件的读写,在平时的工程化操作中使用最多. 文件写 样例代码如下 package main import ( "bufio" "fmt" "io" "os" ) //写文件 func DoWriteFile() error { _filePath := "./test.txt" _file, _err := os.OpenFile(_file

  • jQuery学习笔记之Ajax用法实例详解

    本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.

  • React学习笔记之列表渲染示例详解

    前言 本文主要给大家介绍了关于React列表渲染的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 示例详解: 列表渲染也很简单,利用map方法返回一个新的渲染列表即可,例如: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( <ul>{listItems}<

  • Python学习笔记之自定义函数用法详解

    本文实例讲述了Python学习笔记之自定义函数用法.分享给大家供大家参考,具体如下: 函数能提高应用的模块性,和代码的重复利用率.Python提供了许多内建函数,比如print()等.也可以创建用户自定义函数. 函数定义 函数定义的简单规则: 函数代码块以def关键词开头,后接函数标识符名称和圆括号(),任何传入参数和自变量必须放在圆括号中间 函数内容以冒号起始,并且缩进 若有返回值,Return[expression] 结束函数:不带return 表达式相当于返回None 函数通常使用三个单引

  • Python学习笔记之lambda表达式用法详解

    本文实例讲述了Python学习笔记之lambda表达式用法.分享给大家供大家参考,具体如下: Lambda 表达式 使用 Lambda 表达式创建匿名函数,即没有名称的函数.lambda 表达式非常适合快速创建在代码中以后不会用到的函数. 麻烦的写法: def multiply(x, y): return x * y 使用Lambda之后: double = lambda x, y: x * y Lambda 函数的组成部分: 关键字 lambda 表示这是一个 lambda 表达式. lamb

  • Python学习笔记之For循环用法详解

    本文实例讲述了Python学习笔记之For循环用法.分享给大家供大家参考,具体如下: Python 中的For循环 Python 有两种类型的循环:for 循环和 while 循环.for 循环用来遍历可迭代对象. 可迭代对象是每次可以返回其中一个元素的对象, 包括字符串.列表和元组等序列类型,以及字典和文件等非序列类型.还可以使用迭代器和生成器定义可迭代对象 For 循环示例: # iterable of cities cities = ['new york city', 'mountain

  • Flask框架学习笔记之模板操作实例详解

    本文实例讲述了Flask框架学习笔记之模板操作.分享给大家供大家参考,具体如下: flask的模板引擎是Jinja2. 引入模板的好处是增加程序的可读性和易维护性,从而不用将一堆html代码塞在视图函数中. 还是以hello world为例.最基础的调用模板修饰文本. # 根网址 @app.route('/') def index(): # return render_template("index.html") # 可以给模板传入文本content修饰 content = "

  • python爬虫学习笔记之Beautifulsoup模块用法详解

    本文实例讲述了python爬虫学习笔记之Beautifulsoup模块用法.分享给大家供大家参考,具体如下: 相关内容: 什么是beautifulsoup bs4的使用 导入模块 选择使用解析器 使用标签名查找 使用find\find_all查找 使用select查找 首发时间:2018-03-02 00:10 什么是beautifulsoup: 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.(官方) beautif

随机推荐