招商平臺(tái)數(shù)據(jù)可視化大屏的設(shè)計(jì)與實(shí)現(xiàn)

劉亞茹 張軍

摘要：基于Vue.js框架，使用DataV和Echarts圖表庫(kù)技術(shù)，對(duì)業(yè)務(wù)數(shù)據(jù)進(jìn)行多維度、深層次的分析，文章設(shè)計(jì)了招商數(shù)據(jù)可視化大屏頁面。該頁面采用條形圖、折線圖、餅圖等標(biāo)準(zhǔn)圖形將產(chǎn)業(yè)、園區(qū)、企業(yè)等數(shù)據(jù)以圖表化形式生動(dòng)展現(xiàn)，能夠?qū)崟r(shí)展示招商引資最新進(jìn)展及成效，方便進(jìn)行量化分析，讓政府部門在做決策時(shí)有了科學(xué)化的依據(jù)，在招商方面可以更加精準(zhǔn)化，提高服務(wù)質(zhì)量，從而極大地提升政府部門價(jià)值。

關(guān)鍵詞：數(shù)字化；可視化；Echarts圖表；Vue.js框架

中圖分類號(hào)：TP312.1；TP311.13

文獻(xiàn)標(biāo)志碼：A

0 引言

目前，世界已經(jīng)進(jìn)入數(shù)字經(jīng)濟(jì)時(shí)代，數(shù)字經(jīng)濟(jì)成為支撐當(dāng)前和未來世界經(jīng)濟(jì)發(fā)展的重要?jiǎng)恿?sup>［^1］。數(shù)據(jù)作為數(shù)字經(jīng)濟(jì)時(shí)代最核心、最具價(jià)值的生產(chǎn)要素，正深刻地改變著人類社會(huì)的生產(chǎn)和生活方式^［2］。數(shù)據(jù)信息資源呈現(xiàn)海量化、多元化、分布范圍廣、異構(gòu)性等特點(diǎn)。數(shù)據(jù)只有被合理解讀和分析才能發(fā)揮其價(jià)值^［3］。數(shù)據(jù)可視化依托數(shù)據(jù)挖掘、人工智能等技術(shù)，具有可視性、動(dòng)態(tài)性、交互性、立體性、直觀性的數(shù)據(jù)特點(diǎn)，為解決利用信息資源提供了有效路徑^［4］。2022年，國(guó)務(wù)院辦公廳印發(fā)《全國(guó)一體化政務(wù)大數(shù)據(jù)體系建設(shè)指南》要求各地區(qū)各部門深入挖掘、充分利用數(shù)據(jù)資源，促進(jìn)政務(wù)服務(wù)模式創(chuàng)新?！稊?shù)字中國(guó)建設(shè)整體布局規(guī)劃》指出，要發(fā)展高效協(xié)同的數(shù)字政務(wù)，強(qiáng)化數(shù)字化能力建設(shè)，促進(jìn)信息系統(tǒng)網(wǎng)絡(luò)互聯(lián)互通、數(shù)據(jù)按需共享、業(yè)務(wù)高效協(xié)同，提升數(shù)字化服務(wù)水平。本文基于Vue.js框架，使用DataV和Echarts圖表庫(kù)技術(shù)，對(duì)業(yè)務(wù)數(shù)據(jù)進(jìn)行多維度、深層次的分析，設(shè)計(jì)實(shí)現(xiàn)了招商數(shù)據(jù)可視化大屏頁面。采用條形圖、折線圖、餅圖等標(biāo)準(zhǔn)圖形對(duì)產(chǎn)業(yè)、園區(qū)、企業(yè)等數(shù)據(jù)生動(dòng)展現(xiàn)，為領(lǐng)導(dǎo)提供智能監(jiān)管和有力的決策依據(jù)。

1 數(shù)據(jù)可視化大屏

