ECharts数据可视化

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

数据可视化

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

使用技术

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

使用软件和插件

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

01头部部分

index.html

header展示效果

公共面板模块 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公共样式部分

效果：