Echarts基础配置记录

---

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插件的基准值是80px

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/