數(shù)據(jù)可視化最早可追溯到20世紀(jì)50年代的計(jì)算機(jī)圖形學(xué)。數(shù)據(jù)實(shí)質(zhì)上是種類繁多的數(shù)字，而利用恰當(dāng)?shù)膱D形或圖表進(jìn)行歸類展示，能夠更加直觀地觀察和獲得數(shù)據(jù)顯性或隱性的價(jià)值。數(shù)據(jù)可視化是將信息技術(shù)與視覺藝術(shù)完美融合，借助圖形化手段達(dá)到交互效果，增加數(shù)據(jù)的生動(dòng)表現(xiàn)力，從而賦予數(shù)據(jù)可視化的價(jià)值，幫助用戶更好地解讀數(shù)據(jù)。

數(shù)據(jù)可視化大屏以大屏幕智能設(shè)備為載體，將復(fù)雜數(shù)據(jù)以可視化的方式展現(xiàn)，易于查看、分析和做出更好的決策。數(shù)據(jù)可視化大屏廣泛應(yīng)用于政府、教育、醫(yī)療、化工、金融等行業(yè)的智慧場(chǎng)景。

2 數(shù)據(jù)可視化大屏設(shè)計(jì)原則

2.1 傳遞信息要高效

不要添加過多與主題無關(guān)的信息，即減少屏幕上的冗余元素。展示數(shù)據(jù)區(qū)分主次要信息，將內(nèi)容具體化、詳細(xì)化，主要信息字體可以更大，顏色高亮。在圖表選擇上，本設(shè)計(jì)使用常見、慣用的圖表。

2.2 重視視覺效果

合理劃分布局，盡可能在一屏上展示完整信息，不出現(xiàn)滾動(dòng)條。在色彩選擇上，多以深色系為主，用深色背景烘托彩色圖表，保證數(shù)據(jù)明度與色調(diào)的和諧統(tǒng)一。這樣不僅可以在視覺上更好聚焦，還能達(dá)到長(zhǎng)時(shí)間觀看也不會(huì)讓眼睛出現(xiàn)刺痛感的效果。

2.3 展示圖表合理

根據(jù)數(shù)據(jù)的特點(diǎn)以及數(shù)據(jù)之間的關(guān)系，決定選擇什么樣的圖表類型，梳理數(shù)據(jù)包含的維度，突出關(guān)鍵信息。一些常用圖形如圖1所示。

比較關(guān)系：各種數(shù)據(jù)在同一時(shí)間或維度內(nèi)的比較或排行，可選用柱狀圖、堆疊圖或橫向柱狀圖。

趨勢(shì)：一條或多條數(shù)據(jù)在一段時(shí)間內(nèi)的走勢(shì)及變化情況，可選用折線圖。

占比：各種存儲(chǔ)、計(jì)算資源的使用占比情況、總量占比等，可選用餅狀圖、環(huán)形圖、堆疊柱狀圖。

區(qū)間：數(shù)值是否達(dá)到閾值，或資源使用情況?？蛇x堆疊圖、堆疊面積圖。

地圖：全國(guó)、各省之間或市區(qū)之間的數(shù)據(jù)對(duì)比?？蛇x地圖。

一些常用圖形如圖1所示。

3 相關(guān)技術(shù)介紹

3.1 Vue.js框架

Vue.js是一款基于JavaScript的面向Web前端的開源框架，它能夠?qū)崿F(xiàn)軟件工程項(xiàng)目的高效開發(fā)，可以縮短開發(fā)者的交付周期。Vue.js是輕量級(jí)的，有很多獨(dú)立的庫(kù)或功能，是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。相比于目前已存在的其他前端框架，Vue.js的特點(diǎn)在于采用自底向上增量開發(fā)設(shè)計(jì)方法。Vue.js的核心庫(kù)只關(guān)注視圖層，并且考慮到開發(fā)強(qiáng)度，Vue.js學(xué)習(xí)起來并不難，對(duì)于開發(fā)者來說很容易掌握并在項(xiàng)目上應(yīng)用^［5］。

3.2 Echarts

Echarts是一款常用于數(shù)據(jù)可視化開發(fā)的圖表庫(kù)，它是基于JavaScript腳本語言來實(shí)現(xiàn)的^［6］，并且是開源的。Echarts是由百度團(tuán)隊(duì)開發(fā)出來的，在2018年初由百度團(tuán)隊(duì)捐贈(zèng)給了Apache基金會(huì)，所以也稱Apache Echarts。Echarts滿足各行業(yè)圖表展示需求，具有以下特性。

