可視化效果圖文末附《大屏可視化系統(tǒng)》源代碼獲取方式~

運(yùn)行環(huán)境：VScode

一、打開方式

1、獲取zip源碼文件后，保存至本地，并解壓；

2、源代碼文件結(jié)構(gòu)簡介；

3、打開VScode編輯器，單擊菜單欄【文件】—>【打開文件夾】。

4、找到源文件所在位置，選擇文件夾。

5、勾選信任，點(diǎn)擊【是】

二、安裝工具類的包

1、右鍵單擊【Big-Screen】文件夾，選擇【在集成終端中打開】；

2、在終端輸入npm i -g @vue/cli 并回車。

注意當(dāng)前vue腳手架是webpack打包的；當(dāng)前 vue2 => vue-cli 5.0.8。

三、可視化適配

大屏下顯示一般都是16:9尺寸 1920*1080 ，做適配也就是在這個(gè)比例的基礎(chǔ)上進(jìn)行的。

1、右鍵單擊【bigping】文件夾—>【在集成終端中打開】；

2、在終端輸入npm i lib-flexible 然后回車。

四、配置插件

1、點(diǎn)擊1處；2、在2處搜索【px to rem & rpx & vw(cssrem)】；3、點(diǎn)擊插件右下角的安裝(下圖圈③處)；

4、安裝完插件后，插件右下角會(huì)有一個(gè)圓形齒輪，點(diǎn)擊【齒輪】——>點(diǎn)擊【Extension Settings擴(kuò)展設(shè)置】；

5、鼠標(biāo)向下滑動(dòng)找到Cssrem:Root Font Size選項(xiàng),將值改成80（如下圖）；

五、vue中使用echarts

1、右鍵單擊【bigping】文件夾—>【在集成終端中打開】；

2、下載echarts，在終端輸入npm i echarts，并按回車。

六、運(yùn)行

1、右鍵單擊【bigping】文件夾—>【在集成終端中打開】；

2、在終端輸入npm run serve運(yùn)行項(xiàng)目，并按回車。

3、藍(lán)色地址是本項(xiàng)目運(yùn)行結(jié)果的地址?！綜trl鍵+單擊】Local網(wǎng)址，即可打開項(xiàng)目。

• Local是本地地址，【按住ctrl+鼠標(biāo)單擊】地址訪問即可

• Network是局域地址?統(tǒng)一局域網(wǎng)可以訪問

效果圖

到此就結(jié)束了。

補(bǔ)充：用戶可根據(jù)自身需求，修改本可視化系統(tǒng)中圖像類別、比例。

源代碼文件 獲-取-方-式：搜gzh【李橋桉】，回復(fù)【可視化】

更多類型echarts

篇幅有限，僅展示幾種

散點(diǎn)圖

地理坐標(biāo)/地圖

3D 柱狀圖

關(guān)系圖

?；鶊D?

3D 路徑圖

可視化大屏系統(tǒng)源代碼?獲-取-方-式：

搜gzh【李橋桉】，回復(fù)【可視化】