徐欣威

(鎮(zhèn)江市生產(chǎn)力促進中心 江蘇鎮(zhèn)江212004)

科技統(tǒng)計作為統(tǒng)計的分支，是用統(tǒng)計的方法對科學技術活動的規(guī)模和結構進行定量的測定?？萍冀y(tǒng)計是輔助科技管理實現(xiàn)科學化、現(xiàn)代化的手段[1]。科技統(tǒng)計研究的對象是科學技術活動總體的數(shù)量特征和數(shù)量關系，其主要任務是通過對科技活動有關數(shù)據(jù)的收集、處理、分析，反映科技活動的規(guī)模、結構和布局的總體數(shù)量特征和關系，從而為評價和制定科技政策和發(fā)展規(guī)劃提供依據(jù)?？萍冀y(tǒng)計是制定正確的科技政策和發(fā)展規(guī)劃必不可少的工具，沒有完整、準確、可靠的科技統(tǒng)計資料就不可能合理地制定出各種科技政策和規(guī)劃，不可能把有限的科技資源在各類科技活動中進行合理的分配，也無法評價科技政策和規(guī)劃的實施效果。

在日常工作中涉及到的科技統(tǒng)計主要有高企季報和年報統(tǒng)計、專利統(tǒng)計、孵化器加速器統(tǒng)計、眾創(chuàng)空間統(tǒng)計、特色產(chǎn)業(yè)基地統(tǒng)計、大學科技園統(tǒng)計等。科技統(tǒng)計通常使用Excel報表來實現(xiàn)，其優(yōu)點是可以使用公式和函數(shù)對數(shù)據(jù)進行統(tǒng)計和運算，可以快速連接并導入數(shù)據(jù)庫等；缺點是太過于專業(yè)與細化，無法通過表格獲取例如區(qū)域比較、年度比較等總體化、直觀化印象，更無法在網(wǎng)站上進行可視化展示，為科技、統(tǒng)計等政府部門提供決策參考。雖然Excel自帶了圖形化分析工具，但與WEB程序接口非常復雜，難以實現(xiàn)，故通過對現(xiàn)有的WEB可視化工具進行比較分析，選定適合的工具進行科技統(tǒng)計的可視化實現(xiàn)。

1 數(shù)據(jù)可視化工具比較及選擇

比較常見的數(shù)據(jù)可視化工具有ECharts和Highcharts。ECharts是由百度公司推出的一款非常優(yōu)秀的可視化圖表控件，底層依賴Canvas類庫ZRender[2]，可提供直觀、交互、個性化定制的數(shù)據(jù)圖表，不但支持柱狀、折線、餅圖等普通圖表，還支持地圖、和弦圖、數(shù)據(jù)視圖、大規(guī)模散點圖等特殊圖表，主要采用Canvas進行渲染繪圖。它的第一個缺點是Canvas繪圖原理是基于像素的，當把圖像放大的話就會變模糊；第二個缺點是因為Canvas是一個HTML元素，多個圖形都是在一個Canvas中，因此Canvas無法對某一個繪制的圖像進行修改、刪除等操作。

Highcharts是由Highsoft AS公司2009年開發(fā)的一款開源圖形庫[3]，目前已在臉書、微軟、國際商用機器等多家跨國企業(yè)應用。它采用SVG進行渲染和繪圖，可以支持柱狀、折線、餅圖等普通圖表，但不支持地圖、和弦圖、數(shù)據(jù)視圖、大規(guī)模散點圖等特殊圖表。它的優(yōu)點之一是SVG基于矢量形狀繪圖，通過XML語言定義圖形的形狀，無論放大或縮小都保持文本定義的形狀；優(yōu)點之二是SVG所繪制的各個圖形都是單獨的一個元素，是DOM的一部分，所以可以通過CSS和JS腳本進行修改、刪除等操作，并且可以為每一個圖像添加事件與行為。

科技統(tǒng)計中涉及的圖表字段可視化圖標主要可用柱形圖、餅圖、折線圖等，但以后會涉及柱形圖、餅圖等在地圖區(qū)域中的表現(xiàn)。百度地圖為國內(nèi)專業(yè)性地圖，并且百度ECharts為全部免費，考慮到以后功能的可擴展性和易用性、性價比等特點，確定選用百度ECharts作為數(shù)據(jù)可視化實現(xiàn)工具。