Echarts圖表庫(kù)提供了種類豐富的可視化圖形^［7］，如可以展示數(shù)據(jù)走勢(shì)的折線圖，可以展示數(shù)據(jù)排行或類比的柱狀圖，展示數(shù)據(jù)占比的餅圖、股市及期貨市場(chǎng)中反映大勢(shì)狀況和價(jià)格信息的K線圖，展示地理數(shù)據(jù)的地圖，描繪數(shù)據(jù)關(guān)系的關(guān)系圖和旭日?qǐng)D等。

Echarts支持跨平臺(tái)開發(fā)使用。Echarts圖表主要在瀏覽器上渲染，不僅可以用在小屏幕的移動(dòng)設(shè)備上，也可以用在電腦設(shè)備上。同時(shí)，Echarts還可以用在小程序開發(fā)中。

Echarts支持多種數(shù)據(jù)格式的數(shù)據(jù)源，省去對(duì)數(shù)據(jù)轉(zhuǎn)換的環(huán)節(jié)，還支持多個(gè)組件共享同一份數(shù)據(jù)。同時(shí)，Echarts內(nèi)部也提升了數(shù)據(jù)可視化應(yīng)用的性能。

Echarts支持多維度數(shù)據(jù)，滿足基本的交互功能。Echarts支持對(duì)多維度數(shù)據(jù)進(jìn)行篩選，支持在視圖上縮放、查看細(xì)節(jié)等操作，也能夠使用不同的字體顏色、字體大小、字體透明度等映射不同維度的數(shù)據(jù)，提升了視覺體驗(yàn)。

Echarts還提供了一些炫酷的特效，讓圖表有動(dòng)態(tài)的效果，能夠抓住用戶眼球。

3.3 DataV

DataV是一款主要用于構(gòu)建大屏或者全屏的數(shù)據(jù)可視化圖表組件庫(kù)，有Vue和React兩種版本。該組件庫(kù)提供了多種SVG邊框和裝飾功能，用來美化頁面，提升視覺效果。該組件庫(kù)不僅包含常用的圖表組件，如柱狀圖、折線圖等，還有一些特殊圖表，如水位圖、飛線圖等。

4 政務(wù)招商平臺(tái)數(shù)據(jù)可視化設(shè)計(jì)

目前，各市政務(wù)為了推動(dòng)區(qū)域經(jīng)濟(jì)發(fā)展，對(duì)數(shù)字化技術(shù)高效賦能，建設(shè)數(shù)字招商平臺(tái)，實(shí)現(xiàn)產(chǎn)業(yè)招商數(shù)字化創(chuàng)新。市域借助智慧化、數(shù)字化、場(chǎng)景化的平臺(tái)，可以多元、全面地展現(xiàn)區(qū)域的投資興業(yè)魅力。市域充分運(yùn)用大數(shù)據(jù)為科學(xué)招商、精準(zhǔn)招商助力，能夠促進(jìn)產(chǎn)業(yè)協(xié)同發(fā)展，為高質(zhì)量發(fā)展經(jīng)濟(jì)奠定堅(jiān)實(shí)基礎(chǔ)。而政務(wù)招商平臺(tái)數(shù)據(jù)可視化則是打破傳統(tǒng)商業(yè)發(fā)展壁壘，用數(shù)據(jù)賦能產(chǎn)業(yè)發(fā)展，實(shí)現(xiàn)數(shù)字產(chǎn)業(yè)化、產(chǎn)業(yè)數(shù)字化。政務(wù)招商數(shù)據(jù)可視化平臺(tái)可以直觀地反映招商現(xiàn)狀，對(duì)地區(qū)土地、樓宇、廠房等數(shù)據(jù)資源以圖表化形式呈現(xiàn)，能夠?qū)崟r(shí)展示招商引資最新進(jìn)展及成效，方便進(jìn)行量化分析，讓政府部門在做決策時(shí)有了科學(xué)化的依據(jù)，在招商方面可以更加精準(zhǔn)化、提高服務(wù)質(zhì)量，從而極大地提升政府部門價(jià)值。該系統(tǒng)的功能描述如表1所示。

