ECharts入门

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配置项相关项

 

 

 

网页地址：Documentation - Apache ECharts