徐欣威:基于ECharts的科技统计数据可视化设计与实现论文

徐欣威:基于ECharts的科技统计数据可视化设计与实现论文

摘 要:对科技统计的概念和类型进行描述,引出在日常科技统计工作中使用Excel等方式的优点和不足,应用可视化工具对科技统计报表进行分析、设计和实现;对现有主流可视化工具功能进行分析和比较,从可扩展性和易用性等角度选择ECharts进行可视化开发;对ECharts可视化技术的主要特点从配置及初始化简单易用、图表种类丰富、方便处理各类事件和行为等方面进行阐述,以R&D统计、专利授权报表和高企统计报表为例,进行了科技统计数据的需求分析,并给出了主要设计思路和实现图表。

关键词:科技统计 可视化 ECharts 图表

科技统计作为统计的分支,是用统计的方法对科学技术活动的规模和结构进行定量的测定。科技统计是辅助科技管理实现科学化、现代化的手段[1]。科技统计研究的对象是科学技术活动总体的数量特征和数量关系,其主要任务是通过对科技活动有关数据的收集、处理、分析,反映科技活动的规模、结构和布局的总体数量特征和关系,从而为评价和制定科技政策和发展规划提供依据。科技统计是制定正确的科技政策和发展规划必不可少的工具,没有完整、准确、可靠的科技统计资料就不可能合理地制定出各种科技政策和规划,不可能把有限的科技资源在各类科技活动中进行合理的分配,也无法评价科技政策和规划的实施效果。

在日常工作中涉及到的科技统计主要有高企季报和年报统计、专利统计、孵化器加速器统计、众创空间统计、特色产业基地统计、大学科技园统计等。科技统计通常使用Excel报表来实现,其优点是可以使用公式和函数对数据进行统计和运算,可以快速连接并导入数据库等;缺点是太过于专业与细化,无法通过表格获取例如区域比较、年度比较等总体化、直观化印象,更无法在网站上进行可视化展示,为科技、统计等政府部门提供决策参考。虽然Excel自带了图形化分析工具,但与WEB程序接口非常复杂,难以实现,故通过对现有的WEB可视化工具进行比较分析,选定适合的工具进行科技统计的可视化实现。

1 数据可视化工具比较及选择

比较常见的数据可视化工具有ECharts和Highcharts。ECharts是由百度公司推出的一款非常优秀的可视化图表控件,底层依赖Canvas类库ZRender[2],可提供直观、交互、个性化定制的数据图表,不但支持柱状、折线、饼图等普通图表,还支持地图、和弦图、数据视图、大规模散点图等特殊图表,主要采用Canvas进行渲染绘图。它的第一个缺点是Canvas绘图原理是基于像素的,当把图像放大的话就会变模糊;第二个缺点是因为Canvas是一个HTML元素,多个图形都是在一个Canvas中,因此Canvas无法对某一个绘制的图像进行修改、删除等操作。

Highcharts是由Highsoft AS公司2009年开发的一款开源图形库[3],目前已在脸书、微软、国际商用机器等多家跨国企业应用。它采用SVG进行渲染和绘图,可以支持柱状、折线、饼图等普通图表,但不支持地图、和弦图、数据视图、大规模散点图等特殊图表。它的优点之一是SVG基于矢量形状绘图,通过XML语言定义图形的形状,无论放大或缩小都保持文本定义的形状;优点之二是SVG所绘制的各个图形都是单独的一个元素,是DOM的一部分,所以可以通过CSS和JS脚本进行修改、删除等操作,并且可以为每一个图像添加事件与行为。

科技统计中涉及的图表字段可视化图标主要可用柱形图、饼图、折线图等,但以后会涉及柱形图、饼图等在地图区域中的表现。百度地图为国内专业性地图,并且百度ECharts为全部免费,考虑到以后功能的可扩展性和易用性、性价比等特点,确定选用百度ECharts作为数据可视化实现工具。

2 ECharts可视化技术的主要特点及举例

