基于ECharts的科技統(tǒng)計(jì)數(shù)據(jù)可視化設(shè)計(jì)與實(shí)現(xiàn)

徐欣威

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

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

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

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

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

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

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

2 ECharts可視化技術(shù)的主要特點(diǎn)及舉例

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

2.1 引入配置和初始化簡(jiǎn)單易用

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

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

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

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

圖1 科學(xué)技術(shù)獎(jiǎng)統(tǒng)計(jì)分析圖Fig.1 Statistical analysis of science and technology awards

＜script type＝"text/javascript"＞

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

var option ＝ {

title：{

text：'ECharts 歷年科學(xué)技術(shù)獎(jiǎng)統(tǒng)計(jì)'

}，

tooltip：{

trigger：'axis'，

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

type：'shadow' // 默認(rèn)為直線，可選為：'line' |'shadow'

}

}，

legend：{

data：[ "國(guó)家科學(xué)技術(shù)獎(jiǎng)"，"省科學(xué)技術(shù)獎(jiǎng)"，"省科學(xué)技術(shù)一等獎(jiǎng)"，"省科學(xué)技術(shù)二等獎(jiǎng)"，"省科學(xué)技術(shù)三等獎(jiǎng)"]

}，

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：'國(guó)家科學(xué)技術(shù)獎(jiǎng)'，

type：'bar'，

data：[3，4，2]

}，

{

name：'省科學(xué)技術(shù)獎(jiǎng)合計(jì)'，

type：'bar'，

stack：'省科學(xué)技術(shù)獎(jiǎng)'，

data：[17，21，24]

}，

{

name：'省科學(xué)技術(shù)一等獎(jiǎng)'，

type：'bar'，

stack：'省科學(xué)技術(shù)獎(jiǎng)'，

data：[0，5，1]

}，

{

name：'省科學(xué)技術(shù)二等獎(jiǎng)'，

type：'bar'，

stack：'省科學(xué)技術(shù)獎(jiǎng)'，

data：[6，5，7]

}，

{

name：'省科學(xué)技術(shù)三等獎(jiǎng)'，

type：'bar'，

data：[11，11，16]，

markLine：{

itemStyle：{

normal：{

lineStyle：{

type：'dashed'

}

}

}，

data：[

[{type：'min'}，{type：'max'}]

]

}

}，

//初始化echarts實(shí)例

varmyChart ＝echarts.init(document.getElementById('chartmain'))；

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

myChart.setOption(option)；

＜/script＞

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

2.2 圖表種類豐富

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

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

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

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

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

3.1 R&D需求分析、設(shè)計(jì)與實(shí)現(xiàn)

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

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

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

3.2 專利授權(quán)需求分析、設(shè)計(jì)與實(shí)現(xiàn)

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

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

按年度分析：每個(gè)區(qū)域每年的專利授權(quán)總量的變化以及和其他區(qū)域的對(duì)比，可以構(gòu)成專利授權(quán)年度變化趨勢(shì)。

3.2.1 統(tǒng)計(jì)2015—2018年各區(qū)域?qū)＠跈?quán)情況設(shè)計(jì)

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

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

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

3.2.2 展示2015—2018年各個(gè)區(qū)域?qū)＠跈?quán)增長(zhǎng)趨勢(shì)的設(shè)計(jì)

丹陽(yáng)、句容、揚(yáng)中等8個(gè)區(qū)域每年專利授權(quán)總量變化趨勢(shì)以及和其他區(qū)域?qū)＠跈?quán)總量的對(duì)比，可以考慮用年度變化折線圖來(lái)實(shí)現(xiàn)該功能。設(shè)計(jì)和實(shí)現(xiàn)如圖4所示。

橫坐標(biāo)為時(shí)間年代，縱坐標(biāo)為各區(qū)域年度專利授權(quán)總量，每條不同顏色的折線代表1個(gè)區(qū)域。

3.3 高企需求分析與設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

4 總結(jié)與改進(jìn)

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

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