Echarts基础配置记录

228 阅读2分钟

前言:这两天学习和看了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值自动生成

image.png

修改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;
  }
}

image.png

总结

  • echarts基础配置
  • rem适配方案
  • flexible.js插件的使用

参考

Echarts官方文档:echarts.apache.org/handbook/zh…

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