2 ECharts可視化技術的主要特點及舉例

ECharts主要使用JavaScript來具體實現(xiàn)，支持包括IE、Chrome、Firefox，Safari等在內(nèi)的多款瀏覽器，底層依賴輕量級的矢量圖形庫 ZRender。ECharts提供了豐富的API接口以及文檔，直接引用JS文件，設置容器和參數(shù)即可使用相關圖表。

2.1 引入配置和初始化簡單易用

只需在文件中引入并設置容器、參數(shù)，就可初始化圖表。

引入Js文件：JS文件有幾個版本，可以根據(jù)實際需要引用需要的版本。＜script type＝"text/javascript" src＝"js/echarts.js"＞＜/script＞準備容器：＜div id＝"test" style＝"width：600px；height：400px；"＞＜/div＞

初始化圖表：ECharts主要通過參數(shù)option完成圖形樣式、數(shù)據(jù)等配置，使用init方法和setOption方法實現(xiàn)了div容器中各類數(shù)據(jù)的加載渲染和表現(xiàn)。

例如，科學技術獎統(tǒng)計主要代碼如下，數(shù)據(jù)表現(xiàn)如圖1所示。

圖1 科學技術獎統(tǒng)計分析圖Fig.1 Statistical analysis of science and technology awards

＜script type＝"text/javascript"＞

//指定圖標的配置和數(shù)據(jù)

