基于ECharts的铁路物流数据可视化效果的实现

孙逊 李润泽 赵宏宇 刘斌

摘要：为了将从全国各省市年鉴中提取出来的铁路物流数据以更直观的方式展示，降低用户的使用门槛，在以文本化方式展示数据的基础上，提出了实现铁路物流数据可视化的功能。将铁路数据以可视化方式呈现有助于用户迅速地从海量的铁路物流数据中迅速获取到所需要的重要信息，也可以更加直观形象地表达数据所蕴含的信息，更易于用户寻找数据变化的趋势和规律以及发现数据之间更深层次的联系。应用Javascript语言的可视化图表库ECharts实现了对铁路物流Web项目中铁路物流基础指标数据以及综合指标数据的动态展示，可以展示各个模块随着年份的走势（折线图）或者占比（扇形图）情况。

关键词： 铁路物流; ECharts可视化库; 数据可视化; 网页项目; 动态可视化

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2021）32-0022-04

Realization of Visualization of Railway Logistics Data Based on ECharts

SUN Xun1，LI Run-ze2 ，ZHAO Hong-yu2，LIU Bin1

（1. China Railway Siyuan Survey and Design Group Co.，Ltd.， Wuhan 430063， China; 2.Southwest Jiaotong University， Chengdu 611765， China）

Abstract：To display the railway logistics data extracted from the yearbooks of various provinces and cities across the country in a more intuitive way and reduce the user's threshold for use， on the basis of displaying the data in a textual manner， the function of realizing railway logistics data visualization is proposed. Visualizing the railway data will help users quickly obtain the important information they need from the massive railway logistics data. It can  express the information contained in the data more intuitively and visually. It is easier for users to look for trends and laws of data changes and discover deeper connections between data.Finally， the dynamic display of railway logistics basic index data and comprehensive index data in the railway logistics web project is realized by the use of visual chart library ECharts， which can display the trend （line chart） or proportion （fan chart） of each module with the year .

Key words： railway logistics; ECharts; data visualization; web project; dynamic visualization

隨着互联网的迅速发展，互联网产业已经逐步深入社会各行各业，深刻地改变了人们之间的信息访问与共享方式。不同的传统行业也在充分探索与互联网结合的方式，在信息化浪潮中焕发出新的生机。铁路物流数据分析与智能平台Web项目中存在着大量的来自全国各个省市统计年鉴的基础铁路物流数据指标，同时也存在着难以高效地利用海量无序的铁路物流数据的问题。基于文本化方式展示铁路物流数据不够清晰直观，使用户难以迅速准确地去捕捉巨量数据中的核心信息。如何更好地将这些数据展示给用户，并在展示的基础上对其进行分析、研究、挖掘成了当务之急。将铁路物流数据以图表可视化形式展现比传统的文本化展示更加直观也更具有实用性，提高了数据的可读性。在将数据可视化的同时也对数据进行了清洗降维，允许用户按照不同需求对不同的指标的对比、分析、计算结果进行可视化，从不同的维度来展现数据趋势。

本文实现了基于ECharts的动态数据展示功能，允许用户按照自己的需求交互式地在网页上选择不同的城市、不同的指标、不同的年份并进行展示、对比、分析等，可以实时地在用户增加新的数据或者删除已有数据时动态地生成不同的图表，包括柱状图、折线图、饼状图等。

1 背景需求介绍

本文中物流数据的可视化是针对铁路物流数据分析与智能平台web项目中存在的海量的物流数据而实现。该项目中，基础物流数据来自全国不同年份不同省份的统计年鉴，这些数据经过处理存入数据库中后，在城市上、指标上、年份上均无序排列，用户无法迅速地定位目标物流数据指标，更无法从杂乱的数据中挖掘出更深层次的信息。除了基础物流数据外，还有基于此的综合物流数据。因此，迫切地需要将该项目中的物流指标数据按照一定的顺序展现给用户，为进一步地查看、统计、分析做好基础。

本文中基于ECharts的物流数据可视化分别提供了按照城市、按照指标、按照年份三个不同维度的可视化，为用户提供了多样的可视化方式，有助于用户直观地观察数据，并在此基础上进一步对数据进行分析等。

2 关键技术介绍

2.1 ZRender

ZRender是一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，提供了 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的底层渲染器。ZRender Architecture通过MVC核心封装实现图形仓库、视图渲染和交互控制。ZRender具有数据驱动，完整的事件封装，高效的分层刷新，丰富的图形选项，强大的动画支持，易于扩展等特色，这些特色使得它做各种动画效果时十分有用，性能也更加出色，如图1所示。

