基于ECharts的數(shù)據(jù)可視化研究

敬國(guó)偉 黃大池

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

在如今的大數(shù)據(jù)時(shí)代，數(shù)據(jù)正呈指數(shù)級(jí)快速增長(zhǎng)。如何在巨大的數(shù)據(jù)量中，快速理解數(shù)據(jù)以及發(fā)現(xiàn)數(shù)據(jù)內(nèi)在的信息規(guī)律，是身處在大數(shù)據(jù)時(shí)代的我們急需解決的問(wèn)題。

數(shù)據(jù)可視化技術(shù)作為一門新興學(xué)科技術(shù)，通過(guò)將數(shù)據(jù)映射為可視化圖形，為人們理解數(shù)據(jù)、發(fā)現(xiàn)數(shù)據(jù)規(guī)律提供了一種高效的途徑。目前，數(shù)據(jù)可視化應(yīng)用軟件的實(shí)現(xiàn)大都基于CIS結(jié)構(gòu)，這些軟件往往專業(yè)性強(qiáng)、用途單一、可擴(kuò)展性較弱。作為互聯(lián)網(wǎng)主流技術(shù)之一，Web前端技術(shù)不僅為基于瀏覽器/服務(wù)器結(jié)構(gòu)（Browser/Server，B/S）的數(shù)據(jù)可視化系統(tǒng)實(shí)現(xiàn)提供了良好的跨平臺(tái)性、易擴(kuò)展性以及豐富的交互性，而且為數(shù)據(jù)的可視化展示提供了互聯(lián)網(wǎng)平臺(tái)，使得數(shù)據(jù)具有良好的訪問(wèn)性以及較強(qiáng)的理解性，采用Web前端技術(shù)實(shí)現(xiàn)數(shù)據(jù)可視化已經(jīng)成為一種趨勢(shì)。

1 開發(fā)工具

1.1 Vue

隨著Web前端開發(fā)行業(yè)的不斷發(fā)展，不停涌現(xiàn)新的技術(shù)和工具，有諸多的Web前端開發(fā)工具，比如Vue.js、React、Angular等。本文使用Vue框架，因?yàn)閂ue.js是目前最小的框架之一，快速且輕量級(jí)，而且擁有一個(gè)不斷發(fā)展的龐大而活躍的社區(qū)，以及附加組件和工具集合，可用于在短時(shí)間內(nèi)構(gòu)建高度優(yōu)化的用戶界面；調(diào)試更容易，無(wú)須添加額外的工具或庫(kù)。本文Vue使用2.x版本。

1.2 ECharts

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

2 數(shù)據(jù)可視化展示

本文是基于成都市的市區(qū)街道關(guān)系做了一個(gè)關(guān)系拓?fù)鋱D，展示兩級(jí)以及兩級(jí)以上的關(guān)系拓?fù)鋱D效果。

圖1展示的是市區(qū)街道三級(jí)和市區(qū)兩級(jí)數(shù)據(jù)的關(guān)系拓?fù)鋱D，后續(xù)能根據(jù)需求再添加更多層級(jí)的數(shù)據(jù)。圖1中（a）為三級(jí)拓?fù)鋱D，中心點(diǎn)為一級(jí)，表示市，從中心向外分別為第二級(jí)和第三級(jí)，節(jié)點(diǎn)的大小依次變少；第二級(jí)為區(qū)級(jí)，第三級(jí)為街道級(jí)。通過(guò)連線的不同表示市與區(qū)、區(qū)與街道節(jié)點(diǎn)之間的通信狀態(tài)，實(shí)線表示連接正常，虛線表示連接錯(cuò)誤。圖2中（b）為市區(qū)二級(jí)拓?fù)鋱D，中心點(diǎn)為市級(jí)，第二級(jí)為區(qū)級(jí)，市與區(qū)節(jié)點(diǎn)之間的通信狀態(tài)效果與三級(jí)的拓?fù)鋱D 一樣。

圖1 市區(qū)街道三級(jí)和市區(qū)兩級(jí)數(shù)據(jù)的關(guān)系拓?fù)鋱D

