ECharts.js 移动端显示

现在很多时候,我们是在用手机、pad等一些移动端设备来进行办公获取数据。所以我们的图表很多时候是需要用移动端设置来查看的,而我们的图表有时候因为数据的偏多,会出现遮挡和重叠的情况。这个时候就需要对移动端的图标显示做一些优化,ECharts对于移动端的优化和支持主要有2个方面。

一、ECharts组件的定位和布局

组件的定位官方描写的比较详细也比较全,我的简单理解为,ECharts.js对于图表里面每个组件和工具都采用了两种尺寸单位和设置固定位置。

一种是比较直接的 像素(px),设置的时间直接以 number 形式填写。比如

  1. title:{
  2. text:'ECharts 数据统计',
  3. top:20
  4. }

这里就是设置标题组件的距离上面的高度是20px。

还有一种是安装百分比(%)的形式来设置的,百分比值是 string 类型,需要加上引号。比如

  1. legend:{
  2. data:['访问量','用户量'],
  3. left:'50%'
  4. }

这里标识legend组件的位置距离左侧的距离是整个图表的50%宽度

另外可以通过固定的值来设置所在位置,比如:

  • 可以设置 left: 'center',表示水平居中。
  • 可以设置 top: 'middle',表示垂直居中。

另外针对不同类型的图标还有不同的定位方式。

布局这块可以简单归结为两种,一种是 横向(horizontal)显示,一种是 纵向(vertical)显示。

二、ECharts自适应能力Media Query

Media Query 提供了『随着容器的尺寸改变而改变』的能力。

  1. option = {
  2. baseOption: { // 这里是基本的『原子option』。
  3. title: {...},
  4. legend: {...},
  5. series: [{...}, {...}, ...],
  6. ...
  7. },
  8. media: [ // 这里定义了 media query 的逐条规则。
  9. {
  10. query: {...}, // 这里写规则。
  11. option: { // 这里写此规则满足下的option。
  12. legend: {...},
  13. ...
  14. }
  15. },
  16. {
  17. query: {...}, // 第二个规则。
  18. option: { // 第二个规则对应的option。
  19. legend: {...},
  20. ...
  21. }
  22. },
  23. { // 这条里没有写规则,表示『默认』,
  24. option: { // 即所有规则都不满足时,采纳这个option。
  25. legend: {...},
  26. ...
  27. }
  28. }
  29. ]
  30. };

  1. 上面的例子中,baseOption、以及 media 每个 option 都是『原子 option』,即普通的含有各组件、系列定义的 option。而由『原子option』组合成的整个 option,我们称为『复合 option』。baseOption 是必然被使用的,此外,满足了某个 query 条件时,对应的 option 会被使用 chart.mergeOption()  merge 进去。

多个 query 被满足时的优先级:

注意,可以有多个 query 同时被满足,会都被 mergeOption,定义在后的后被 merge(即优先级更高)。

默认 query:

如果 media 中有某项不写 query,则表示『默认值』,即所有规则都不满足时,采纳这个option。

容器大小实时变化时的注意事项:

在不少情况下,并不需要容器DOM节点任意随着拖拽变化大小,而是只是根据不同终端设置几个典型尺寸。

但是如果容器DOM节点需要能任意随着拖拽变化大小,那么目前使用时需要注意这件事:某个配置项,如果在某一个 query option中出现,那么在其他 query option 中也必须出现,否则不能够回归到原来的状态。(left/right/top/bottom/width/height 不受这个限制。)

『复合 option』 中的 media 不支持 merge

也就是说,当第二(或三、四、五 ...)次 chart.setOption(rawOption) 时,如果 rawOption 是 复合option(即包含 media 列表),那么新的 rawOption.media 列表不会和老的 media 列表进行 merge,而是简单替代。当然,rawOption.baseOption 仍然会正常和老的 option 进行merge。

其实,很少有场景需要使用『复合 option』来多次 setOption,而我们推荐的做法是,使用 mediaQuery 时,第一次setOption使用『复合 option』,后面 setOption 时仅使用 『原子 option』,也就是仅仅用 setOption 来改变 baseOption

以上是EChart提供的关于移动端小屏幕自适应的方法,我另外提供一种方式

通过JS识别浏览器信息,然后根据所得的信息,设置图表容器的尺寸,然后再结合EChart的media query更好的展示图表

检测是否为移动端的JS

  1. var ismobile = false;
  2. var browser = {
  3. versions: function () {
  4. var u = navigator.userAgent, app = navigator.appVersion;
  5. return {
  6. trident: u.indexOf('Trident') > -1, //IE内核
  7. presto: u.indexOf('Presto') > -1, //opera内核
  8. webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
  9. gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
  10. mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
  11. ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
  12. android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
  13. iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
  14. iPad: u.indexOf('iPad') > -1, //是否iPad
  15. webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
  16. };
  17. }(),
  18. language: (navigator.browserLanguage || navigator.language).toLowerCase()
  19. }
  20. ismobile = browser.versions.mobile;
