| 标题 | 基于HTML的ECharts的动态数据显示前端设计 |
| 范文 | 洪敏 吴红亚 杨保华 摘 要： 在大数据时代，信息图表和可视元素用在一起时，能够更快地得到问题的答案。传统的静态网页已经无法满足这个充满数据的时代，动态网页数据动态显示的前端开发成为新的热点。文章根据某刀具加工生产管理系统，介绍了使用Echarts图表在网页前端中的应用效果，分析各类图表的功能与作用，使得动态网页成为大数据的可视化的承载体，同时完成了一个基于HTML与Echarts的动态数据显示前端设计。 关键词： 大数据； HTML； Echarts； 动态网页； 前端 中图分类号：TP315 文献标志码：A 文章编号：1006-8228（2018）08-27-02 Design of dynamic data display front end using ECharts and HTML Hong Min， Wu Hongya， Yang Baohua （School of Information Engineering， Changzhou Vocational Institute of Mechatronic Technology， Changzhou， Jiangsu 213164， China） Abstract： In the age of big data， the answers can be got quickly， when infographics and visual elements are used together. Traditional static webpage have not been able to satisfy this era of data， and dynamic webpage have become a new hot spot. Based on a tool processing production management system，the application effects of using ECharts charts in the front end of the webpage is introduced， the functions of various types of charts are analyzed， and a data visualization carrier for big data is realized by dynamic webpage，at the same time， a dynamic data display front end design using HTML and ECharts is completed. Key words： big data； HTML； ECharts； dynamic webpage； front end 0 引言 大数据的数据可视化可以帮助企业做出准确的决策，其承载体便是动态网页。动态网页中的内容是可以随着时间、环境或者数据库操作的结果而发生动态改变的，这一特性完完全全符合了当今大数据时代数据量、信息量突增的特点[1]。同时凭借着Canvas的功能与效果[2-3]，Echarts能够在散点图中将上万甚至上十万的数据如一地展示出来。 本文的设计通过html5、css、echars三种技术实现动态数据显示前端，使得后台在实现动态网页时减少其工作量，同时让动态数据显示更有动感、美观的展示效果。并且在数据的显示上，配合鼠标光标的移动拥有更直观的展现方式。 1 关键技术 1.1 HTML5 HTML5是W3C与WHATWG共同开发而诞生的语言。HTML5的新特性基于HTML、CSS、DOM及 JavaScript[4]。对外部插件的需求同时也减少了。而且错误处理能力更加优秀了，也取代了更多脚本语言的标记。 1.2 ECharts Echarts是一个纯JS的图表库[5]，可以流畅的运行在PC端和移动端上。运用许多新技术，大大地增强了展示效果和视觉效果，同时使得用户对互联网数据信息能够更方便地查询、整合及添加等。 1.3 Adobe Dreamweaver 使用的开发软件为Adobe Dreamweaver CC 2017，适用于多显示器的支持，以扩大工作区来提升工作效率。 2 设计与实现 2.1 设计目标 国内和国际主流浏览器种类多，内核不统一，这样的环境对前端开发是一个较大的难题，所以开发的前端应该首先兼容多个主流的浏览器。同时，设计出美观的布局与框架，将网页需求的功能版块设计完善便是本次开发的主要目标。 2.2 功能模块图 本系统采用B/S结构，系统的升级只需要在服务器端完成，更新软件系统的数据库、文件也只需更新服务器端。在系统维护时，只需要远程登录服务器系统，减少了维护系统的成本和周期。 基于网站的总体设计，功能模块如图1所示。 2.3 环境搭建 要使用echarts图表必须先把echarts.js文件导入Dreamweaver里面。首先在ECharts官网上获取ECharts，在官网上有不同的版本，根據需求下载对应的版本。把下载的echarts.js文件放入该网页的文件夹内。然后在Dreamweaver导入echarts.js文件。在该网页源代码的 的部分声明echarts.js文件，代码如下：
因为ECharts是一个纯 JS的图表库，编写或修改需要用到JS编程语言，所以在该网页源代码的 的部分声明使用JS编程语言，代码如下：
|
| 随便看 |
|
科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。