帥小夥用ECharts簡單模仿了圖書館的智慧大屏

本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！前端

帥小夥去圖書館划水，進門的時候被圖書館門口的大屏震驚了，這玩意我也會哈哈哈哈，因而就給它拿下！結果，帥小夥在寫博客的時候發現，照片上恰好有帥小夥的名字，帥小夥直呼：「帥啊」web

帥小夥開始了它的操做...ajax

實現效果

這簡直就是如出一轍，不知道的還覺得就是我寫的呢💛後端

因爲沒後後臺的數據，這裏的數據是隨意寫的api

1. 總體佈局

整個頁面的佈局延用的是以前學習 echarts 的佈局方式，採用的rem佈局，中間section部分採用的是flex佈局，每一條佔一份，達到均分的效果markdown

大概就是這樣的佈局方式app

2. 獲取天氣信息

在網上找一個天氣接口，而後接收返回數據，渲染就行，帥小夥採用的是http://www.tianqiapi.com這個網站的接口，免費接口一天只能用300次，因此在不用的時候請關閉，否則就會和帥小夥同樣全是undefind了echarts

$.ajax({
    type: "get",
    url: "https://tianqiapi.com/api",
    data: {
        appid: 53877822,
        appsecret: "UjcKYyQ6",
        version: "v6",
    },
    success: function (response) {
        console.log(response);
        let city = document.querySelector(".city")
        let wind = document.querySelector(".wind")
        let tem = document.querySelector(".tem")
        city.innerHTML = response.city + '市'
        wind.innerHTML = response.win + " " + response.win_speed;
        tem.innerHTML = response.tem2 + "℃ - " + response.tem1 + "℃";
    }
});
複製代碼

這樣就能夠返回當前ip地址下的天氣狀況，處理一下渲染便可，因爲帥小夥比較懶，發現有文件夾裏有 jQuery 的包就直接用jq了佈局

對於這樣單純使用 jQuery 中 Ajax 的方式仍是不推薦的，畢竟 jQuery 的體積太大了post

3. 男女比例餅狀圖

圖書館的這個界面其實真的很簡單，看着很高端而已，圖形都是很基礎的圖形

對於這個餅狀圖，採用的是echarts，只須要作一些基礎配置，更改series中的數據，調整文字顯示的位置，設置觸發的方式以及觸發後的表現

// 餅狀圖男女進館比例
(function () {
    let myChart = echarts.init(document.querySelector('.pie .chart'))
    let option = {
        // 標題
        title: {
            subtext: '純屬虛構',
            left: 'left'
        },
        // 提示框
        tooltip: {
            // 觸發方式
            trigger: 'item'
        },
        series: [{
            name: '男女比例',
            type: 'pie',
            // 餅的大小
            radius: '90%',
            //數據
            data: [{
                    value: 3750,
                    name: '男'
                },
                {
                    value: 1230,
                    name: '女'
                },
            ],
            // 餅的顏色
            color: [
                "#74b9ff",
                "#0984e3"
            ],
            // 文字顯示的位置
            label: {
                position: 'inner',
                fontSize: 14,
            },
            // 觸發的表現
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    myChart.setOption(option)
    window.addEventListener('resize', function () {
        myChart.resize()
    })
})();
複製代碼

4. 進館人數柱狀圖

柱狀圖有幾個須要注意的地方

第一個是要去除邊框以及兩個座標軸，在xAxis中和yAxis中配置座標軸以及分隔線show: false將線所有去掉

axisLine: {
    show: false
},
splitLine: {
    show: false
}
複製代碼

同時須要調整圖標的位置，否則會小小的，有一點點醜，經過配置grid屬性來實現

grid: {
    top: "10%",
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
}
複製代碼

提示框的觸發方式

tooltip: {
    trigger: "axis",
    axisPointer: {
        // 座標軸指示器，座標軸觸發有效
        type: "shadow" // 默認爲直線，可選爲：'line' | 'shadow'
    }
}
複製代碼

echarts 仍是須要多試試才能熟練掌握，配置項太多不大好記，用熟了會好不少

(function () {
    let myChart = echarts.init(document.querySelector('.bar .chart'));
    let option = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 座標軸指示器，座標軸觸發有效
                type: "shadow" // 默認爲直線，可選爲：'line' | 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel: {
                textStyle: {
                    color: "#ecf0f1",
                    fontSize: '12'
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        grid: {
            top: "10%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
        },
        series: [{
            data: [2765, 5576, 5420, 4064, 4806, 4505, 1247],
            type: 'bar',
            label: {
                show: true,
                position: "top",
                textStyle: {
                    color: "#ecf0f1",
                    fontSize: '12'
                }
            },
            barWidth: "50%"
        }]
    };
    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
複製代碼

5. 進館時間分佈折現圖

折現圖比較有意思，須要配置的選項比較多，首先咱們先處理座標軸的刻度，對 y 軸的刻度須要分隔成每2000一格最大是6000

yAxis: [{
    min: 0,
    max: 6000,
    interval: 2000 //分隔距離
}]
複製代碼

這樣就完成了y軸的刻度，接下來須要配置

xAxis: {boundaryGap: false}
複製代碼

這個配置項是將起點對齊y軸，也就是貼着y軸。接下來須要配置提示框

tooltip: {
    // 經過座標軸來觸發
    trigger: "axis"
}
複製代碼

在柱狀圖中咱們採用的是 shodow，默認值是line這裏就不用配置了

// 折線圖
(function () {
    let myChart = echarts.init(document.querySelector('.line .chart'))
    let option = {
        color: "#00f2f1",
        tooltip: {
            // 經過座標軸來觸發
            trigger: "axis"
        },
        grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: false,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['7點', '8點', '9點', '10點', '11點', '12點', '13點', '14點', '15點', '16點', '17點', '18點', '19點', '20點', '21點', '22點'],
            axisTick: {
                show: false
            },
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        yAxis: [{
                type: "value",
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)",
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                min: 0,
                max: 6000,
                interval: 2000
            }

        ],
        series: [{
            type: 'line',
            data: [1000, 4000, 3600, 3224, 1318, 3135, 3007, 3260, 3120, 2000, 1800, 4100, 5231, 1870, 500, 0]
        }]

    }
    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
複製代碼

總結

這個頁面的實現很是的簡單，多是由於沒有後臺數據吧，至少本身作起來沒有花費太多的時間，總的來講效果仍是很不錯的，靈感來源於生活，要學會從生活中發現技術的應用場景！

須要源碼能夠關注博主私信噢~