如何實現炫酷的數字大屏

依託強大無遠開發平臺，可以快速實現帶各種酷炫聯動效果的數字化大屏。一起來看一下吧

DEMO 地址：

配置地址：

效果圖 1

效果圖 2

實現步驟

1. 完成大屏基本佈局。

使用一個主視窗作為背景，層號設定為 0。其他視窗設定層號為 1，並且窗體背景選擇無，頭部背景設定為透明。

2. 繫結合適的元件，設定每個從屬視窗的資料來源。

讓其依賴主視窗或其他視窗提供的@變數@，系統會自動形成聯動效果。本例中使用的元件是 enhancer-echarts 和 enhancer-numbers 元件。

3. 增加必要的樣式，覆蓋或去掉不必要的元件樣式。

本例中新增了如下CSS內容為每個視窗增加相框， 你可以根據實際情況，設定樣式載入的時機，比如幀初始化時。

#page頁面編號 .zwindow {
    box-shadow:none;
    overflow:visible;
}
#page頁面編號 .zwindow-header {
    box-shadow: none;
}
#page頁面編號 .zwindow-body {
    box-shadow: none;
    border-top: none;
    overflow:visible !important;
}
#page頁面編號 .zwindow-header:before {
    content: '';
    position:absolute;
    z-index: 33;
    top: -3px;
    left:-6px;
    height: 12px;
    width: 18px;
    border-left: solid 2px #666;
    border-top: solid 2px #666;
}
#page頁面編號 .zwindow-header:after {
    content: '';
    position:absolute;
    z-index: 33;
    top: -3px;
    right:-6px;
    height: 12px;
    width: 18px;
    border-right: solid 2px #666;
    border-top: solid 2px #666;
}
#page頁面編號 .zwindow-body:before {
    content: '';
    position:absolute;
    z-index: 33;
    bottom: -3px;
    left:-6px;
    height: 12px;
    width: 18px;
    border-left: solid 2px #666;
    border-bottom: solid 2px #666;
}
#page頁面編號 .zwindow-body:after {
    content: '';
    position:absolute;
    z-index: 33;
    bottom: -3px;
    right:-6px;
    height: 12px;
    width: 18px;
    border-right: solid 2px #666;
    border-bottom: solid 2px #666;
}

其他說明

本例中背景主視窗使用了自定義視窗，包含百度地圖對echarts 的擴充套件實現。地圖依賴的 echarts.js 需在全域性配置-前端-中提前引入：

就說到這裡了，有需要的可以看：

以上就是如何實現炫酷的數字大屏的詳細內容，更多請關注php中文網其它相關文章！