ECharts数据可视化(一)

ECharts数据可视化

本人学习视频为黑马程序员，视频连接为：黑马程序员

数据可视化

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷地数字转换成图形，揭示蕴含在数据中地规律和道理。

使用技术

完成项目需要所具备地知识
1.div + css 布局
2.flex 布局
3.Less
4.原生js + jquery 使用
5.rem适配
6.echarts基础

使用软件和插件

1.VS.CODE
2.VS CODE中的插件

进行屏幕适配

上述flexible为屏幕自适应文件，可以自动缩放里面的元素，需要用rem来进行适配，px无法自动缩放拉伸
flexible文件获取(黑马程序员)
效果如下：
缩放图片

拉伸图片

01头部部分

index.html

index.less
body 设置背景图 ，缩放为 100% ， 行高1.15
css初始化
header布局
高度为100px
背景图，在容器内显示
缩放比例为 100%
h1 标题部分 白色 38像素 居中显示 行高为 80像素
时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素

showTime中时间展示

header部分LESS展示

header展示效果

02内容样式

先对index.html进行更新主体部分代码

mainbox 主体模块

1.需要一个上左右的10px 的内边距
2.column 列容器，分三列，占比 3：5：3
less样式

公共面板模块 panel

1. 高度为 310px
2. 1像素的 1px solid rgba(25, 186, 139, 0.17) 边框
有line.jpg 背景图片
3.padding为 上为 0 左右 15px 下为 40px
下外边距是 15px
4.利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5
5.新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px

左部柱形图 bar 模块(布局)

标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px
图标内容模块 chart 高度 240px
以上可以作为panel公共样式部分


展示结果

中部数字部分

上面是no 数字模块
下面是map 地图模块
1.数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
注意
2. 中间列 column 有个 左右 10px 下 15px 的外边距
3. no 模块里面上下划分 上面是数字（no-hd) 下面 是 相关文字说明(no-bd)
4. no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17)
5.no-hd 数字模块 里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
6.no-hd 利用 after 和 before制作2个小角， 边框 2px solid #02a6b5 宽度为 30px 高度为 10px
5. 小竖线 给 第一个小li after 就可以 1px宽 背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可
6. no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px

less文件展示


上诉需要导入字体文件并引用

效果展示

地图模块制作

1.地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
2.球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3
3.旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 0.6 做旋转动画 利用z-index压住球体
4.旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
less展示map组件

效果：