劉亞茹 張軍

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

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

中圖分類號：TP312.1；TP311.13

文獻標志碼：A

0 引言

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

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

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

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

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

2.1 傳遞信息要高效

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

2.2 重視視覺效果

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

2.3 展示圖表合理

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

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

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

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

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

地圖：全國、各省之間或市區(qū)之間的數(shù)據(jù)對比。可選地圖。

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

3 相關技術介紹

3.1 Vue.js框架

Vue.js是一款基于JavaScript的面向Web前端的開源框架，它能夠實現(xiàn)軟件工程項目的高效開發(fā)，可以縮短開發(fā)者的交付周期。Vue.js是輕量級的，有很多獨立的庫或功能，是一套用于構建用戶界面的漸進式框架。相比于目前已存在的其他前端框架，Vue.js的特點在于采用自底向上增量開發(fā)設計方法。Vue.js的核心庫只關注視圖層，并且考慮到開發(fā)強度，Vue.js學習起來并不難，對于開發(fā)者來說很容易掌握并在項目上應用^［5］。

3.2 Echarts

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

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

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

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

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

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

3.3 DataV

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

4 政務招商平臺數(shù)據(jù)可視化設計

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

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

數(shù)據(jù)庫：在關系型數(shù)據(jù)庫MySQL中創(chuàng)建對應的表，將數(shù)字招商平臺數(shù)據(jù)信息存儲在MySQL表中，使用SQL語句查詢需要的部分數(shù)據(jù)。

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

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

import axios from 'axios';

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

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

//設置20 s超時時間

timeout： 20000，

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

}）;

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

5 平臺功能模塊的實現(xiàn)

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

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

// 引入封裝組件

import Echart from '@/common/echart'

export default {

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

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

// 聲明組件

components： { Echart}，

…

}

5.1 招商概況模塊

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

代碼如下：

5.2 土地和樓宇庫存模塊

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

5.3 招商金額月報表模塊

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

5.4 引資產(chǎn)業(yè)結構、滿意度及目標達成率模塊

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

6 結語

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

參考文獻

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

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

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

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

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

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

［7］郭子豪，劉一林，田鑫裕，等.基于ECharts的新冠肺炎疫情實時監(jiān)控系統(tǒng)的設計與開發(fā)［J］.電腦與信息技術，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