var option ＝ {

title：{

text：'ECharts 歷年科學技術獎統(tǒng)計'

}，

tooltip：{

trigger：'axis'，

axisPointer：{ // 坐標軸指示器，坐標軸觸發(fā)有效

type：'shadow' // 默認為直線，可選為：'line' |'shadow'

}

}，

legend：{

data：[ "國家科學技術獎"，"省科學技術獎"，"省科學技術一等獎"，"省科學技術二等獎"，"省科學技術三等獎"]

}，

toolbox：{

show：true，

orient：'vertical'，

x：'right'，

y：'center'，

feature：{

mark：{show：true}，

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']

}

]，

yAxis：[

{

type：'value'

}

]，

series：[

{

name：'國家科學技術獎'，

type：'bar'，

data：[3，4，2]

}，

{

name：'省科學技術獎合計'，

type：'bar'，

stack：'省科學技術獎'，

data：[17，21，24]

}，

{

name：'省科學技術一等獎'，

type：'bar'，

stack：'省科學技術獎'，

data：[0，5，1]

}，

{

name：'省科學技術二等獎'，

type：'bar'，

stack：'省科學技術獎'，

data：[6，5，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'))；

//使用制定的配置項和數(shù)據(jù)顯示圖表

myChart.setOption(option)；

＜/script＞

可以看出，series是數(shù)據(jù)控制核心，它的下級參數(shù)type表達了數(shù)據(jù)圖表的表現(xiàn)形式，它可以為折線圖、柱形圖、餅圖、熱力圖等；下級參數(shù)data則表示初始化或者從后臺數(shù)據(jù)庫獲取的數(shù)據(jù)。

2.2 圖表種類豐富

ECharts底層依賴輕量級開源Canvas類庫ZRender，能夠使用區(qū)域縮放、時間軸、工具欄、坐標系等多種交互式組件，還可進行動態(tài)數(shù)據(jù)綁定和異步數(shù)據(jù)加載等。有時需要展示的數(shù)據(jù)不僅是一組數(shù)據(jù)，還會進行多組數(shù)據(jù)的對比。例如下文提到的搭配時間軸的餅圖展示各個區(qū)域的高新產(chǎn)值，就可以按時間順序動態(tài)展示多個年度的各區(qū)域高新產(chǎn)值變化情況。通過ajax技術及自我事件機制實現(xiàn)前臺可視化圖表與后臺數(shù)據(jù)庫的異步傳輸，既實現(xiàn)了網(wǎng)頁異步更新，也增強了網(wǎng)頁和數(shù)據(jù)庫的前臺表現(xiàn)力。

2.3 ECharts可方便處理各類事件和行為

用戶在操作ECharts的圖表時會觸發(fā)相應的事件，這些事件由開發(fā)者監(jiān)聽，然后回調(diào)函數(shù)做出相應的處理，可以彈出一個對話框、跳轉到一個地址或者做數(shù)據(jù)下鉆等。在ECharts中有兩種事件類型：其一是用戶鼠標點擊操作，或者hover圖表的圖形觸發(fā)鼠標事件；其二是用戶在使用圖形交互時觸發(fā)的事件，即調(diào)用dispatchAction后觸發(fā)的事件。

3 幾種科技統(tǒng)計數(shù)據(jù)的需求分析及其可視化設計與實現(xiàn)

現(xiàn)擁有的數(shù)據(jù)有高企季報和年報、專利申請和授權、R&D統(tǒng)計、孵化器和加速器、特色產(chǎn)業(yè)基地、眾創(chuàng)空間、大學科技園、科技進步報告等。這些數(shù)據(jù)有的相對獨立，有的在報表之間還存在數(shù)據(jù)交叉，所以需要對這些數(shù)據(jù)進行數(shù)據(jù)清洗，形成不同類型的統(tǒng)計分析專用模版。在統(tǒng)計分析專用模版上填入相關數(shù)據(jù)再進行可視化分析，以后每年新增的數(shù)據(jù)填入統(tǒng)計分析專用模版即可使用。以下主要以R&D統(tǒng)計、專利授權和高企年報為例，對各項數(shù)據(jù)字段進行分析和設計。

3.1 R&D需求分析、設計與實現(xiàn)

需求分析：R&D統(tǒng)計字段有丹陽、句容、揚中等8個區(qū)域R&D投入和投入占地區(qū)GDP的比重，這里既有區(qū)域R&D投入具體數(shù)字(億元)，也有投入占地區(qū)GDP的比重(百分比)，還有年度的區(qū)分，以及全市R&D總投入和總投入占地區(qū)GDP的比重等，如何在一張圖形上表現(xiàn)R&D投入和占比成為設計的關鍵。

設計：考慮采用雙數(shù)值軸表現(xiàn)R&D投入和占比，左數(shù)值軸表現(xiàn)R&D投入，右數(shù)值軸表現(xiàn)R&D投入占比，每個年度用一張圖表現(xiàn)，具體采用折柱混搭雙數(shù)值軸圖形實現(xiàn)(圖2)。

圖2 地區(qū)R&D統(tǒng)計分析圖Fig.2 Regional R&D statistical analysis chart

3.2 專利授權需求分析、設計與實現(xiàn)

需求分析：專利授權數(shù)據(jù)字段主要有專利權人名稱、專利權人地址、專利類型、專利權人類型、專利申請日、所屬區(qū)域等。據(jù)此可按區(qū)域和年度兩大類型進行需求分析。

按區(qū)域分析：鎮(zhèn)江地區(qū)擁有丹陽、句容、揚中等8個轄市區(qū)，江蘇大學和江蘇科技大學兩所高校，因此可以對各區(qū)域2015—2018年度的專利授權情況進行數(shù)據(jù)分析。

按年度分析：每個區(qū)域每年的專利授權總量的變化以及和其他區(qū)域的對比，可以構成專利授權年度變化趨勢。

3.2.1 統(tǒng)計2015—2018年各區(qū)域專利授權情況設計

橫坐標：首先按區(qū)域分類，在區(qū)域下再按專利類型分類。第一層含義為按區(qū)域分類：丹陽、句容、揚中、京口、潤州、丹徒、鎮(zhèn)江新區(qū)、鎮(zhèn)江高新區(qū)、江大、江科大、其他。第二層含義為按專利類型分類，分授權類型和授權總量：授權總量為最高軸，其余3條矮軸代表發(fā)明授權、實用新型授權、外觀設計授權。縱坐標：專利授權量。

使用4張柱形圖表示2015—2018年各區(qū)域的專利授權量情況，如圖3所示。

圖3 地區(qū)專利統(tǒng)計分析圖Fig.3 Statistical analysis of regional patents

3.2.2 展示2015—2018年各個區(qū)域專利授權增長趨勢的設計

丹陽、句容、揚中等8個區(qū)域每年專利授權總量變化趨勢以及和其他區(qū)域專利授權總量的對比，可以考慮用年度變化折線圖來實現(xiàn)該功能。設計和實現(xiàn)如圖4所示。

橫坐標為時間年代，縱坐標為各區(qū)域年度專利授權總量，每條不同顏色的折線代表1個區(qū)域。

3.3 高企需求分析與設計

需求分析：高企主要數(shù)據(jù)字段有各區(qū)域高新技術產(chǎn)值，高新技術產(chǎn)業(yè)產(chǎn)值占規(guī)模以上工業(yè)產(chǎn)值比重，民營、三資和國有企業(yè)高新技術產(chǎn)值，八大高新技術領域的高新技術產(chǎn)值等?；谝陨蠑?shù)據(jù)，可以按區(qū)域、領域、企業(yè)類別等進行分析和設計。例如可以按區(qū)域統(tǒng)計每個區(qū)域在同一年度高新技術產(chǎn)值和它在全市所占的份額；或者統(tǒng)計民營、三資企業(yè)等在同一年度高新產(chǎn)值以及它在全部高新產(chǎn)值中所占的份額等。

圖4 地區(qū)專利授權趨勢圖Fig.4 Regional patent licensing trend map

3.3.1 統(tǒng)計8個區(qū)域2015—2017年度高新技術產(chǎn)值及占比設計

設計：2015—2017年度高新總產(chǎn)值；2015—2017年度丹陽、句容、揚中等8個區(qū)域的高新技術產(chǎn)值。這里涉及的數(shù)據(jù)有區(qū)域、產(chǎn)值、百分比、年度等，可以考慮采用餅圖實現(xiàn)不同區(qū)域高新產(chǎn)值和百分比，對于年度變化情況則可以考慮采用時間軸形式，這樣就可以在一張圖上簡便實現(xiàn)以上功能，如圖5所示。

3.3.2 統(tǒng)計2015—2017年度高新技術產(chǎn)值中民營、三資企業(yè)、國有企業(yè)產(chǎn)值和份額變化情況設計

涉及的數(shù)據(jù)主要有同一年度高新總產(chǎn)值，以及民營、三資企業(yè)、國有企業(yè)高新產(chǎn)值和它們分別所占的百分比份額，還需考慮年度變化情況，考慮采用柱狀圖加年代和數(shù)據(jù)的形式設計各類型企業(yè)高新產(chǎn)值和份額變化。

橫坐標：2015—2017年高新總產(chǎn)值；民營、三資企業(yè)、國有企業(yè)高新產(chǎn)值。

縱坐標：產(chǎn)值。

具體使用柱形圖實現(xiàn)高新技術總產(chǎn)值和民營、三資企業(yè)、國有企業(yè)3年的高新技術產(chǎn)值在其中的份額，如圖6所示。

圖6 高新技術產(chǎn)值企業(yè)類型統(tǒng)計分析圖Fig.6 Statistical analysis of high-tech output value enterprises

4 總結與改進

通過對專利、高企、科技進步報告等數(shù)據(jù)源進行分析，自主設計了數(shù)據(jù)模版，使用百度ECharts進行可視化數(shù)據(jù)的實現(xiàn)。專利、高企、科學技術獎、孵化器、R&D統(tǒng)計等科技統(tǒng)計分析可視化數(shù)據(jù)應用已成功用于鎮(zhèn)江科技資源云服務平臺，為科技、統(tǒng)計等部門提供決策參考，起到了很好的示范作用。

下一步將考慮使用ECharts 和百度地圖相結合，綜合展示8個轄市區(qū)在地圖上的高企數(shù)據(jù)、專利數(shù)據(jù)、孵化器等可視化應用，這樣比原有方式更加形象、生動。二是應用雷達圖、和弦圖、力導向布局圖等形式，進一步豐富平臺的內(nèi)容和形式。