當(dāng)鼠標(biāo)懸浮在每個(gè)市區(qū)街道節(jié)點(diǎn)上或者市與區(qū)、區(qū)與街道節(jié)點(diǎn)之間的連線上時(shí)，都能彈出懸浮框顯示其對(duì)應(yīng)的狀態(tài)數(shù)據(jù)（見圖2），這里的彈出內(nèi)容可以自定義，根據(jù)需要做成不同的樣式并展示出來(lái)。

圖2 懸浮在節(jié)點(diǎn)和連線上時(shí)顯示提示框

3 在Vue項(xiàng)目中下載并引入ECharts實(shí)現(xiàn)方法

（1）在Vue項(xiàng)目里，調(diào)出控制臺(tái)，使用npm指令，輸入以下代碼下載安裝ECharts：

npm install echarts --save

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

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

import * as echarts from ‘echarts’

Vue.prototype.$echarts = echarts

import表示引入的意思，* as echarts表示ECharts所有功能，from ‘echarts’表示從下載好的echarts中引入；Vue.prototype是Vue實(shí)例的屬性，這里目的是將$echarts與echarts化為等號(hào)，完成操作后，就創(chuàng)建了全局的$echarts，可以在Vue項(xiàng)目中的任意頁(yè)面使用$echarts來(lái)實(shí)現(xiàn)數(shù)據(jù)可視化了。

4 在Vue項(xiàng)目中使用ECharts

4.1 在html代碼里創(chuàng)建一個(gè)存放展示數(shù)據(jù)可視化的容器

這里創(chuàng)建一個(gè)id為mychart的div容器：

4.2 使用ECharts初始化容器

因?yàn)樵赩ue項(xiàng)目的main.js文件中創(chuàng)建了一個(gè)全局的$echarts，這里可以直接使用$echarts，輸入代碼：$echarts.init( 容器 )，完成初始化。

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

4.3 配置ECharts的option參數(shù)

按照ECharts官網(wǎng)給出的配置規(guī)則，要實(shí)現(xiàn)關(guān)系拓?fù)鋱D的數(shù)據(jù)可視化就得配置以下參數(shù)：

4.4 option配置講解

（1）使用ECharts展示復(fù)雜的關(guān)系拓?fù)鋱D，在 series參數(shù)中，type的值必須為graph。

（2）實(shí)現(xiàn)關(guān)系拓?fù)鋱D，在 series參數(shù)中l(wèi)ayout的值有三種選項(xiàng)，第一種是none，不采用任何布局，使用節(jié)點(diǎn)中提供的x，y作為節(jié)點(diǎn)的位置；第二種是circular，采用環(huán)形布局；第三種是force，采用力引導(dǎo)布局。本文想要實(shí)現(xiàn)一個(gè)可復(fù)用的可拓展性的組件，只需傳入想要的數(shù)據(jù)參數(shù)就可以實(shí)現(xiàn)的關(guān)系圖，所以選擇none的方式，自定義數(shù)據(jù)格式。

（3）data、links與categories分別為市與區(qū)和區(qū)與街道兩兩節(jié)點(diǎn)的連線數(shù)據(jù)、相連市區(qū)街道節(jié)點(diǎn)的名字、除第一級(jí)市級(jí)外的所有節(jié)點(diǎn)名。data、links與categories需要以固定的數(shù)據(jù)格式傳入進(jìn)來(lái)。

（4）tooltip為懸浮在市區(qū)街道節(jié)點(diǎn)上或者兩兩節(jié)點(diǎn)的連線上時(shí)會(huì)彈出展示不同的數(shù)據(jù)懸浮窗，可自定義樣式以及數(shù)據(jù)的展現(xiàn)形式。這里num的值為0或者1，為0時(shí)，展示懸浮在連線上的彈框toolTipTwo；num的值為1時(shí)，展示懸浮在節(jié)點(diǎn)上的彈框toolTipOne。

4.5 使用配置，展示數(shù)據(jù)可視化效果

