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

運行環(huán)境：VScode

一、打開方式

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

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

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

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

5、勾選信任，點擊【是】

二、安裝工具類的包

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

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

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

三、可視化適配

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

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

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

四、配置插件

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

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

5、鼠標向下滑動找到Cssrem:Root Font Size選項,將值改成80（如下圖）；

五、vue中使用echarts

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

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

六、運行

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

2、在終端輸入npm run serve運行項目，并按回車。

3、藍色地址是本項目運行結(jié)果的地址。【Ctrl鍵+單擊】Local網(wǎng)址，即可打開項目。

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

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

效果圖

到此就結(jié)束了。

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

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

更多類型echarts

篇幅有限，僅展示幾種

散點圖

地理坐標/地圖

3D 柱狀圖

關(guān)系圖

?；鶊D?

3D 路徑圖

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

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