基于ECharts的科技统计数据可视化设计与实现
徐欣威
(镇江市生产力促进中心 江苏镇江212004)
摘 要： 对科技统计的概念和类型进行描述，引出在日常科技统计工作中使用Excel等方式的优点和不足，应用可视化工具对科技统计报表进行分析、设计和实现；对现有主流可视化工具功能进行分析和比较，从可扩展性和易用性等角度选择ECharts进行可视化开发；对ECharts可视化技术的主要特点从配置及初始化简单易用、图表种类丰富、方便处理各类事件和行为等方面进行阐述，以R&D统计、专利授权报表和高企统计报表为例，进行了科技统计数据的需求分析，并给出了主要设计思路和实现图表。
关键词： 科技统计 可视化 ECharts 图表
科技统计作为统计的分支，是用统计的方法对科学技术活动的规模和结构进行定量的测定。科技统计是辅助科技管理实现科学化、现代化的手段[1]。科技统计研究的对象是科学技术活动总体的数量特征和数量关系，其主要任务是通过对科技活动有关数据的收集、处理、分析，反映科技活动的规模、结构和布局的总体数量特征和关系，从而为评价和制定科技政策和发展规划提供依据。科技统计是制定正确的科技政策和发展规划必不可少的工具，没有完整、准确、可靠的科技统计资料就不可能合理地制定出各种科技政策和规划，不可能把有限的科技资源在各类科技活动中进行合理的分配，也无法评价科技政策和规划的实施效果。
在日常工作中涉及到的科技统计主要有高企季报和年报统计、专利统计、孵化器加速器统计、众创空间统计、特色产业基地统计、大学科技园统计等。科技统计通常使用Excel报表来实现，其优点是可以使用公式和函数对数据进行统计和运算，可以快速连接并导入数据库等；缺点是太过于专业与细化，无法通过表格获取例如区域比较、年度比较等总体化、直观化印象，更无法在网站上进行可视化展示，为科技、统计等政府部门提供决策参考。虽然Excel自带了图形化分析工具，但与WEB程序接口非常复杂，难以实现，故通过对现有的WEB可视化工具进行比较分析，选定适合的工具进行科技统计的可视化实现。
CT检查腰椎间盘突出的确诊率为83.9%，MRI检查腰椎间盘突出的确诊率为95.2%，MRI诊断的确诊率高于CT诊断，对比具有统计学差异（P＜0.05）。见表1。
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可视化技术的主要特点及举例
ECharts主要使用JavaScript来具体实现，支持包括IE、Chrome、Firefox，Safari等在内的多款浏览器，底层依赖轻量级的矢量图形库 ZRender。ECharts提供了丰富的API接口以及文档，直接引用JS文件，设置容器和参数即可使用相关图表。
2.1 引入配置和初始化简单易用
只需在文件中引入并设置容器、参数，就可初始化图表。
引入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 历年科学技术奖统计'
青花瓷装饰艺术特点在于青色与白色的对比，青花只有在洁白的瓷胎上才能承托其美妙的色彩。青色在古代一直是种吉祥的色彩，与自然相联系紧密，完美的符合我们中国人的艺术追求。永宣年间出产的青花瓷多以白地蓝花为主，无论什么样的装饰性是，青色与白色都是最基本的构成色彩，在绘画的处理方面一定会追求和谐统一，一方面白地突显青花的蓝色，另一方面青色又能衬出白釉的瓷质之美。景德镇青花瓷善于留白，虚实相生的设计概念正好被青白关系处理的十分合理。青白的处理同时也随装饰的体裁、内容以及构图形式而变化，合理的安排青白比例，能够愈发使得画面生动丰富。
}，
体育旅游是人与自然的高度互动和人与自然最贴近的旅游方式，体育旅游往往以自然生态环境为载体。在开发民族传统体育旅游资源过程中，应以保护生态环境和风景名胜为前提，合理开发和科学管理。避免重开发、轻保护，造成许多不可再生资源人为的破坏和浪费。加强民族传统体育旅游资源的保护意识，树立生态体育旅游的观念，将民族传统体育旅游与生态环境保护有机结合起来，生态环境与人文环境都得到良好的治理和改善，为民族传统体育旅游的发展营造一个健康的环境。
tooltip：{
trigger：'axis'，
axisPointer：{ // 坐标轴指示器，坐标轴触发有效
show：true，
orient：'vertical'，
}
}，
legend：{
data：[ "国家科学技术奖"，"省科学技术奖"，"省科学技术一等奖"，"省科学技术二等奖"，"省科学技术三等奖"]
}，
toolbox：{
type：'shadow' // 默认为直线，可选为：'line' |'shadow'
单声道训练包括静音处理和重新排列，以增强发音和声学数据之间的匹配。在训练的每一步中，都会执行四次Baum-Welch算法以重估训练结果。
x：'right'，
y：'center'，
feature：{
mark：{show：true}，
dataView：{show：true，readOnly：false}，
3.1.2 配合施用生物肥料。生物肥料又称生物菌肥，是人们利用土壤中有益微生物制成。其性质与其它肥料不同，本身不含有大量元素，主要以微生物生命活动的产物来改善植物营养条件，抑制某种病害发生，发挥土壤潜在肥力的作用，从而获得农作物的增产效果。
magicType：{show：true，type：['line'，'bar'，'stack'，'tiled']}，
restore：{show：true}，
saveAsImage：{show：true}
}
}，
试件开裂后，当加载至AB段的某点卸载时，其卸载路径沿12进行，卸载刚度取K12，若由2点反向加载未超过开裂点，则此时加载指向开裂荷载点A′，沿路径2A′B′C′D′进行反向加载，若反向加载点超过开裂点，则加载指向上次经过的最大点1′，即沿路径21′B′C′D′进行反向加载；当加载至A′B′段卸载时，其反向卸载及正向加载路径AB段相似。
name：'省科学技术二等奖'，
xAxis：[
{
type：'category'，
data：['2015'，'2016'，'2017']
}
]，
yAxis：[
{
type：'value'
}
]，
series：[
{
近年来，红枫家政公司贯彻落实《商务部关于加快居民生活服务业线上线下融合创新发展的实施意见》，创新转变家政服务供给方式，积极向“互联网+”方向快速发展。2012年在绵阳成功建成“红枫家政信息化办公OA系统”，2015年底在成都市顺利开建“云尚家美好生活家政服务智能平台”。目前，红枫家政公司已基本实现了家政服务手段信息化，信息发布、自助下单、服务评价、纠纷处理等服务实现“一站式”在线提供，有效对接了家政服务的供需双方，促进了家政服务线上线下融合发展，提升了服务效率和水平。
name：'国家科学技术奖'，
type：'bar'，
data：[3，4，2]
}，
该算例因为系统并不复杂，经多次试验表明，使用本文混合GA-PSO时，设置N为20，权重因子w=l，c1=2，c2=2，初始交叉率Pc(1)=0.9，初始变异率Pm(1)=0.01，将变异率与交叉率实施本文提出的调整策略控制，最大迭代次数即70，进行20次试验，对14节点的收敛效果如图6所示。
{
name：'省科学技术奖合计'，
（2）乡镇畜牧兽医工作人员的专业性不强。2008年兽医体制改革后，乡镇级兽医站实现人、财、物三权规乡镇。乡镇级兽医站工作人员承担了过多的业务工作以外的工作。另外，乡镇兽医站经费短缺。
type：'bar'，
stack：'省科学技术奖'，
data：[17，21，24]
该系统能充分有效地回收蒸煮工艺过程中的热能，实验装置经实测计算节能率达到79.0%，二次蒸汽回收效果明显。
}，
{
name：'省科学技术一等奖'，
我们提出每一个哲学假说，都要经历反复的论证或反驳。能够经得住检验、经得住批判，才能够真正立得住。只有那些经受了千百年历史和文化实践检验的假说，才能够沉淀为人类文化的理论成果。这是非常不容易的，但有志于思想理论创新的学者应该在这方面尽自己的努力。只要我们努力做得足够充分，那么就会有好的成果保留下来。在这个意义上，做学问的人其实与那些工匠是很相似的。我们也要有工匠精神，对于自己创造的产品精益求精，使之站得住脚，并且传之久远。
stack：'省科学技术奖'，
data：[0，5，1]
}，
{
calculable：true，
type：'bar'，
stack：'省科学技术奖'，
住院方面，低收入与中低收入组因住院就医而产生高于其他收入人群的经济风险(矫正RR值大于1)，住院就医风险度随着患者收入水平的提高而减少。
data：[6，5，7]
(2) The function of the Ultralab experimental management
type：'bar'，
}，
{
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论文; 图表论文; 镇江市生产力促进中心论文;