基于ECharts的數據可視化研究

敬國偉 黃大池

（作者單位：1.閬中市融媒體中心；2.四川省廣播電視科學技術研究所）

在如今的大數據時代，數據正呈指數級快速增長。如何在巨大的數據量中，快速理解數據以及發現數據內在的信息規律，是身處在大數據時代的我們急需解決的問題。

數據可視化技術作為一門新興學科技術，通過將數據映射為可視化圖形，為人們理解數據、發現數據規律提供了一種高效的途徑。目前，數據可視化應用軟件的實現大都基于CIS結構，這些軟件往往專業性強、用途單一、可擴展性較弱。作為互聯網主流技術之一，Web前端技術不僅為基于瀏覽器/服務器結構（Browser/Server，B/S）的數據可視化系統實現提供了良好的跨平臺性、易擴展性以及豐富的交互性，而且為數據的可視化展示提供了互聯網平臺，使得數據具有良好的訪問性以及較強的理解性，采用Web前端技術實現數據可視化已經成為一種趨勢。

1 開發工具

1.1 Vue

隨著Web前端開發行業的不斷發展，不停涌現新的技術和工具，有諸多的Web前端開發工具，比如Vue.js、React、Angular等。本文使用Vue框架，因為Vue.js是目前最小的框架之一，快速且輕量級，而且擁有一個不斷發展的龐大而活躍的社區，以及附加組件和工具集合，可用于在短時間內構建高度優化的用戶界面；調試更容易，無須添加額外的工具或庫。本文Vue使用2.x版本。

1.2 ECharts

實現數據可視化的工具種類繁多，本文使用的是ECharts，基于JavaScript的開源可視化圖表庫。其對各種瀏覽器的兼容性很好，具有豐富的交互，能高度自定義數據可視化圖表。ECharts提供了非常多的圖表，有常見的折線圖、柱狀圖和餅圖等，還有用于地理數據可視化的地圖、熱力圖等，用于關系數據可視化的關系圖、旭日圖。本文ECharts版本 為4.9.0。

2 數據可視化展示

本文是基于成都市的市區街道關系做了一個關系拓撲圖，展示兩級以及兩級以上的關系拓撲圖效果。

圖1展示的是市區街道三級和市區兩級數據的關系拓撲圖，后續能根據需求再添加更多層級的數據。圖1中（a）為三級拓撲圖，中心點為一級，表示市，從中心向外分別為第二級和第三級，節點的大小依次變少；第二級為區級，第三級為街道級。通過連線的不同表示市與區、區與街道節點之間的通信狀態，實線表示連接正常，虛線表示連接錯誤。圖2中（b）為市區二級拓撲圖，中心點為市級，第二級為區級，市與區節點之間的通信狀態效果與三級的拓撲圖 一樣。

圖1 市區街道三級和市區兩級數據的關系拓撲圖

當鼠標懸浮在每個市區街道節點上或者市與區、區與街道節點之間的連線上時，都能彈出懸浮框顯示其對應的狀態數據（見圖2），這里的彈出內容可以自定義，根據需要做成不同的樣式并展示出來。

圖2 懸浮在節點和連線上時顯示提示框

3 在Vue項目中下載并引入ECharts實現方法

（1）在Vue項目里，調出控制臺，使用npm指令，輸入以下代碼下載安裝ECharts：

npm install echarts --save

使用npm指令，install表示下載；echarts表示要下載的庫文件名稱；--save表示將這個庫文件全局安裝在項目的文件里。完成該指令，則成功下載了Echarts。

（2）在Vue項目中的main.js文件里寫入以下代碼引入Echarts：

import * as echarts from ‘echarts’

Vue.prototype.$echarts = echarts

import表示引入的意思，* as echarts表示ECharts所有功能，from ‘echarts’表示從下載好的echarts中引入；Vue.prototype是Vue實例的屬性，這里目的是將$echarts與echarts化為等號，完成操作后，就創建了全局的$echarts，可以在Vue項目中的任意頁面使用$echarts來實現數據可視化了。

4 在Vue項目中使用ECharts

4.1 在html代碼里創建一個存放展示數據可視化的容器

這里創建一個id為mychart的div容器：

4.2 使用ECharts初始化容器

因為在Vue項目的main.js文件中創建了一個全局的$echarts，這里可以直接使用$echarts，輸入代碼：$echarts.init( 容器 )，完成初始化。

將初始化后的容器賦值給新的變量名mychart。

4.3 配置ECharts的option參數

按照ECharts官網給出的配置規則，要實現關系拓撲圖的數據可視化就得配置以下參數：

4.4 option配置講解

（1）使用ECharts展示復雜的關系拓撲圖，在 series參數中，type的值必須為graph。

（2）實現關系拓撲圖，在 series參數中layout的值有三種選項，第一種是none，不采用任何布局，使用節點中提供的x，y作為節點的位置；第二種是circular，采用環形布局；第三種是force，采用力引導布局。本文想要實現一個可復用的可拓展性的組件，只需傳入想要的數據參數就可以實現的關系圖，所以選擇none的方式，自定義數據格式。

（3）data、links與categories分別為市與區和區與街道兩兩節點的連線數據、相連市區街道節點的名字、除第一級市級外的所有節點名。data、links與categories需要以固定的數據格式傳入進來。