show:true,

2.1 引入配置和初始化简单易用

只需在文件中引入并设置容器、参数,就可初始化图表。

2) 网络结构优化。充分考虑现场仪表分布特点,合理规范部署数据采集网络结构,通信协议实现由Modbus RTU至Modbus TCP转变,方便多主机快速获取仪表数据。

引入Js文件:JS文件有几个版本,可以根据实际需要引用需要的版本。<script type="text/javascript" src="js/echarts.js"></script>准备容器:<div id="test" style="width:600px;height:400px;"></div>

初始化图表:ECharts主要通过参数option完成图形样式、数据等配置,使用init方法和setOption方法实现了div容器中各类数据的加载渲染和表现。

例如,科学技术奖统计主要代码如下,数据表现如图1所示。

图1 科学技术奖统计分析图
Fig.1 Statistical analysis of science and technology awards

<script type="text/javascript">

//指定图标的配置和数据

var option = {

{

title:{

text:'ECharts 历年科学技术奖统计'

在建设工程项目管理过程中,要将成本计划、成本监督、成本跟踪、成本诊断等工作落实到位,形成成本控制的细节化管理[5]。成本计划是对整个工程的设计、采购、施工等提出科学合理的方案,然后按照方案对施工工作各方面进行管理。在各项工作进行期间,要确保成本监督工作落实到位。及时审核各项费用支出是否合理,符合合同和施工的要求。确保各工程款是否到位,工程是否完成进行具体的施工阶段等等。成本跟踪则是对具体的施工阶段发生的不确定因素如项目变动等进行统计和报告。最后,对整个工程的成本进行诊断分析。确保工程成本是否符合预定计划,如不符合分析其中的具体影响,方便做好下一阶段的战略部署。

},

tooltip:{

{

axisPointer:{ // 坐标轴指示器,坐标轴触发有效

type:'shadow' // 默认为直线,可选为:'line' |'shadow'

}

},

legend:{

yAxis:[

于是,我按照妈妈先前对我的指导,先深吸一口气,把头埋进水里,使劲儿不让气呼出来,但结果还是呛了水。我并没有灰心,再次尝试,结果又失败了。

},

toolbox:{

ECharts主要使用JavaScript来具体实现,支持包括IE、Chrome、Firefox,Safari等在内的多款浏览器,底层依赖轻量级的矢量图形库 ZRender。ECharts提供了丰富的API接口以及文档,直接引用JS文件,设置容器和参数即可使用相关图表。

orient:'vertical',

x:'right',

y:'center',

feature:{

mark:{show:true},

2.4.2 重复性试验 取橘叶药材(S14),分别按“2.3”方法平行制备6份供试品溶液,按“2.1”色谱条件进样分析。以橙皮苷为参照峰,各共有峰相对保留时间的RSD<1.0%,相对峰面积的RSD<5.0%。结果表明,方法重复性良好。

二肖皆一窍,兔舐雄毛而孕,感而不交也,鸡合踏而无形,交而不感也。[注](明)王逵:《蠡海集》,中华书局,1985年,第20页。

dataView:{show:true,readOnly:false},

magicType:{show:true,type:['line','bar','stack','tiled']},

restore:{show:true},

saveAsImage:{show:true}

}

},

calculable:true,

xAxis:[

{

type:'category',

data:['2015','2016','2017']

}

],

data:[ "国家科学技术奖","省科学技术奖","省科学技术一等奖","省科学技术二等奖","省科学技术三等奖"]

{

type:'value'

}

中国人向来讲究趋于安定的习惯,而拥有属于自己的住宅便是这种思想的核心。离婚率提高、复合家庭减少会令居民户数增加,对住宅需求的显著增加,成为城市住宅价格上涨的重要推动因素。

],

series:[

近年来,项目管理模式已逐渐科学化,管理工作日益富有节奏感。实践中,节奏管理的应用,已成为工程项目管理工作的重点,对项目实施具有关键性的影响作用,甚至在一定程度上起着决定性作用。在建设项目中,从项目构想、立项、前期规划、设计、施工阶段、竣工阶段、项目结算及后期养护等,整个建设周期都需要负责人及其管理团队对项目实施有效的节奏管理。节奏化的管理,可使项目有序开展,利于各参建单位更好地把握项目的整体进程,既规范管理,又提高建设效率。

name:'国家科学技术奖',

type:'bar',

[17]The eastern route,which would go from Karachi to Islamabad and further north to Kashi,in Northwest China’sXinjiang UyghurAutonomousRegion,is“obviously more convenient and will cost less,”the report on guancha.cn said.

data:[3,4,2]

},

二是抓好基层领导干部培训。基础不牢,地动山摇。做好国土资源工作,需要大力夯实基层基础。为此,省厅特别重视对县级人民政府分管国土资源工作领导的学习宣传。在省委组织部的支持下,省厅连续多年在省委党校开展县(市、区)领导干部国土资源专题培训,专门编印《国土资源重要政策文件》《国土资源管理基本知识》,厅领导亲自讲课,以利他们加强对基层国土资源工作的领导和支持。同时,紧紧盯住乡镇国土资源管理机构主要负责人这支队伍,直面基层一线工作实际,采取编辑教材、选派师资、座谈交流、学习研讨等方式方法,加强教育培训,推动基层工作。

{

[13] 荣正通:《身份认知差异与中美关系中的南海问题》,《国际关系研究》2016年第2期,第140-152页;柳思思:《身份认知与不对称冲突》,《世界经济与政治》2011年第2期,第114-127页;齐尚才:《错误知觉、议题身份与国际冲突—以中美南海航行自由争议为例》,《外交评论》2017年第5期,第65页。

name:'省科学技术奖合计',

type:'bar',

stack:'省科学技术奖',

data:[17,21,24]

},

trigger:'axis',

name:'省科学技术一等奖',

type:'bar',

stack:'省科学技术奖',

data:[0,5,1]

},

{

name:'省科学技术二等奖',

type:'bar',

stack:'省科学技术奖',

还是那句话:该说的话要说,该做的事要做。把媒体和球迷当成自家人,坦诚地把真实情况告诉他们,争取他们的理解和支持。现在做有点晚,好在还来得及!

data:[6,5,7]

究其原因,温度升高时,二氧化碳气体挥发的快,麻醉减弱,容易苏醒,最终保活时间减短,Peters等[17]人发现鲶鱼在随着温度的升高,无水保活时间越短,所以当温度大于8 ℃时,保活时间变短。当温度降低时,由于鮰鱼耐低温性较差,低温会对鱼体造成不可逆的损伤[21]。因此,选择最佳的保活温度对鱼的保活运输十分有意义,能延长鱼的保活时间。

采用快速截留超绿-超红方法(以下用FIE表示),即EGR2中的3G和2.4R的值若大于255,则看作255,计算得到的ExG - ExR2值只能够保留大于0的像素[7]。

},

{

name:'省科学技术三等奖',

type:'bar',

data:[11,11,16],

markLine:{

itemStyle:{

normal:{

lineStyle:{

type:'dashed'

}

}

},

data:[

[{type:'min'},{type:'max'}]

]

}

},

//初始化echarts实例

varmyChart =echarts.init(document.getElementById('chartmain'));

//使用制定的配置项和数据显示图表

myChart.setOption(option);

</script>

可以看出,series是数据控制核心,它的下级参数type表达了数据图表的表现形式,它可以为折线图、柱形图、饼图、热力图等;下级参数data则表示初始化或者从后台数据库获取的数据。

2.2 图表种类丰富

ECharts底层依赖轻量级开源Canvas类库ZRender,能够使用区域缩放、时间轴、工具栏、坐标系等多种交互式组件,还可进行动态数据绑定和异步数据加载等。有时需要展示的数据不仅是一组数据,还会进行多组数据的对比。例如下文提到的搭配时间轴的饼图展示各个区域的高新产值,就可以按时间顺序动态展示多个年度的各区域高新产值变化情况。通过ajax技术及自我事件机制实现前台可视化图表与后台数据库的异步传输,既实现了网页异步更新,也增强了网页和数据库的前台表现力。

2.3 ECharts可方便处理各类事件和行为

用户在操作ECharts的图表时会触发相应的事件,这些事件由开发者监听,然后回调函数做出相应的处理,可以弹出一个对话框、跳转到一个地址或者做数据下钻等。在ECharts中有两种事件类型:其一是用户鼠标点击操作,或者hover图表的图形触发鼠标事件;其二是用户在使用图形交互时触发的事件,即调用dispatchAction后触发的事件。

3 几种科技统计数据的需求分析及其可视化设计与实现

现拥有的数据有高企季报和年报、专利申请和授权、R&D统计、孵化器和加速器、特色产业基地、众创空间、大学科技园、科技进步报告等。这些数据有的相对独立,有的在报表之间还存在数据交叉,所以需要对这些数据进行数据清洗,形成不同类型的统计分析专用模版。在统计分析专用模版上填入相关数据再进行可视化分析,以后每年新增的数据填入统计分析专用模版即可使用。以下主要以R&D统计、专利授权和高企年报为例,对各项数据字段进行分析和设计。

3.1 R&D需求分析、设计与实现

需求分析:R&D统计字段有丹阳、句容、扬中等8个区域R&D投入和投入占地区GDP的比重,这里既有区域R&D投入具体数字(亿元),也有投入占地区GDP的比重(百分比),还有年度的区分,以及全市R&D总投入和总投入占地区GDP的比重等,如何在一张图形上表现R&D投入和占比成为设计的关键。

设计:考虑采用双数值轴表现R&D投入和占比,左数值轴表现R&D投入,右数值轴表现R&D投入占比,每个年度用一张图表现,具体采用折柱混搭双数值轴图形实现(图2)。

图2 地区R&D统计分析图
Fig.2 Regional R&D statistical analysis chart

3.2 专利授权需求分析、设计与实现

需求分析:专利授权数据字段主要有专利权人名称、专利权人地址、专利类型、专利权人类型、专利申请日、所属区域等。据此可按区域和年度两大类型进行需求分析。

按区域分析:镇江地区拥有丹阳、句容、扬中等8个辖市区,江苏大学和江苏科技大学两所高校,因此可以对各区域2015—2018年度的专利授权情况进行数据分析。

按年度分析:每个区域每年的专利授权总量的变化以及和其他区域的对比,可以构成专利授权年度变化趋势。

3.2.1 统计2015—2018年各区域专利授权情况设计

横坐标:首先按区域分类,在区域下再按专利类型分类。第一层含义为按区域分类:丹阳、句容、扬中、京口、润州、丹徒、镇江新区、镇江高新区、江大、江科大、其他。第二层含义为按专利类型分类,分授权类型和授权总量:授权总量为最高轴,其余3条矮轴代表发明授权、实用新型授权、外观设计授权。纵坐标:专利授权量。

使用4张柱形图表示2015—2018年各区域的专利授权量情况,如图3所示。

图3 地区专利统计分析图
Fig.3 Statistical analysis of regional patents

3.2.2 展示2015—2018年各个区域专利授权增长趋势的设计

丹阳、句容、扬中等8个区域每年专利授权总量变化趋势以及和其他区域专利授权总量的对比,可以考虑用年度变化折线图来实现该功能。设计和实现如图4所示。

横坐标为时间年代,纵坐标为各区域年度专利授权总量,每条不同颜色的折线代表1个区域。

3.3 高企需求分析与设计

需求分析:高企主要数据字段有各区域高新技术产值,高新技术产业产值占规模以上工业产值比重,民营、三资和国有企业高新技术产值,八大高新技术领域的高新技术产值等。基于以上数据,可以按区域、领域、企业类别等进行分析和设计。例如可以按区域统计每个区域在同一年度高新技术产值和它在全市所占的份额;或者统计民营、三资企业等在同一年度高新产值以及它在全部高新产值中所占的份额等。

图4 地区专利授权趋势图
Fig.4 Regional patent licensing trend map

3.3.1 统计8个区域2015—2017年度高新技术产值及占比设计

设计:2015—2017年度高新总产值;2015—2017年度丹阳、句容、扬中等8个区域的高新技术产值。这里涉及的数据有区域、产值、百分比、年度等,可以考虑采用饼图实现不同区域高新产值和百分比,对于年度变化情况则可以考虑采用时间轴形式,这样就可以在一张图上简便实现以上功能,如图5所示。

图5 地区高新技术产值占比图
Fig.5 Map of the proportion of regional high-tech output value

3.3.2 统计2015—2017年度高新技术产值中民营、三资企业、国有企业产值和份额变化情况设计

涉及的数据主要有同一年度高新总产值,以及民营、三资企业、国有企业高新产值和它们分别所占的百分比份额,还需考虑年度变化情况,考虑采用柱状图加年代和数据的形式设计各类型企业高新产值和份额变化。

横坐标:2015—2017年高新总产值;民营、三资企业、国有企业高新产值。

纵坐标:产值。

具体使用柱形图实现高新技术总产值和民营、三资企业、国有企业3年的高新技术产值在其中的份额,如图6所示。

图6 高新技术产值企业类型统计分析图
Fig.6 Statistical analysis of high-tech output value enterprises

4 总结与改进

通过对专利、高企、科技进步报告等数据源进行分析,自主设计了数据模版,使用百度ECharts进行可视化数据的实现。专利、高企、科学技术奖、孵化器、R&D统计等科技统计分析可视化数据应用已成功用于镇江科技资源云服务平台,为科技、统计等部门提供决策参考,起到了很好的示范作用。

下一步将考虑使用ECharts 和百度地图相结合,综合展示8个辖市区在地图上的高企数据、专利数据、孵化器等可视化应用,这样比原有方式更加形象、生动。二是应用雷达图、和弦图、力导向布局图等形式,进一步丰富平台的内容和形式。

参考文献

[1]孙天范. 如何做好科技统计年报工作[N]. 中国信息报,2016-12-01(007).

[2]王子毅,张春海. 基于ECharts的数据可视化分析组件设计实现[J]. 微型机与应用,2016,10(3):45-48.

[3]杨士卿. 《动态网页设计》课程Highcharts数据可视化教学设计[J]. 电脑知识与技术,2018(5):165-167.

Design and Implementation of Visualization of Scientific and Technological Statistics Based on ECharts

XU Xinwei
(Zhenjiang Productivity Promotion Center,Zhenjiang 212004,Jiangsu Province,China)

Abstract:This paper describes the concepts and types of scientific and technological statistics,points out the advantages and disadvantages of using EXCEL in daily scientific and technological statistics work,and innovatively uses visualization tools to analyze,design and implement scientific and technological statistics reports.In this paper,the functions of the existing mainstream visualization tools are analyzed and compared,and ECharts is selected for visualization development from the perspective of scalability and ease of use.The main technical characteristics of ECharts visualization technology are expounded from three aspects:simple configuration and initialization,abundant types of charts,and convenient handling of various events and behaviors.Taking R&D statistics,patent authorization reports and enterprise statistics reports as examples,the demand analysis of scientific and technological statistics is carried out,and the main design ideas and implementation charts are given.

Key words:science and technology statistics;visualization;ECharts;chart

中图分类号:TP391

文献标志码:A

文章编号:1006-8945(2019)03-0066-05

收稿日期:2019-02-03

标签:;  ;  ;  ;  ;  ;  ;  ;  ;  ;  ;  

徐欣威:基于ECharts的科技统计数据可视化设计与实现论文
下载Doc文档

猜你喜欢