# ECharts_visualization_screen
B站黑马前端《ECharts数据可视化项目》学习笔记：使用ECharts制作前端可视化大屏。
视频地址：https://www.bilibili.com/video/BV1v7411R7mp?p=1
# 页面展示
* 本人按教程制作得到的页面如下：https://bupt-ningxinyu.github.io/ECharts_visualization_screen/demo/index.html
* 在demo基础上制作智慧园区数据监控面板如下：https://bupt-ningxinyu.github.io/ECharts_visualization_screen/smartcity_visualization_screen/index.html
# 文件夹说明
* echart文件夹是B站黑马前端原版本，地址：https://gitee.com/xiaoqiang001/eckarts_open_class/tree/master
* demo文件夹是我的视频教程跟练版本，所需的一些脚本库文件如flexible.js从echart文件夹复制得到。
* smartcity_visualization_screen文件夹是我在demo基础上改进的智慧城市可视化面板。
# 课程技术栈
* 基于 flexible.js + rem 智能大屏适配
* VSCode cssrem 插件
* Flex 布局
* Less 使用
* 基于 ECharts 数据可视化展示。官网：https://echarts.apache.org/zh/index.html
* ECharts 柱状图数据设置
* ECharts 地图引入
* 由于引入地图来自echarts gallery，目前已经无法访问。该部分代码直接复制B站课程相应代码
Bilibili黑马前端“ECharts数据可视化项目”学习笔记：使用ECharts创建前端可视化大屏幕。在此基础上，创建智能停车场数据监控面板_ ECharts_visization_screen.zip （50个子文件） 
ECharts_visualization_screen-master demo font 
DS-DIGIT.TTF 25KB js flexible.js 1KB china.js 136KB echarts.min.js 727KB index.js 25KB jquery.js 82KB css index.less 7KB index.css 5KB
index.html 4KB images 
weather.png 2KB jt.png 72KB lbx.png 81KB line.png 4KB
bg.jpg 252KB head_bg.png 8KB map.png 302KB smartcity_visualization_screen font DS-DIGIT.TTF 25KB js flexible.js 1KB echarts.min.js 727KB index.js 14KB jquery.js 82KB css index.less 10KB index.css 7KB index.html 6KB images weather.png 2KB jt.png 72KB lbx.png 81KB line.png 4KB bg.jpg 252KB head_bg.png 8KB map.png 302KB echart font DS-DIGIT.TTF 25KB js flexible.js 1KB myMap.js 9KB china.js 136KB echarts.min.js 727KB index.js 15KB jquery.js 82KB css index.less 5KB index.css 5KB index.html 3KB images weather.png 2KB jt.png 72KB lbx.png 81KB bg.jpg 252KB line(1).png 4KB head_bg.png 8KB map.png 302KB README.md 1KB B站黑马前端《ECharts数据可视化项目》学习笔记：使用ECharts制作前端可视化大屏。在此基础上制作智慧园区数据监控面板。_ECharts_visualization_screen 项目内附说明 
如果解压失败请用ara软件解压.txt 42B资源评论
