基于Echarts技术的企业数据可视化的设计与开发

摘  要：可视化是数据展示的一种形式。文章对在B/S软件架构下实现企业数据可视化进行了研究，介绍了数据可视化的概念及其优势，分析了软件开发所使用的前端技术以及企业数据可视化的数据展示形式，主要阐述了如何使用Echarts作为前端开发的数据可视化图表库，设计并实现了企业的营业数据、合作客户画像、企业能力画像和合作伙伴分布的可视化展示。

关键词：数据可视化;Echarts;Web前端开发

中图分类号：TP311          文献标识码：A文章编号：2096-4706（2022）06-0090-04

Design and Development of Enterprise Data Visualization Based on

Echarts Technology

XU Mengya

（Jiangxi Vocational and Technical College of Information Application， Nanchang  330043， China）

Abstract： Visualization is a form of data presentation. This paper studies the realization of enterprise data visualization under the B/S software architecture， introduces the concept of data visualization and its advantages， analyzes the using of front-end technology and data display form enterprise data visualization by the software development， mainly expounds how to use Echarts as a data visualization chart library in front-end development. It designs and realizes the visual display of enterprise business data， partner customer portrait， enterprise ability portrait and partner distribution.

Keywords： data visualization; Echarts; Web front-end development

0  引  言

在过去，数据通常使用Excel表格进行汇总及展示，但这种方式的缺点也是显而易见的，例如统计量大、耗时长、容易出错、查询不方便等等。随着应用软件的数据量越来越大，为了满足精準分析、快速决断的需求，越来越多的软件都有对数据做可视化分析的开发需求，而在企业管理软件的领域对数据可视化的需求尤其突出。

本应用软件是针对某企业开发的管理系统，该系统采用B/S软件架构，本文研究的是客户端的设计与开发。客户端页面开发主要以HTML5+CSS3+JavaScript为基础，引入Echarts插件，结合FetchAPI动态读取后台数据，将数据以可视化的图形展示在Web前端页面，实现了对企业数据可视化的开发需求，达到了形象直观地展示企业数据分析的目的。

1  数据可视化

1.1  数据可视化的概念

数据可视化主要研究数据的视觉表现形式，充分使用图形、图像、计算机视觉和用户界面等方式组织、表达和显示数据。其最早起源于18世纪，在经历了几个世纪的发展后，数据可视化在军事、航空航天、物理学、天文学和生物学等领域都展示了其重要作用 [1]。

1.2  数据可视化的优势

人类从外界获取信息时，有80%以上的信息是通过视觉系统获取的[2]。将数据以图形或图表的形式展示，其最大的优势在于图形可以直观地表达数据间的关系与趋势，大幅度提高阅读者阅读和理解数据的效率[3]。尤其是自2011年互联网进入大数据时代之后，人们需要从海量的数据中获取有效信息，数据可视化技术则可以有效地帮助人们分析高纬度多来源的海量数据信息，并辅助人们做出一些即时的决策。就目前而言，常用实现数据可视化的技术有Excel、Tableau、Python等[4]。

2  系统开发技术简介

本企业管理系统采用B/S软件架构，服务器端开发基于SSM框架，主要负责从MySQL数据库读取数据，进行数据统计并发送给客户端;客户端主要通过与服务器端通信交换数据，将数据以指定的形式进行展示。本文中主要研究的是客户端的设计与开发，以下是客户端使用到的前端开发技术。

2.1  HTML5+CSS3+JavaScirpt

HTML5是最新的HTML标准，在HTML4.0的基础上新增了一些新元素和新控件，例如用于绘制图形的Canvas元素和SVG元素、用于多媒体播放的Video元素和Audio元素等等，以浏览器的原生能力替代了部分复杂的JavaScript代码，降低了Web前端开发的难度。

CSS3.0是CSS的最新版本，在CSS2.1的基础上新增了很多属性和方法，例如圆角、阴影、变形、动画、弹性盒子等等，使得以前需要使用图片或JavaScript才能实现的效果，现在只需要几行CSS3代码就可以搞定，大大简化了Web前端设计与开发的工作。此外，css3还新增了REM这个相对根元素字体大小的单位，使得网页可以通过修改根元素的字体属性成比例地调整网页的尺寸，在分辨率各异的显示设备上达到最优的显示效果。B86FCB7B-49CA-44AB-8AD0-41E3BF54ADD1

JavaScript是一款基于对象的、以事件驱动的解释性编程语言，其特点是无须编译可直接在浏览器解释运行，目前在客户端被大量使用，主要用于解决客户端与服务器的交互问题。

2.2  Fetch API

Fetch API是目前前端开发的一种新技术，提供了获取资源包括跨域请求的JavaScript接口。与ajax和axios基于XMLHttpRequest对象的封装不同，使用Fetch API是一种原生JS的写法。Fetch API的特点主要有以下几个方面，一是采用了模块化的设计，将一次请求的请求、响应和状态分散在多个对象上分别管理，避免将不同功能的代码糅杂在一起，使得代码结构更加清晰;二是请求资源的返回结果是Promise对象，避免了回调函数的嵌套，使得代码更加简洁;三是通过数据流处理数据，对于请求一些大的文件资源可以实现分块读取，减少了内存占用情况，有利于提高网站的性能表现。

2.3  Echarts技术

Echarts是一款基于JavaScript的开源可视化图表库，可以提供形象直观、交互个性化的数据展示，其最初由百度团队开源，后捐赠给Apache基金会，于2021年成为Apache顶级项目。Echarts提供的可视化图表类型非常丰富，其中常规的图表有折线图、柱状图、饼图、散点图，其他图表则包含了用于数据统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化关系图、Treemap、旭日图，用于BI（商业智能）的漏斗图、仪表盘等等，同时Echarts还支持各种图形之间的相互搭配，可以完全满足Web前端实现数据可视化的需求。

3  企业数据可视化分析与设计

由于可视化的图表种类非常多，每一类图表对于数据的展示都具有各自的优势，将要达到形象直观的可视化效果，必须根据数据特点选择合适的图表。通过对系统的企业运行数据进行分析，本企业管理软件需要可视化展示的数据包括企业营业金额、合作伙伴分析、合作客戶画像和企业能力画像。

在需要展示的4项数据中，企业营业金额要展示给管理者的是企业经营增长或减少的情况，使用传统的柱状图和折线图最能展示出数据的增长或减少;合作客户画像要展示给管理者的是企业合作客户类型的占比分析，如年龄段、性别等，使用传统的饼图可以直观看出哪一项数据占比最大;企业能力画像要展示给管理者的是企业当前的一些能力指数，包含创新能力、产业结构、营业能力、区域均衡、质量评估五方面指数，使用雷达图能够直观地看出各项数据之间的均衡或差距;合作伙伴分析要展示给管理者的是合作企业的分布情况，以便管理者可以直观地看到与企业业务来往最频繁的区域，使用地理地图搭配地理坐标的散点图和线路图最能直观显示出数据在地理坐标上的分布情况。

4  企业数据可视化实现

4.1  Echarts的基本使用

Echarts作为一个开源的JavaScript图表库，其基本用法可通过5步实现：（1）将Echarts图表库使用