Echarts基础配置记录

前言：这两天学习和看了echarts文档，觉得很酷炫，就尝试写了个可视化大屏的小项目。

源码地址：gitee.com/boheweb/ech…

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

var rem = docEL.clientWidth / 24

要把屏幕宽度约束在1024~1920之间有适配，也就是小于1024以及大于1920都不要进行缩放了

@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官方文档：echarts.apache.org/handbook/zh…

jQuery在线手册：www.runoob.com/manual/jque…