1.项目效果
- 可以保证实时获取数据进行分析。
- 支持大屏展示,自适应分辨率。
- 支持联动效果,一端操作,多端联动展示。
一端操作 多端联动效果(如点击一个页面的换肤,另一个页面也换肤)
2.数据结构总结
2.1数据选型
- echarts
- Vue ,Vue Router , VueX
- Webpack
- Axios(完成前后端数据的交互,前期用axios完成前端向后端数据的获取)
- WebSocket(完成前后端数据的推送,后期用WebSocket改造 变成由后端向前端进行推送)
2.2数据可视化的好处
- 把数据以更直观的形式展现 ----------> 图 表
- 更清晰有效的传达与沟通信息
- 隐藏在数据中的信息(如上升趋势下降趋势)
2.3 可视化的实现方式
2.4小结
数据可视化的概念和作用
- 将数据以图表的形式呈现
- 更有效的传达数据中的信息
常见的可视化工具
- 报表类
- BI类
- 编程类
3.ECharts的基本使用
3.1ECharts的介绍
官网地址:Apache ECharts
3.2ECharts的特点
特性网址介绍:特性 - Apache ECharts
3.3ECharts小结
- ECharts能满足绝大多数可视化图表的实现(是百度公司开发的一个可视化库)
- 兼容性强
- 使用方便
- 功能强大
- 是实现数据可视化的最佳选择之一(编码类有:ECharts.js和D3.js)
3.4ECharts的基本使用
3.4.1.五分钟上手ECharts
- 引入echarts.js文件
- 准备一个呈现图表的盒子
- 初始化echarts实例对象
- 准备配置项(饼图、折线啥的)
- 将配置项设置给echarts实例对象
原生代码示例(图就如上)
3.4.2配置项相关项