基于ECharts的科技統計數據可視化設計與實現

徐欣威

(鎮江市生產力促進中心 江蘇鎮江212004)

科技統計作為統計的分支，是用統計的方法對科學技術活動的規模和結構進行定量的測定。科技統計是輔助科技管理實現科學化、現代化的手段[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可視化技術的主要特點及舉例

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：{ // 坐標軸指示器，坐標軸觸發有效

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'))；

//使用制定的配置項和數據顯示圖表

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所示。

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個轄市區在地圖上的高企數據、專利數據、孵化器等可視化應用，這樣比原有方式更加形象、生動。二是應用雷達圖、和弦圖、力導向布局圖等形式，進一步豐富平臺的內容和形式。