2.2 ECharts

ECharts，一个纯 JavaScript 的图表库，可以流畅地运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts具有丰富的可视化类型，包括常规的折线图、柱状图、散点图、饼图、k线图，用于统计的盒形图等等。ECharts由数据驱动，数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单，只需获取数据，填入数据，ECharts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。除此之外ECharts还进行了移动端优化并支持多维数据以及丰富的视觉编码手段。

3 基于ECharts的可视化实现

ECharts作为一个纯 JavaScript 的图表库，可以根据用户需求来定制不同的可视化图表，本文基于ECharts实现了柱状图，折线图，饼状图三种不同类型的图表，将物流指标数据以图形化的方式呈现给用户。

在对ECharts进行基于铁路物流数据的个性化设置前，需要将Echarts.js文件引入到<script>标签中，并在此标签中配置目标可视化图表的使用路径。之后在<script>标签中加载用于显示可视化图表的Dom元素，初始化ECharts图表，最后对回调函数中的option做个性化数值设置。接下来以柱状图为例进行说明。

在绘制物流数据可视化图表时，首先使用getDataObj（）方法对Echarts图表series的各种参数进行配置。之后基于准备好的Dom，初始化ECharts图表。最后在option配置tooltip，legend等属性，生成可视化图表，代码如下。

function drawBar（）{

let checkedYears  = [];

$（"：checkbox：checked"）.each（function（）{

checkedYears.push（（$（this）.parent（）.next（）.text（）））;

}）;

let series = [];//用于初始化相关参数

for（let i=0;i<vm.fields.length;i++）{

let obj = getDataObj（vm.fields[i]，chartType，

vm.getData（vm.fields[i]））;

let newData = [];

for（let k=0;k<vm.getYears.length;k++）

for（let j=0;j<checkedYears.length;j++）

if（vm.getYears[k]+""===checkedYears[j]）

newData.push（obj.data[k]）;

obj.data = newData;

series.push（obj）;

}

const myChart = echarts.init

（document.getElementById（"chart"））;

let option = {

tooltip： {trigger： 'item'}，//trigger為item时仅该点的相关数据

xAxis： {data： checkedYears}，//横轴为年份

yAxis： {type： 'value'}，//纵轴为数值

legend： {data ：vm.fields}，

series： series

};

myChart.setOption（option）;

}

4 基础/综合数据指标的动态数据展示

4.1基础数据/综合数据指标介绍

在本节中，我们主要介绍基础数据指标以及在其之上衍生出的综合数据指标的动态展示功能。

在铁路物流数据分析与智能平台web项目中，基础数据指标共有十大类：综合数据，农业数据，贸易数据，消费数据，金融数据，货运数据，客运数据，交通基础数据，工业数据，绿色城市数据，每一类数据指标下又有更具体的指标划分。这些数据来自全国不同省份不同年份的统计年鉴，数据量巨大，很难从中找到目标信息，也不利于对数据进行分析。在该模块中，实现了基于ECharts的动态数据展示功能，有利于用户更加直接地了解相关数据，也可以帮助用户将不同的指标进行对比或者研究其发展趋势。

在铁路物流数据分析与智能平台web项目中，除了十大类基础数据指标，还有在其之上衍生出的综合指标，分别如下：

商流辐射力=城市社会消费品额/（人均消费支出*总人口）：表示城市消费中由其他地域带动的能力，也表明了一个城市的商业活动对其他地区消费的影响程度和吸引能力，城市的商流辐射力越强，其流通产业对外部需求和消费的吸引力就越强。

物流辐射力=（货运总量/地区生产总值）/（全国货运总量/国内生产总值）：反映一个城市在物流方面的优势，体现城市货运对全国辐射能力，物流辐射力直接衡量了城市的货运优势，体现了城市物流环节的运营效率。

货源辐射力=绝对货源辐射力：进口总额、出口总额、进出口总额;相对货源辐射力：外贸依存度：衡量城市商品流通体系中非本城市商品的价值额，体现了城市对其他城市商品参与城市流通体系的吸引力和城市商品对周边及海外城市的辐射力。

外贸依存度=进出口总额/国内生产总值：反映一个地区的对外贸易活动对该地区经济发展的影响和依赖程度的经济分析指标，反映一个地区的外向程度。

货运强度=某区段的货运周转量/区段线路的长度：铁路全线或某一区段平均每公里线路所担负的货物周转量。