（4）tooltip為懸浮在市區街道節點上或者兩兩節點的連線上時會彈出展示不同的數據懸浮窗，可自定義樣式以及數據的展現形式。這里num的值為0或者1，為0時，展示懸浮在連線上的彈框toolTipTwo；num的值為1時，展示懸浮在節點上的彈框toolTipOne。

4.5 使用配置，展示數據可視化效果

mychart.setOption(option);

option為已經配置好的數據，使用之前已經初始化好容器的mychart，setOption（配置項）表示使用配置，實現數據可視化的效果。

5 市區街道通信數據格式

在配置ECharts的option參 數 中，data、links與categories的數據參數格式：

5.1 data為市與區、區與街道兩兩節點的連線數據

這里data的數據格式需要做成以下格式：

category為目的節點名，name為自身節點名，x與y為該市區街道級節點所在橫縱坐標，symbolSize為節點大小，單位為px像素。

5.2 links為所有市與區、區與街道相連的兩節點的名字

這里links的數據格式需要做成以下格式：

source為目的節點名，target為自身節點名，其他屬性可自行添加，根據功能需求做對應的處理。

5.3 categories為關系拓撲圖

除了第一級市級外的所有區與街道級名字，這里categories的數據格式需要做成以下格式：

用name表示各個節點名字

要實現關系拓撲圖，只要根據以上的數據格式，傳入data、links與categories的數據后就可以顯示出對應的數據可視化的關系圖。

6 節點拓展性

6.1 每個節點可自定義樣式

為了有更好的拓展性，這里的每一個節點都可以換上自定義的圖片，比如現在想要將第二級區級的節點換上圖片■，那換好圖片后的效果如圖3所示：

圖3 自定義節點樣式

要實現該效果，在option配置中data的數據中添加symbol屬性值，將項目里要使用的圖片路徑賦值給symbol，具體做成以下格式：

6.2 添加新的層級節點

本文介紹的是市區街道三級與市區二級的關系拓撲圖，當想要添加更多層級時，對links和data數組里新增對應數據，這里展示添加第四級時的數據格式：

將數據放入對應的links和data中后就可以實現新增層級的效果。

7 懸浮彈出窗的內容展示

在配置ECharts的option參數中，tooltip為懸浮窗，可自定義樣式以及數據的展現形式；這里就是tooltip的配置內容：

show為true時表示顯示彈窗，為false時則不會顯示彈窗，之后的配置項也就不會生效；background為懸浮窗的背景顏色，這里用16進制表示不同的顏色；position為懸浮窗的顯示位置，這里賦值‘right’表示當懸浮在市區街道節點或者兩兩節點的連線上時會將懸浮窗展示在節點和連線的右邊；formatter函數里可以自定義懸浮窗的數據展示效果，這里的function表示使用函數，括號里的params是懸浮在每個節點上時對應節點里的數據，這里可以操作數據。

8 關系拓撲圖的展現方式

在 配 置ECharts的option參 數 中， series參 數 中layout的值有三種選項，none、 circular與 force。

force選項的效果比較集中節點，但在多數據時會顯得雜亂；circula選項的效果時將所有節點布置在圓上，但在多數據時，連線較多，也會顯得比較雜亂；none選項可以自定義，將數據節點放在自己想要的位置上，不管數據多與少都能很好地清晰展示出來；本文是將每次層節點放在不同半徑的圓上。

將每一級的節點平均分配在圓弧上，根據每級數據的個數，在自定義半徑的圓弧上平均顯示每個節點，圖4為一個簡要說明，在一個圓上平均布置了A到J這10個點，每個點的間距都是相同的。要實現這樣的效果，就得知道原點O的坐標軸，以及每一個在圓上分布的點的坐標。這里是通過弧度來計算每個點所在的坐標軸。

圖4 節點平均分配在圓弧上

弧度是角的度量單位，弧長等于半徑的弧，其所對的圓心角為1弧度；一周的弧度數為2πr/r=2π，360°=2π rad；將角度化為弧度只需用角度乘以π/180；

計算正弦值，用對邊/斜邊 = Math.sin(x)求出NG的長度；計算余弦值，用鄰邊/斜邊 = Math.cos(x)求出OG的長度。

O為中心圓點，LEFT和TOP為G點的橫縱坐標，LEFT=NG+O為橫坐標值，TOP=ON+O為縱坐標值；平分后的每一個圓心角，所對的弧長、弧度都是相等的。

配置圓心點的橫縱坐標circleX和circleY，設置第二層級節點所在圓的半徑outerCircleRudis，設置第三層級節點所在圓的半徑moreOuterCircleRudis，計算角度avd和弧度ahd：

index表示的是索引值，是當前節點數據在第三級所有節點數據中的索引位置；使用Number（值），表示將括號內的值強制轉換為數字類型，不能是字符串等數據類型；.toFixed(0)表示將數字的小數點后所有數字刪除掉，轉化為整數。

第三級的數據格式：

第二級與第三級的節點坐標，都是根據（circleX,circleY）中心點O的橫縱坐標來定義的，再根據自定義的半徑畫圓，最后在圓上平均顯示每個節點。

ECharts能夠做到千萬級數據量的前端展現，支持多維數據動態數據可視化，支持多種渲染方案和跨平使用，通過學習與研究，為后期廣播電視臺的大量數據監測、數據可視化呈現、多場景應用提供了技術支撐。