數(shù)據(jù)可視化系統(tǒng)由數(shù)據(jù)庫(kù)、后端和前端3個(gè)部分組成，系統(tǒng)框架如圖2所示。

數(shù)據(jù)庫(kù)：在關(guān)系型數(shù)據(jù)庫(kù)MySQL中創(chuàng)建對(duì)應(yīng)的表，將數(shù)字招商平臺(tái)數(shù)據(jù)信息存儲(chǔ)在MySQL表中，使用SQL語句查詢需要的部分?jǐn)?shù)據(jù)。

后端：使用Springboot+MyBatis技術(shù)搭建后端服務(wù)器，快速開發(fā)后端接口。后端功能主要是對(duì)數(shù)據(jù)庫(kù)數(shù)據(jù)和業(yè)務(wù)邏輯進(jìn)行處理后，將數(shù)據(jù)封裝成json格式，向前端提供數(shù)據(jù)接口。

前端：前端發(fā)送Http請(qǐng)求到后端，獲取數(shù)據(jù)，以圖表的形式展示在頁面上。前端使用Vue-cli+DataV+Echarts創(chuàng)建項(xiàng)目環(huán)境。前端通過axios進(jìn)行數(shù)據(jù)請(qǐng)求，在main.js文件中進(jìn)行全局配置，代碼如下。

import axios from 'axios';

//把方法放到vue的原型上，這樣就可以全局使用了

Vue.prototype.$http = axios.create（{

//設(shè)置20 s超時(shí)時(shí)間

timeout： 20000，

baseURL： 'http：//XXXX：8080'， //這里設(shè)置后端地址

}）;

由于要獲得實(shí)時(shí)數(shù)據(jù)，所以通過定時(shí)器setInterval（）函數(shù)，設(shè)置每隔10 s重新調(diào)用一次接口，以實(shí)現(xiàn)ECharts圖表前端顯示數(shù)據(jù)的更新。

5 平臺(tái)功能模塊的實(shí)現(xiàn)

按著以上系統(tǒng)功能設(shè)計(jì)及流程，實(shí)現(xiàn)了界面中的各項(xiàng)功能。接下來展示部分模塊實(shí)現(xiàn)的前端代碼及界面效果。圖中數(shù)據(jù)為演示數(shù)據(jù)。

前端將Echarts圖表配置封裝成了組件，對(duì)數(shù)據(jù)和屏幕改動(dòng)進(jìn)行了監(jiān)聽，能夠動(dòng)態(tài)渲染圖表數(shù)據(jù)和大小，在使用時(shí)只需引入封裝，代碼如下：

// 引入封裝組件

import Echart from '@/common/echart'

export default {

// 定義配置數(shù)據(jù)

data（）{ return { options： {}}}，

// 聲明組件

components： { Echart}，

…

}

5.1 招商概況模塊

通過招商概況模塊數(shù)據(jù)展現(xiàn)如圖3所示，可以直觀了解當(dāng)前項(xiàng)目個(gè)數(shù)、簽約金額、在談項(xiàng)目個(gè)數(shù)、項(xiàng)目線索個(gè)數(shù)、落地項(xiàng)目個(gè)數(shù)、落地資金、接待訪問次數(shù)、重點(diǎn)項(xiàng)目個(gè)數(shù)。在各項(xiàng)數(shù)字下方展示了和上一年對(duì)比的同比增長(zhǎng)率或同比下降率。

代碼如下：

5.2 土地和樓宇庫(kù)存模塊

土地和樓宇庫(kù)存模塊展現(xiàn)如圖4所示，以直觀的數(shù)字展示商業(yè)用地面積、廠房待租面積、商業(yè)待租面積、工業(yè)用地面積。在各項(xiàng)數(shù)字下方還展示了同比增長(zhǎng)率或同比下降率。

5.3 招商金額月報(bào)表模塊

