摘 要

继互联网 的概念被提出之后，工业产业迅猛发展，并进入工业4.0的时代，工业数据量日益庞大。在工业环境中，借助互联网将数据可视化并远程监控的需求尤为凸显。

对于工业设备来说，设备的数据量十分庞大，如果单纯将数据拷贝过来，将会耗费很多空间和时间，效率也不理想，因此基于百万级的高密度数据可视化的研究具有挑战性和实用性。

本文从HTML5的角度出发，使用HTML搭建网页的基本框架，确定好网页内容的布局方式。本设计借助echarts这一强大的工具，轻松绘制不同样式的图表，方便快捷，维护起来也不需要花费太多时间。

在echarts的基础上，使用ajax完成前端与后台的交互实现。网页向服务器提交请求，服务器和数据库建立交互，返回JSON数据，在JavaScript中对JSON数据分解再处理，把结果返回到页面上。

最后，本文考虑了一种常用的大数据处理算法——蓄水池算法，对大数据进行稀释，在不违背原有数据规律的情况下实现数据的缩影，同时对数据作出简单的统计，结合数据可视化实现，将数据统计信息作出清晰客观的展示。

关键词:HTML5;高密度数据;echarts;可视化

Abstract

Following the concept of Internet was put forward, the rapid development of industrial industry, and into the era of industrial 4.0, the growing amount of industrial data.In the industrial environment, with the Internet to visualize data and remote monitoring needs are particularly prominent.

For industrial equipment, the amount of equipment is very large, if you simply copy the data over, will spend a lot of space and time, efficiency is not ideal, so based on millions of high-density data visualization of the study is challenging and practical Sex.

This article from the HTML5 point of view, the use of HTML to build the basic framework of the page to determine the layout of the web content. The design with echarts this powerful tool, easy to draw a different style of the chart, convenient and quick, maintenance does not need to spend too much time.

On the basis of echarts, using ajax to complete the front-end interaction with the background. Web page to the server to submit the request, the server and the database to establish interaction, return JSON data, in JavaScript JSON data decomposition and re-processing, the results back to the page.

Finally, this paper considers a commonly used large data processing algorithm - reservoir algorithm, dilute the large data, do not violate the original data in the case of data to achieve the microcosm of the data at the same time to make a simple statistics, Data visualization, the data statistics to make a clear and objective display.

Key words: HTML5; high density data; echarts; visualization

目 录

摘要 I

Abstract II

1 绪论 1

1.1研究目的及意义 1

1.2国内外研究现状 1

1.3设计的基本内容、目标、主要结构 2

1.3.1预期目标 2

1.3.2基本内容 2

1.3.3论文结构 3

2 开发环境和开发工具简介 4

2.1开发环境Microsoft Visual Studio 4

2.2 MVC模式 4

2.3 HTML5简介 5

2.4 CSS3样式表 6

2.5 Echarts工具 6

3 系统结构设计 8

3.1整体结构设计 8

3.2网页界面结构设计 9

3.3功能结构设计 9

4 系统技术与实现 11

4.1 HTML5设计 11

4.2绘图工具的选择 12

4.2.1 HTML5 Canvas元素 12

4.2.2 Echarts工具 14

4.2.3绘图工具选择 15

4.3数据库连接 16

4.4 jquery ajax技术 17

4.5数据稀释与优化 19

4.5.1数据显示方式优化 19

4.5.2数据稀释算法 21

4.6系统功能测试 23

4.6.1界面响应测试 23

4.6.2数据缩放功能测试 24

4.6.3数据统计功能测试 25

5 总结与展望 26

5.1论文总结 26

5.2工作展望 26

参考文献 28

致谢 29

1. 绪论
   1. 研究目的及意义

随着新闻组网络的发展，互联网诞生了。继WWW协议提出之后，互联网发展被大力推动并得到广泛应用。在互联网发展势头越来越猛的时候，数据也迎来了变革的时代。因此，以处理数据为中心的应用不断被开发出来，数据的重要性越来越高，数据已经成为了当下互联网产品的核心。但是研究数据时，人们需要在众多数据中找寻规律以及数据之间的联系，这无疑是一项很艰难的工作。自HTML5问世之后，其强大的功能让数据可视化变成了容易实现的事情，也让数据研究更加多元化和多样化。

作为互联网产品的核心，数据与各个方面都有着深厚的联系，处理数据也成为了开发产品的必要过程。为了更便于发现数据的规律和数据之间的联系，数据可视化应运而生，很大程度上为分析处理数据提供了便捷。HTML5出现之后，其设备兼容性好，与数据可视化相结合，为数据管理打开了通道。无论是采集手机应用的各种数据、分析用户的习惯，还是应用到工业互联网上，对工业设备实时监测的数据进行采集分析以及远程协助管理，利用HTML5进行数据可视化，都可以让数据规律变得简单，易于查看。HTML5兼容性好，一方面让数据监测设备成本降到最低，另一方面不需要在数据传输中耗费大量精力，节约很多成本。尤其在工业互联网应用中，大型工业设备的运行状态和信息在现场收集，数量级达到百万以上，如果将数据运回再进行分析，效率十分低下。如果直接在现场利用HTML5将数据进行可视化，数据管理中心能够通过HTML5观察数据的状态，有选择地从现场获取需要的数据，能够大大提高数据挖掘运用的效率。