门头沟营销型网站建设,科技霸主从新能源车开始,2014网站设计,涉县专业做网站Echarts 教程一 可视化大屏幕适配方案可视化大屏幕布局方案Echart 图表通用配置部分解决方案1. titile2. tooltip3. xAxis / yAxis 常用配置4. legend5. grid6. series7.color Echarts API 使用全局echarts对象echarts实例对象 可视化大屏幕适配方案 rem flexible.js 关于flex… Echarts 教程一 可视化大屏幕适配方案可视化大屏幕布局方案Echart 图表通用配置部分解决方案1. titile2. tooltip3. xAxis / yAxis 常用配置4. legend5. grid6. series7.color Echarts API 使用全局echarts对象echarts实例对象 可视化大屏幕适配方案 rem flexible.js 关于flexible.js flexible.js是手淘开发出的一个用来适配移动端的js框架。手淘框架的核心原理就是根据网页中的width给html根节点设置font-size然后根据font-size计算出rem最后用rem替代px。 举个日常开发的例子 现在有两个手机一个手机的屏幕宽度是375px一个是750px设计稿给我们的宽度是375px那我们按照设计稿的设计在375px的手机上刚好完美匹配但是却会发现在750px的手机上页面只有一半空白了一半。flexible.js 会把屏幕等分成10等份。如果一块区域在A手机上占1/10。那使用B手机也是1/10。 简单来说flexible.js 让屏幕等比那屏幕中的元素自然也就等比缩放了。 // flexible.js 源码
var docEl document.documentElement // 返回文档的root元素,即html
var rem docEl.clientWidth / 10
docEl.style.fontSize rem px从源码中得知1rem 屏幕宽度的1/10
比如设计稿是1920*1080的那1rem 192px 一般来说设计稿会给定1920*1080的分辨率。 我们一般会修改flexible.js的源码改成24等份。这样1rem 80px // flexible.js 源码修改
var docEl document.documentElement // 返回文档的root元素,即html
var rem docEl.clientWidth / 24
docEl.style.fontSize rem px可视化大屏幕布局方案
整体body部分放背景图缩放100% (background-size:100% 100%)header部分 2.1 确定高度 2.1 放背景图缩放100%main部分flex 布局划分主体区域即可公共面板部分 4.1 确定高度 4.2 标题三元素(height:50px; line-height:50px; text-align:center) 4.3 放图表。
Echart 图表通用配置部分解决方案
1. titile 有三个通用的配置文字样式, 标题边框, 标题位置 2. tooltip tooltip有三种通用的配置触发类型,触发时机,格式化。 3. xAxis / yAxis 常用配置 axis 通用配置 坐标轴刻度,坐标轴轴线,坐标轴刻度线 4. legend 图例通用配置formatter格式化,文字样式 5. grid grid 其实就是图表离着Dom容器的距离可以配置这个来改变图表的大小。 6. series series 常用配置type类型,name名称,itemStyle样式 7.color 调色盘颜色列表。如果series没有设置颜色则会依次循环从该列表中取颜色作为系列颜色。 Echarts API 使用
全局echarts对象 init()初始化图表 、 registerTheme()图表主题、 registerMap() 图表地图 echarts实例对象 setOptions() 设置选项。 resize() 自适应。 on/off 绑定解绑事件(鼠标事件或者自带的事件)。 dispatchActionJS代码模拟用户行为(点击按钮折线图某条高亮)。 clear() 清除图表setOpions()后图表展示。 dispose()清除图表setOption()后不展示。