招商金額月報(bào)表模塊展現(xiàn)如圖5所示，以柱狀圖的形式展示各月招商金額數(shù)。

5.4 引資產(chǎn)業(yè)結(jié)構(gòu)、滿意度及目標(biāo)達(dá)成率模塊

引資產(chǎn)業(yè)結(jié)構(gòu)、滿意度及目標(biāo)達(dá)成率模塊展現(xiàn)如圖6所示。產(chǎn)業(yè)結(jié)構(gòu)以環(huán)形圖的形式展示了第一、二、三產(chǎn)業(yè)的占比情況。滿意度以儀表盤的形式展示。年度目標(biāo)達(dá)成率以環(huán)形圖的形式展示，中部展示具體的數(shù)據(jù)。

6 結(jié)語

數(shù)據(jù)可視化是將信息技術(shù)與視覺藝術(shù)完美融合，借助圖形化手段，如柱狀圖、折線圖、餅圖、儀表盤等達(dá)到交互效果，增加數(shù)據(jù)的生動(dòng)表現(xiàn)力，賦予數(shù)據(jù)可視化的價(jià)值，幫助用戶更好地解讀數(shù)據(jù)。招商數(shù)據(jù)可視化大屏可以直觀地反映招商現(xiàn)狀，對(duì)地區(qū)土地、樓宇、廠房等數(shù)據(jù)資源以圖表化形式呈現(xiàn)，能夠?qū)崟r(shí)展示招商引資最新進(jìn)展及成效，方便進(jìn)行量化分析，讓政府部門決策時(shí)有了科學(xué)化的依據(jù)，招商方面更加精準(zhǔn)化、提高服務(wù)質(zhì)量，從而極大地提升政府部門價(jià)值。

參考文獻(xiàn)

［1］趙俊湦.數(shù)字經(jīng)濟(jì)發(fā)展趨勢(shì)及我國(guó)的戰(zhàn)略抉擇［J］.中國(guó)工業(yè)和信息化，2022（9）：68-71.

［2］葉曉兵.大數(shù)據(jù)時(shí)代信息安全探討［J］.現(xiàn)代信息科技，2018（6）：169-170.

［3］程妮，尚宇波.基于JavaScript的疫情數(shù)據(jù)可視化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［J］.運(yùn)城學(xué)院學(xué)報(bào)，2022（6）：6-9.

［4］張陽.智慧圖書館大數(shù)據(jù)可視化服務(wù)與實(shí)踐——以武漢紡織大學(xué)圖書館為例［J］.武漢紡織大學(xué)學(xué)報(bào)，2022（5）：92-96.

［5］劉亞茹，張軍.Vue.js框架在網(wǎng)站前端開發(fā)中的研究［J］.電腦編程技巧與維護(hù)，2022（1）：18-19.

［6］鄭戟明，柳青.Echarts在數(shù)據(jù)可視化課程中的應(yīng)用［J］.電腦知識(shí)與技術(shù)，2020（2）：9-11.

［7］郭子豪，劉一林，田鑫裕，等.基于ECharts的新冠肺炎疫情實(shí)時(shí)監(jiān)控系統(tǒng)的設(shè)計(jì)與開發(fā)［J］.電腦與信息技術(shù)，2022（1）：35-39.

（編輯 王永超）

Design and implementation of large screen data visualization for government investment platformLiu Yaru， Zhang Jun

（Henan Vocational College of Water Conservancy and Environment， Zhengzhou 450000， China）

Abstract： Based on the Vue.js framework， using DataV and Echarts chart library technology to conduct multi-dimensional and in-depth analysis of business data， the paper designed and implemented a large screen page for investment promotion data visualization. This web page uses standard graphics such as bar charts， line charts， and pie charts to graphically display data on industries， parks， and enterprises. It can display the latest progress and effectiveness of investment promotion in realtime， facilitate quantitative analysis， and provide a scientific basis for government departments to make decisions. In terms of investment promotion， it can be more precise and improve service quality， greatly enhancing the value of government departments.Key words： digitalize; visualization; Echarts chart; Vue.js framework