mychart.setOption(option);

option為已經(jīng)配置好的數(shù)據(jù)，使用之前已經(jīng)初始化好容器的mychart，setOption（配置項(xiàng)）表示使用配置，實(shí)現(xiàn)數(shù)據(jù)可視化的效果。

5 市區(qū)街道通信數(shù)據(jù)格式

在配置ECharts的option參 數(shù) 中，data、links與categories的數(shù)據(jù)參數(shù)格式：

5.1 data為市與區(qū)、區(qū)與街道兩兩節(jié)點(diǎn)的連線數(shù)據(jù)

這里data的數(shù)據(jù)格式需要做成以下格式：

category為目的節(jié)點(diǎn)名，name為自身節(jié)點(diǎn)名，x與y為該市區(qū)街道級(jí)節(jié)點(diǎn)所在橫縱坐標(biāo)，symbolSize為節(jié)點(diǎn)大小，單位為px像素。

5.2 links為所有市與區(qū)、區(qū)與街道相連的兩節(jié)點(diǎn)的名字

這里links的數(shù)據(jù)格式需要做成以下格式：

source為目的節(jié)點(diǎn)名，target為自身節(jié)點(diǎn)名，其他屬性可自行添加，根據(jù)功能需求做對(duì)應(yīng)的處理。

5.3 categories為關(guān)系拓?fù)鋱D

除了第一級(jí)市級(jí)外的所有區(qū)與街道級(jí)名字，這里categories的數(shù)據(jù)格式需要做成以下格式：

用name表示各個(gè)節(jié)點(diǎn)名字

要實(shí)現(xiàn)關(guān)系拓?fù)鋱D，只要根據(jù)以上的數(shù)據(jù)格式，傳入data、links與categories的數(shù)據(jù)后就可以顯示出對(duì)應(yīng)的數(shù)據(jù)可視化的關(guān)系圖。

6 節(jié)點(diǎn)拓展性

6.1 每個(gè)節(jié)點(diǎn)可自定義樣式

為了有更好的拓展性，這里的每一個(gè)節(jié)點(diǎn)都可以換上自定義的圖片，比如現(xiàn)在想要將第二級(jí)區(qū)級(jí)的節(jié)點(diǎn)換上圖片■，那換好圖片后的效果如圖3所示：

圖3 自定義節(jié)點(diǎn)樣式

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

6.2 添加新的層級(jí)節(jié)點(diǎn)

本文介紹的是市區(qū)街道三級(jí)與市區(qū)二級(jí)的關(guān)系拓?fù)鋱D，當(dāng)想要添加更多層級(jí)時(shí)，對(duì)links和data數(shù)組里新增對(duì)應(yīng)數(shù)據(jù)，這里展示添加第四級(jí)時(shí)的數(shù)據(jù)格式：

將數(shù)據(jù)放入對(duì)應(yīng)的links和data中后就可以實(shí)現(xiàn)新增層級(jí)的效果。

7 懸浮彈出窗的內(nèi)容展示

在配置ECharts的option參數(shù)中，tooltip為懸浮窗，可自定義樣式以及數(shù)據(jù)的展現(xiàn)形式；這里就是tooltip的配置內(nèi)容：

show為true時(shí)表示顯示彈窗，為false時(shí)則不會(huì)顯示彈窗，之后的配置項(xiàng)也就不會(huì)生效；background為懸浮窗的背景顏色，這里用16進(jìn)制表示不同的顏色；position為懸浮窗的顯示位置，這里賦值‘right’表示當(dāng)懸浮在市區(qū)街道節(jié)點(diǎn)或者兩兩節(jié)點(diǎn)的連線上時(shí)會(huì)將懸浮窗展示在節(jié)點(diǎn)和連線的右邊；formatter函數(shù)里可以自定義懸浮窗的數(shù)據(jù)展示效果，這里的function表示使用函數(shù)，括號(hào)里的params是懸浮在每個(gè)節(jié)點(diǎn)上時(shí)對(duì)應(yīng)節(jié)點(diǎn)里的數(shù)據(jù)，這里可以操作數(shù)據(jù)。

