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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值