这段代码能够识别大部分的移动端设备的浏览器信息,对于一些特殊的浏览器可能会存在缺陷

根据浏览器尺寸,设置图表容器的大小

  1. if (browser.versions.mobile) {
  2. window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
  3. $("#chartmain").height(pageheight*0.6);
  4. $("#chartmain").width(pagewidth * 0.95);
  5. }
  6. else {
  7. $("#chartmain").height("500px");
  8. $("#chartmain").width("700px");
  9. }
  10.  
  11. function hengshuping(){
  12. if(window.orientation==180||window.orientation==0){
  13. $("#chartmain").height($(window).height()-20);
  14. $("#chartmain").width("100%");
  15. }
  16. if(window.orientation==90||window.orientation==-90){
  17. $("#chartmain").height($(window).height()-20);
  18. $("#chartmain").width("100%");
  19. }
  20. }

结合EChart的 Media Query 设置图表参数

  1. function init(){
  2. ///折现报表实现代码
  3. var myChart = echarts.init(document.getElementById('chartmain'));
  4. option = {
  5. baseOption:{
  6. title : {
  7. text: '奶牛数字化养殖报表',
  8. subtext: '西部电子数据采集'
  9. },
  10. tooltip : {
  11. trigger: 'axis'
  12. },
  13. legend: {
  14. data:['每日饲喂量','产奶量']
  15. },
  16. toolbox: {
  17. show : true,
  18. feature : {
  19. mark : {show: true},
  20. dataView : {show: true, readOnly: false},
  21. magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
  22. restore : {show: true},
  23. saveAsImage : {show: true}
  24. }
  25. },
  26. calculable : true,
  27. xAxis : [
  28. {
  29. type : 'category',
  30. boundaryGap : false,
  31. data : ['周一','周二','周三','周四','周五','周六','周日']
  32. }
  33. ],
  34. yAxis : [
  35. {
  36. type : 'value'
  37. }
  38. ],
  39. series : [
  40. {
  41. name:'每日饲喂量',
  42. type:'line',
  43. smooth:true,
  44. itemStyle: {normal: {areaStyle: {type: 'default'}}},
  45. data:[100, 200, 150, 130, 260, 830, 710]
  46. },
  47. {
  48. name:'产奶量',
  49. type:'line',
  50. smooth:true,
  51. itemStyle: {normal: {areaStyle: {type: 'default'}}},
  52. data:[30, 182, 216, 156, 390, 300, 356]
  53. }
  54. ]
  55. },
  56. media:[
  57. //media开始
  58. {
  59. query:{},
  60. option:{
  61. title : {
  62. text: '奶牛数字化养殖报表',
  63. subtext: '西部电子数据采集'
  64. },
  65. tooltip : {
  66. trigger: 'axis'
  67. },
  68. legend: {
  69. data:['每日饲喂量','产奶量']
  70. },
  71. toolbox: {
  72. show : true,
  73. feature : {
  74. mark : {show: true},
  75. dataView : {show: true, readOnly: false},
  76. magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
  77. restore : {show: true},
  78. saveAsImage : {show: true}
  79. }
  80. },
  81. calculable : true,
  82. xAxis : [
  83. {
  84. type : 'category',
  85. boundaryGap : false,
  86. data : ['周一','周二','周三','周四','周五','周六','周日']
  87. }
  88. ],
  89. yAxis : [
  90. {
  91. type : 'value'
  92. }
  93. ],
  94. series : [
  95. {
  96. name:'每日饲喂量',
  97. type:'line',
  98. smooth:true,
  99. itemStyle: {normal: {areaStyle: {type: 'default'}}},
  100. data:[100, 200, 150, 130, 260, 830, 710]
  101. },
  102. {
  103. name:'产奶量',
  104. type:'line',
  105. smooth:true,
  106. itemStyle: {normal: {areaStyle: {type: 'default'}}},
  107. data:[30, 182, 216, 156, 390, 300, 356]
  108. }
  109. ]
  110. }
  111. },
  112. {
  113. query:{maxWidth:400,ismobile:true},
  114. option:{
  115. title : {
  116. text: '奶牛数字化养殖报表',
  117. subtext: '西部电子数据采集'
  118. },
  119. tooltip : {
  120. trigger: 'axis'
  121. },
  122. legend: {
  123. data:['每日饲喂量','产奶量'],
  124. right: 'center',
  125. bottom: 0,
  126. orient: 'horizontal'
  127. },
  128. toolbox: {
  129. show : true,
  130. orient:'vertical',
  131. feature : {
  132. mark : {show: true},
  133. dataView : {show: true, readOnly: false},
  134. magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
  135. restore : {show: true},
  136. saveAsImage : {show: true}
  137. }
  138. },
  139. calculable : true,
  140. xAxis : [
  141. {
  142. type : 'category',
  143. boundaryGap : false,
  144. data : ['周一','周二','周三','周四','周五','周六','周日']
  145. }
  146. ],
  147. yAxis : [
  148. {
  149. type : 'value'
  150. }
  151. ],
  152. series : [
  153. {
  154. name:'每日饲喂量',
  155. type:'line',
  156. smooth:true,
  157. itemStyle: {normal: {areaStyle: {type: 'default'}}},
  158. data:[100, 200, 150, 130, 260, 830, 710]
  159. },
  160. {
  161. name:'产奶量',
  162. type:'line',
  163. smooth:true,
  164. itemStyle: {normal: {areaStyle: {type: 'default'}}},
  165. data:[30, 182, 216, 156, 390, 300, 356]
  166. }
  167. ]
  168. }
  169. }
  170.  
  171. //media结束
  172. ]
  173. };
  174.  
  175. myChart.setOption(option);
  176. }