8 關(guān)系拓?fù)鋱D的展現(xiàn)方式

在 配 置ECharts的option參 數(shù) 中， series參 數(shù) 中l(wèi)ayout的值有三種選項(xiàng)，none、 circular與 force。

force選項(xiàng)的效果比較集中節(jié)點(diǎn)，但在多數(shù)據(jù)時(shí)會(huì)顯得雜亂；circula選項(xiàng)的效果時(shí)將所有節(jié)點(diǎn)布置在圓上，但在多數(shù)據(jù)時(shí)，連線較多，也會(huì)顯得比較雜亂；none選項(xiàng)可以自定義，將數(shù)據(jù)節(jié)點(diǎn)放在自己想要的位置上，不管數(shù)據(jù)多與少都能很好地清晰展示出來(lái)；本文是將每次層節(jié)點(diǎn)放在不同半徑的圓上。

將每一級(jí)的節(jié)點(diǎn)平均分配在圓弧上，根據(jù)每級(jí)數(shù)據(jù)的個(gè)數(shù)，在自定義半徑的圓弧上平均顯示每個(gè)節(jié)點(diǎn)，圖4為一個(gè)簡(jiǎn)要說(shuō)明，在一個(gè)圓上平均布置了A到J這10個(gè)點(diǎn)，每個(gè)點(diǎn)的間距都是相同的。要實(shí)現(xiàn)這樣的效果，就得知道原點(diǎn)O的坐標(biāo)軸，以及每一個(gè)在圓上分布的點(diǎn)的坐標(biāo)。這里是通過(guò)弧度來(lái)計(jì)算每個(gè)點(diǎn)所在的坐標(biāo)軸。

圖4 節(jié)點(diǎn)平均分配在圓弧上

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

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

O為中心圓點(diǎn)，LEFT和TOP為G點(diǎn)的橫縱坐標(biāo)，LEFT=NG+O為橫坐標(biāo)值，TOP=ON+O為縱坐標(biāo)值；平分后的每一個(gè)圓心角，所對(duì)的弧長(zhǎng)、弧度都是相等的。

配置圓心點(diǎn)的橫縱坐標(biāo)circleX和circleY，設(shè)置第二層級(jí)節(jié)點(diǎn)所在圓的半徑outerCircleRudis，設(shè)置第三層級(jí)節(jié)點(diǎn)所在圓的半徑moreOuterCircleRudis，計(jì)算角度avd和弧度ahd：

index表示的是索引值，是當(dāng)前節(jié)點(diǎn)數(shù)據(jù)在第三級(jí)所有節(jié)點(diǎn)數(shù)據(jù)中的索引位置；使用Number（值），表示將括號(hào)內(nèi)的值強(qiáng)制轉(zhuǎn)換為數(shù)字類型，不能是字符串等數(shù)據(jù)類型；.toFixed(0)表示將數(shù)字的小數(shù)點(diǎn)后所有數(shù)字刪除掉，轉(zhuǎn)化為整數(shù)。

第三級(jí)的數(shù)據(jù)格式：

第二級(jí)與第三級(jí)的節(jié)點(diǎn)坐標(biāo)，都是根據(jù)（circleX,circleY）中心點(diǎn)O的橫縱坐標(biāo)來(lái)定義的，再根據(jù)自定義的半徑畫圓，最后在圓上平均顯示每個(gè)節(jié)點(diǎn)。

ECharts能夠做到千萬(wàn)級(jí)數(shù)據(jù)量的前端展現(xiàn)，支持多維數(shù)據(jù)動(dòng)態(tài)數(shù)據(jù)可視化，支持多種渲染方案和跨平使用，通過(guò)學(xué)習(xí)與研究，為后期廣播電視臺(tái)的大量數(shù)據(jù)監(jiān)測(cè)、數(shù)據(jù)可視化呈現(xiàn)、多場(chǎng)景應(yīng)用提供了技術(shù)支撐。