大数据平台展示可视化效果,echarts图表实战项目(源码50套)

本文介绍了如何利用HTML5的echarts框架创建动态图表,从基础Demo到实战项目,实现大屏数据展示。作者分享了入门步骤、代码示例,并讲述了在电视展示中遇到的问题及解决方案。

本文重点介绍HTML5图表框架echarts入门Demo及实战项目(含源码),以此来实现echarts大屏展示大数据平台可视化酷炫效果。

缘起:最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据,效果要高大上,充分展示咱们公司的实力,给各位来公司参观的大能们留下深刻的印象。

还好之前接触过HTML5,所以第一时间想到就是echarts,这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的,入门也非常大简单。

Echart图例使用

说干就干,首先到官网上把框架下下来,各组件Demo和API都熟悉下,对于你想要的东西和效果心里有个底,就开始动工了。

官网地址是:https://echarts.apache.org,里面的Demo都是代码和效果图文并貌,还可以在线修改运行看效果,非常的赞。

5 分钟上手 ECharts
1、引入 ECharts
通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
   <!-- 引入 ECharts 文件 -->
   <script src="echarts.min.js"></script>
</head>
</html>

2、绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id
【资源说明】 基于Vue的大数据可视化平台源码+项目部署说明(集成了安全预警系统).zip 1、该资源内项目代码都是经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能。 1.简介 1.1 系统背景 ​ 随着物联网的不断发展以及大数据时代的到来,现在网络上传输的数据量不断地增加,例如物联网节点嵌入式设备的传感数据、智能家居的智能控制节点,如使用传统方式对数据以及设备进行管理,在设备以及数据种类的不断增加下,现有的方式可能会影响用户的实际体验。同时,由于数据具有不同的表现形式,例如符号、文字、数字等类型的数据,在庞大数据量的情况下,如果不经过处理直接展示给用户,那么用户的体验是非常糟糕的,以此为背景,本团队设计了BDI-IoT物联网可视化平台 2.注册 2.1注册界面 ![img](md-img/clip_image000.png) - 注册时,用户需输入合法的注册信息项,包括“用户名”、“密码”、“确认密码”、“姓名”、“昵称”、“手机号”、“性别”等,并勾选“同意条款和协议并完成注册“选项,点击注册按钮即可注册成功成为本软件会员。 - 点击“已经有账号了,点击这里登入”文字,可跳转至登录页面。 **以下是注册信息项合法标准:** - 用户名:由5-18个字符组成,只能包括数字、字母和下划线。 - 密码:由5-18个字符组成,只能包括数字、字母和下划线。 - 再次确认密码:和输入的“密码”完全一致 - 姓名:用户真实姓名 - 昵称:自定义昵称,不受字符限制。 - 手机号:用户真实手机号。 - 性别:用户真实性别 3.登录 3.1登录界面 ![img](md-img/clip_image001.png) - 登录界面需输入“用户名”和“密码”,验证一致后可进入系统。 - 点击注册按钮即可跳转至“注册页面”。 4.首页 4.1首页界面 ![img](md-img/clip_image002.png) - 首页由“菜单栏”、“位置监测”、“设备控制”、“设备检测”、“数据监测”等模块组成 - 菜单栏包含首页、数据分析、应用场景、用户管理等按钮,点击对应按钮可跳转至对应页面。 4.2数据时延 用户可通过选择器,选择数据更新频率。 4.2位置监测 ![img](md-img/clip_image004.png) - “设备检测”模块显示的是真实地图、真实传感设备所在位置及显示对应的设备ID。用户可通过鼠标滚轮缩放地图。 4.3设备控制 ![img](md-img/clip_image005.png) - “管理员”用户可通过“设备控制”模块的开关,控制实体设备的开启和关闭。 - 向左滑动为关闭按钮显示为红色,向右滑动为开启,按钮为绿色。 4.4设备检测 ![img](md-img/clip_image006.png) - “设备检测”模块的功能为实时显示传感数据。以上对应显示“温度”、“湿度”、“光照”、“三轴加速度(X/Y/Z)”的实时传感器数据。 - 此外附有人体监测和烟雾监测显示,红外传感器监测到人体时,人体标志红色闪烁显示为报警状态,深蓝色为平静状态。烟雾传感器监测到烟雾时,烟雾标志红色闪烁显示为报警状态,深蓝色为平静状态。 4.5数据监测 ![img](md-img/clip_image007.png) # 4.5.1温度数据监测 ![img](md-img/clip_image008.png) - 该图表显示的是最新的十条温度传感数据(单位为℃) 横坐标日期格式为:月-日 - 鼠标位于具体坐标点上时显示具体日期和传感数据 时间格式为:年-月-日 时:分:秒 # 4.5.2湿度数据监测 ![img](md-img/clip_image009.png) - 该图表显示的是最新的十条湿度传感数据(单位为%) 横坐标日期格式为:月-日 - 鼠标位于具体坐标点上时显示具体日期和传感数据 时间格式为:年-月-日 时:分:秒 # 4.5.3光照数据监测 ![img](md-img/clip_image010.png) - 该图表显示的是最新的十条光照强度传感数据(单位为Lux) 横坐标日期格式为:月-日 - 鼠标位于具体坐标点上时显示具体日期和传感数据 时间格式为:
评论 8
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Crazy程序猿2020

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值