效果展示

学习EChart.js(四) 移动端显示的更多相关文章

  1. OpenLayers学习笔记(四)— QML显示html中openlayers地图的坐标

    GitHub:八至 作者:狐狸家的鱼 本文链接:实现QML中显示html中地图的坐标 如何QML与HTML通信已经在这篇文章 QML与HTML通信之画图 详细讲述了 1.HTML var coord; ...

  2. react.js学习之路四

    针对学习react.js中,我感觉最大的疑惑点就是bind(this)的绑定和指向问题了,我被这个问题弄的头昏,有时候调用组件的时候,直接显示undefined,不存在这个组件,当时的心情是崩溃的,整 ...

  3. JavaWeb和WebGIS学习笔记(四)——使用uDig美化地图,并叠加显示多个图层

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  4. echart.js的使用与API

    ---恢复内容开始--- echart.js的使用与API 1.echart.js的使用: 第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echar ...

  5. 如何系统地学习Node.js?

    转载自知乎:http://www.zhihu.com/question/21567720 ------------------------------------------------------- ...

  6. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  7. 从零开始学习Vue.js,学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  8. 前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器

    一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...

  9. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

随机推荐

  1. 数组相关方法积累(vue\ag等特别常用)

    改变原数组的: shift:将第一个元素删除并且返回删除元素,空即为undefined unshift:向数组开头添加元素,并返回新的长度 pop:删除最后一个并返回删除的元素 push:向数组末尾添 ...

  2. TLD(Tracking-Learning-Detection)一种目标跟踪算法

    原文:http://blog.csdn.net/mysniper11/article/details/8726649 视频介绍网址:http://www.cvchina.info/2011/04/05 ...

  3. 时间格式转换成JUN.13,2017

    SimpleDateFormat sdf = new SimpleDateFormat("MMM.dd,yyyy", Locale.ENGLISH); String negotia ...

  4. CSS浮动的3个特性(高手绕行)

    1.  浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示: 代码示例: <!DOCTYPE HTML > <html> <hea ...

  5. nodejs的gridfs基本操作

    var mongoose = require('mongoose'); var Schema = mongoose.Schema; mongoose.connect('mongodb://127.0. ...

  6. golang学习之defer

    golang中的defer通常用于执行一些资源释放性操作,比如open/close.connect/disconnect.lock/unlock等,对defer理解主要记住以下三点: 1.defer ...

  7. Java基础(3)——变量

    从这篇文章起开始正式进入正题啦,本文将较为简单的介绍一下变量以及常量.变量,顾名思义,就是可以变的量,常量那么久相反了,常常不变的量就叫常量._(¦3」∠) 变量 在 Java 中,任何一个变量都得有 ...

  8. Qless 相关知识

    Qless是一个基于redis的分布式任务架构.相关代码在 https://github.com/seomoz/qless 它是完全有lua实现的,依靠 redis 对lua的支持,http://ww ...

  9. Redis-SDS

    Redis 的简单动态字符串 (simple dynamic string,SDS) SDS的结构: struct sdshdr { int len;  //保存的字符串长度. int free;  ...

  10. axios使用初涉

    看vue的时候,vue2.0推荐使用axios做http请求,今天就学一下axios基本使用. 安装 axios 推荐npm方法(npm是node.js环境下的包管理器): npm install a ...