招商平臺數據可視化大屏的設計與實現

劉亞茹 張軍

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

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

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

文獻標志碼：A

0 引言

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

1 數據可視化大屏

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

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

2 數據可視化大屏設計原則

2.1 傳遞信息要高效

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

2.2 重視視覺效果

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

2.3 展示圖表合理

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

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

趨勢：一條或多條數據在一段時間內的走勢及變化情況，可選用折線圖。

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

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

地圖：全國、各省之間或市區之間的數據對比?？蛇x地圖。

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

3 相關技術介紹

3.1 Vue.js框架

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

3.2 Echarts

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

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

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

Echarts支持多種數據格式的數據源，省去對數據轉換的環節，還支持多個組件共享同一份數據。同時，Echarts內部也提升了數據可視化應用的性能。

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

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

3.3 DataV

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

4 政務招商平臺數據可視化設計

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

數據可視化系統由數據庫、后端和前端3個部分組成，系統框架如圖2所示。

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

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

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

import axios from 'axios';

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

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

//設置20 s超時時間

timeout： 20000，

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

}）;

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

5 平臺功能模塊的實現

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

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

// 引入封裝組件

import Echart from '@/common/echart'

export default {

// 定義配置數據

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

// 聲明組件

components： { Echart}，

…

}

5.1 招商概況模塊

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

代碼如下：

5.2 土地和樓宇庫存模塊

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

5.3 招商金額月報表模塊

招商金額月報表模塊展現如圖5所示，以柱狀圖的形式展示各月招商金額數。

5.4 引資產業結構、滿意度及目標達成率模塊

引資產業結構、滿意度及目標達成率模塊展現如圖6所示。產業結構以環形圖的形式展示了第一、二、三產業的占比情況。滿意度以儀表盤的形式展示。年度目標達成率以環形圖的形式展示，中部展示具體的數據。

6 結語

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

參考文獻

［1］趙俊湦.數字經濟發展趨勢及我國的戰略抉擇［J］.中國工業和信息化，2022（9）：68-71.

［2］葉曉兵.大數據時代信息安全探討［J］.現代信息科技，2018（6）：169-170.

［3］程妮，尚宇波.基于JavaScript的疫情數據可視化系統的設計與實現［J］.運城學院學報，2022（6）：6-9.

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

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

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

［7］郭子豪，劉一林，田鑫裕，等.基于ECharts的新冠肺炎疫情實時監控系統的設計與開發［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