人口经济密度=每年区域生产总值/城市或区域常住人口数：反映客观上存在的人口分布与经济发展相互关系的地区差异的指标。

土地经济密度=每年区域生产总值/城市或区域面积：表征了城市单位面积上经济活动的效率和土地利用的密集程度。

进出口贸易生成系数=出入境货运量/外贸进出口总额：反映货物及运输结构的变化。

区域熵：Q=S/P，式中，Q为区域的经济区位熵，S和P分别为该区域GDP和人口数占全国的比重：衡量某一区域要素的空间分布情况，反映某一产业部门的专业化程度，以及某一区域在高层次区域的地位和作用等方面。在产业结构研究中，运用区位熵指标主要是分析区域主导专业化部门的状况。

各地农业总产值占GDP比重（农业总产值/GDP总量）*100%：反映各地的农业产值在区域生产中所占据的地位，一般来说，现代化程度高的区域农业在经济中所占的地位是比较低的。

地区贸易差异度=∑（Ti-T'）2/T）：Ti表示区域内各地区贸易额，T'和T表示区域内各地区平均贸易额和总贸易额。

消费对经济增长的贡献率=（当年消费-上年消费）/（当年国内生產总值-上年国内生产总值）：反映了区域内各地区贸易发展水平差异程度的值越大说明地区结构失衡越严重。

金融服务使用率=人均从银行获得贷款/人均GDP;人均从银行获得存款/人均GDP：用于衡量地方金融水平。

各运输方式客运量占综合运输客运总量的比重=一定时期公路运输完成的客运量/同时间内综合运输客运总量：体现各客运行业在客运综合运输体系中的地位，是衡量行业运输能力的基础性指标，客运量反各运输方式周转量占综合运输客运周转量的比重=一定时期公路运输完成的客运周转量/同时间内综合运输客运周转总量：体现各客运行业在客运综合运输体系中的地位，是衡量行业运输能力的基础性指标，周转量是运输和运输距离的运输生产产量，反映出位移需求活动中发生的实际空间位移的大小。

中西部地区贸易比重=（中部和西部地区进出口贸易额/我国贸易总额）*100%：中部和西部地区进出口贸易额占我国贸易总体比重。

外贸对GDP贡献率=净出口增量/GDP增量：净出口增量与GDP增量的比值，反映经济增长中由外贸增长所引起的部分，其比值越大，说明外贸对经济增长的影响力越大。

在该模块中，用户同样可以分别按指标、按城市、按年份将目标综合指标可视化，提供了不同城市不同年份不同指标之间的对比、发展趋势、占比等各运输方式周转量占综合运输客运周转量的比重=一定时期公路运输完成的客运周转量/同时间内综合运输客运周转总量：体现各客运行业在客运综合运输体系中的地位，是衡量行业运输能力的基础性指标，周转量是运输和运输距离的运输生产产量，反映出位移需求活动中发生的实际空间位移的大小。

中西部地区贸易比重=（中部和西部地区进出口贸易额/我国贸易总额）*100%：中部和西部地区进出口贸易额占我国贸易总体比重。

外贸对GDP贡献率=净出口增量/GDP增量：净出口增量与GDP增量的比值，反映经济增长中由外贸增长所引起的部分，其比值越大，说明外贸对经济增长的影响力越大。

无论是基础数据指标还是综合数据指标，都为用户提供了分别按照城市、指标、年份进行可视化的选择，也都为用户提供了柱状图、折线图、饼状图三种不同的可视化图形，有助于用户从不同维度去分析数据。

4.2基础数据按照城市可视化

在该模块中，用户首先选择目标城市，然后选择目标指标，进行查询后即可将对应城市对应指标物流数据进行可视化。生成以年份为横轴，指标数值为纵轴的柱状图。图2为湖北省武汉市2010-2017年综合数据指标的可视化。在图表上方有不同指标所对应的颜色标签，用户可以通过点击标签将对应标签从图中隐藏，同时可视化图表的坐标轴也会随之改变，如图3所示。

除了为用户提供可视化图表之外，还会在下方基于图表生成对应的表格，用户可以在表格中选择隐藏部分年份，从而更加直接地观察目标年份的相关指标数据，如图4所示。

