基于ECharts+JS+Flask 交互可视化呈现NBA近期比赛信息及球队排名及数据

标签：Flask data JS 源码球队 res NBA js 数据

文章|内容

结语|源代码

文章|内容

和大家分享一个我在闲暇之余写的一个小项目。

为了能够更加直观的了解近期的NBA比赛信息、球队排名以及数据，本项目采用了ECharts、JS、Flask等技术进行可视化呈现。

通过这种方式，我们可以更直观的了解NBA比赛，为球迷提供更好的观赛体验。

在这个项目中，我们将分享如何使用ECharts、JS和Flask来可视化NBA近期比赛信息和球队排名。

通过该项目，展示如何结合前端和后端技术快速构建数据可视化Web应用程序。

项目内包含以下内容：

首先找到app.py文件，启动flask服务

我们注册好了蓝图，用来区分后端api接口和home主页，未来我们的前端JS会向后端api发送请求来获取数据

启动后浏览器打开127.0.0.1:5000打开我们的项目

项目启动后的效果如下

严格来说，本项目所呈现的地图并非某个特定国家的地图。是由于多伦多猛龙队的特殊性，我将安大略省（加拿大）纳入地图中以呈现多伦多猛龙队。因此，它应该被称为 NBA 球队分布图

进入项目后，呈现NBA各支球队的地图和排名数据

默认情况下右侧会显示当前nba赛程中各支球队的排名数据

当鼠标移动到某个状态上时，气泡上会呈现当前州包含的所有球队，以及包含的球队作为主场在本州近期已经发生的比赛及未来即将发生的比赛信息

例如下图，鼠标移动到田纳西州，会呈现孟菲斯灰熊队的数据

本项目的 NBA 比赛数据和球队排名数据均来自聚合数据接口平台

以下是接口地址

NBA赛事-NBA赛事API接口-免费API接口-聚合数据

您需要注册并申请 API 密钥才能发送数据检索请求

有了密钥之后，需要在config.py文件中的NBA进行配置

接下来你就可以在项目中引入config.NBA_SCORE_API_KEY然后发送请求了

import config

@api_bp.route('/api/getNBA_rank_data')
def get_new_data():
    apiUrl = 'http://apis.juhe.cn/fapig/nba/rank'
    apiKey = config.NBA_SCORE_API_KEY
    requestParams = {'key': apiKey}

    try:
        response = requests.get(apiUrl, params=requestParams)
        response.raise_for_status()  # 检查响应状态码是否为200
        res = json.loads(response.text)
        if res['error_code'] != 0:
            return jsonify({'error': '请求异常', 'message': res['reason'], 'error_code': res['error_code']})
        else:
            return res
    except requests.exceptions.RequestException as e:
        print(f'请求异常: {e}')
        return jsonify({'error': '请求异常', 'message': str(e)})

当然你也可以模拟一个假的数据JSON来代替API获取的数据

接下来设计好我们的html页面，留一个div容器给echarts

然后我们需要在index.html页面中引入echarts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="static/css/background_style.css"> 
    <!-- static/css/background_style.css -->
    <title>DataVisualization</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="../static/js/flash.js"></script>
    <script type="text/javascript">
        var networkHost = "{{ network_host }}";
        var networkPort = "{{ network_port }}";
        window.networkHost = networkHost;
        window.networkPort = networkPort;
    </script>
    <script src="{{ url_for('static', filename='js/data_fetch.js') }}"></script>
    <script src="{{ url_for('static', filename='js/USA.js') }}?t={{ timestamp }}"></script>
</head>
<body>
<div>
    <!-- 欢迎屏幕 -->
    <div id="welcome-screen">
        <div id="welcome-text">WELCOME</div>
    </div>
    <!-- 主页 -->
    <div style="display:flex;">
        <!-- ECharts DOM -->
        <div id="main" style="height: 95vh;width: 70vw;"></div>
        <!-- 右侧信息栏 -->
        <div style="height: 95vh;width: 30vw;">
            <div id="teamInfo" class="hide">
                <table></table>
            </div>
            <div id="teamRank" class="show">
                <table></table>
            </div>

        </div>
        
    </div>

</div>

</body>
</html>

具体如何使用echarts组件我在这里就不细说了可以在echarts的技术文档里看，很清晰

接下来我们需要准备一份美国地图的json数据来让echarts把地图呈现在元素上，因为NBA包含了多伦多猛龙队，所以我们需要单独再搜索一份加拿大地图JSON数据，提取其中安大略省的数据，并添加到美国地图JSON数据中

这样下来我们就得到了一份包含(安大略省的)美国地图json数据

然后我们需要把阿拉斯加州缩小，让地图数据呈现的更直观，我用三种不同的颜色来区分东部球队、西部球队和多伦多猛龙队的位置，最后得到如下的地图：

以下是echarts的技术文档

Documentation - Apache ECharts

在我们的Flask后端写两个接口，项目启动的时候，用户使用JS向你的后端发送请求，然后你的后端请求API返回数据给用户的前端，js将数据呈现在页面上

data_fetch.js 文件和api.py 文件的请求交互


function get_score_data(){
    axios.get("api/getNBA_score_data").then((res) => {
        window.scoreData = res.data;

        // 设置自定义事件通知其他js数据已获取
        document.dispatchEvent(new Event('scoreDataReady'));
    }).catch((err) => {
        window.alert("Request failed:"+err)
        console.log('Request failed:'+err)
    })
}
function get_rank_data(){
    axios.get("api/getNBA_rank_data").then((res) => {
        window.rankData = JSON.stringify(res.data);
        // 设置自定义事件通知其他js数据已获取
        document.dispatchEvent(new Event('rankDataReady'));
    }).catch((err) => {
        window.alert("Request failed:"+err)
        console.log('Request failed:'+err)
    })
}

get_score_data()
get_rank_data()