ECharts数据可视化项目-笔记

https://www.bilibili.com/video/BV1v7411R7mp

数据可视化主要目的：借助图形化手段，清晰有效传输和沟通信息；把冰冷的数字转为图形，揭示蕴含在数据中的道理和规律。
项目素材地址： https://gitee.com/xiaoqiang001/eckarts_open_class.git
学习目的：
1、可视化面板布局适配屏幕
2、利用ECharts 实现柱状图展示
核心技术：
-基于 flexible.js + rem 智能大屏适配
- VScode cssrem插件
- Flex 布局
- Less 使用
- 基于ECharts 数据可视化展示
- ECharts 柱状图数据设置
- ECharts 地图引入
- Live Server 服务器.安装完成后，右键“open with Live Server”

VScode cssrem插件 : 扩展设置-》Root Font Size设置为80 ，表示1920px按24份，每份80px.
VScode EasyLESS : 将 less转为css.(less就是简便书写css的工具)
flexible.js : function setRemUnit(){ var rem = docEL.clientWidth / 24}
css中class优先选择级
js中立即执行函数。（）（）； （）（）；避免变量污染. 如(function(){var a=1;})(); (function(){var a=2;})();
css中伪类: ::befor ::after
css3特性：动画特性
display:flex(弹性盒子布局)

 1 HTML布局方式：DIV+CSS、FLEX、GRID、TABLE、IFRAME
 2    --https://www.cnblogs.com/ruchun/p/8149287.html
 3 1 DIV+CSS 盒子模型由四部分组成margin、border、padding、content。
 4
 5 2 Flex弹性布局 通过使用display：flex；或者display：inline-flex；坏处就是不能再设置子元素的float、clear、vertical-align。
 6
 7 3 Grid网格布局 通过display：grid；或者display：inline-grid；网格线将元素分成一个一个的小格子。
 8
 9 4 HTML表格、table布局
10
11       border属性 定义表格的边框，设置值是数值
12       cellpadding属性 定义单元格内容与边框的距离，设置值是数值（内间距）
13       cellspacing属性 定义单元格与单元格之间的距离，设置值是数值（外间距）
14       align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right默认左对齐
15       height设置高度
16       width设置宽度
    5 IFrame 类似LigerUi,LayUI