theme: channing-cyan
前言:这两天学习和看了echarts文档,觉得很酷炫,就尝试写了个可视化大屏的小项目。
源码地址:https://gitee.com/boheweb/echarts-demo
Echarts-基础配置
echarts九大配置信息
- title:标题组件
- tooltip: 提示狂组件
- legend: 图例组件
- toolbox: 工具栏
- grid:直角坐标
- xAxis: 执教坐标系grid中的x轴
- yAxis:直角坐标系grid中的y轴series:系列列表。
- color:调色盘颜色列表
series:系列列表
- type:类型(什么类型的图表)比如 line是折线bar柱形等
name:系列名称,用于tooltip的显示,legend 的图例筛选变化 stack:数据堆雪。如果设置相同值,则会数据堆叠。
数据堆叠:
- 第二个数据值 = 第一个数据值+第二个数据值
- 第三个数据值 = 第二个数橱值+第三个数据值....依次加
rem适配
- 设计稿是1920px
- PC端适配:宽度在1024~1920之间页面元素宽高自适应
- flexible.js把屏幕分为24等份
- px2rem插件的基准值是80px
- 要把屏幕宽度约束在1024~1920之间有适配,实现代码:
使用插件flexible.js
检测浏览器宽度实时修改html
文字大小
页面元紊根据rem
适配大小配合px2rem
插件
采用flex
布局 I
安装插件px2rem
插件flexible.js
把屏幕分为24等份
PC端的效果图是1920px
rem插件的基准值是80
px
rem值自动生成
修改flexible.js js var rem = docEL.clientWidth / 24
要把屏幕宽度约束在1024~1920之间有适配,也就是小于1024以及大于1920都不要进行缩放了 css @media screen and (max-width: 1024px) { html { font-size: 42.66px!important; } } @media screen and (min-width: 1920px) { html { font-size: 80px!important; } }
总结
- echarts基础配置
- rem适配方案
- flexible.js插件的使用
参考
Echarts官方文档:https://echarts.apache.org/handbook/zh/get-started/
jQuery在线手册:https://www.runoob.com/manual/jquery/