该模块中除了实现柱状图之外，还实现了折线图、饼状图，用户可以动态地选择不同的图形来满足需求。当用户将不同的指标或年份等参数加入图表中时，都会动态重新绘制相关图表。从柱状图中可以直观地看出不同基础数据指标的具体数据以及各个基础数据指标之间的差异，从折线图中可以清晰地看出不同基础数据指标随着时间的发展趋势，而从饼状图中可以看出某一基础数据指标的占比情况。除此之外，无论是哪种图表，都可以在鼠标指针放上去时显示更加详细的信息，如图5-图7所示。同时不同的图表中都会使用不同的颜色来标记不同的指标，使得相关信息更加直观地展现出来。

4.3 基础数据按照指标可视化

基础数据按照城市可视化主要是展示同一城市不同指标不同年份的物流指标数据，而按照指标可视化则是展示同一指标不同城市不同年份之间的关系，同样也提供了柱状图、折线图、饼状图三种不同的可视化图表以及对应的数据表格，如图8所示。

4.4 基础数据按照年份可视化

基础数据可视化部分除了上文所提到的按照城市可视化和按照指标可视化之外，还提供了按照年份可视化，展示同一年份不同城市不同指标的物流指标数据。与前两部分不同的是，由于是同一年份的物流指标数据做比较，这一部分取消了折线图，并分别提供了以指标为横轴和以城市为横轴的柱状图以及以指标为一圈和以城市为一圈的饼状图，如图9、图10所示。

4.5 综合数据可视化

在该模块中，用户同样可以分别按指标、按城市、按年份将目标综合指标可视化，提供了不同城市不同年份不同指标之间的对比、发展趋势、占比等。

由于计算综合指标的公式中某些数据指标无法直接从基础数据库中获取，因此在该模块中提供了相关计算页面，允许用户自己输入相关参数进行运算，并将对应的综合指标结果可视化，如图11所示。

5 总结

本文实现了基于ECharts的动态数据展示功能，解决了海量铁路物流数据文本化展示不够直观清晰导致用户难以有效挖掘核心信息的问题，节省了用户的时间，提高了对铁路物流信息的利用效率。铁路物流数据可视化将铁路物流数据分析与智能平台Web项目中的数十个基础数据指标以及在此基础上衍生出来的综合数据指标根据用户要求动态展示出来，并且允许用户无需插件、直接通过网页的动态响应式渲染数据视图并与之交互。基于ECharts实现了柱状图、折线图、饼状图三大图表，在每种图表中都用不同颜色来对不同的指标进行区分，有助于用户更加直观地对数据进行查看、对比、分析。从柱状图中可以直观地看出不同指标的数据量以及它们的差异，从折线图中可以看出不同指标随着时间的发展趋势，从饼状图中可以看出不同指标所占比例。

参考文献：

[1] 刘长娥.数据可视化技术在Web中的研究及应用[J].电脑知识与技术，2017，13（18）：7-8.

[2] 潘玉春，胡剑锋，朱玉付.WEB可视化技术在电网大数据场景下的应用研究[J].电力大数据，2019，22（3）：8-12.

[3] ECharts官网[EB/OL].http：//www.echarts.baidu.com/.

[4] 冀潇，李杨.采用ECharts可视化技术实现的数据体系监控系统[J].计算机系统应用，2017，26（6）：72-76.

[5] 章锐，陈树勇，刘道伟，等.基于ECharts的电网Web可视化研究及应用[J].电测与仪表，2017，54（19）：59-66.

[6] Keim D，Qu H M，Ma K L.Big-data visualization[J].IEEE Computer Graphics and Applications，2013，33（4）：20-21.

[7] Perkel J M.Data visualization tools drive interactivity and reproducibility in online publishing[J].Nature，2018，554（7690）：133-134.

[8] Huang M L，Huang T H，Zhang X Y.A novel virtual node approach for interactive visual analytics of big datasets in parallel coordinates[J].Future Generation Computer Systems，2016，55：510-523.

[9] 宋佳慧，刘远刚，林琳，等.基于eCharts的动态统计图表绘制技术研究[J].电脑知识与技术，2017，13（12）：202-204.

[10] 王雄兵，田茂，范亮，等.基于ECharts光伏发电信息化管理平台数据可视化效果的实现[J].物联网技术，2017，7（1）：54-55，58.

[11] 崔蓬.ECharts在数据可视化中的应用[J].软件工程，2019，22（6）：42-46.

[12] 杨凯，王长海.基于ECharts的交通养护大数据可视化效果实现方法[J].西部交通科技，2019（10）：148-151.

[13] 徐欣威.基于ECharts的科技統计数据可视化设计与实现[J].天津科技，2019，46（3）：66-70.

【通联编辑：唐一东】