跳绳数据可视化案例分享_跳绳数据后台-优快云博客

一、案例背景

最近一段时间在通过跳绳来锻炼身体，并将每次跳绳的数据记录下来。为了更好的展示数据，所以想通过图表的方式将跳绳数据呈现出来。如下图是跳绳数据样本。

二、技术实现方案

网上查了有很多实现数据可视化的方式，尝试后选择使用相比较（个人认为）简单的方式，即采用JavaScript的ECharts可视化库来实现数据的图表展示。具体逻辑为通过html+ECharts编写数据可视化界面，通过python的flask库构建web服务，然后通过浏览器查看数据图表。

ECharts库介绍：

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 遵循 Apache-2.0 开源协议，免费商用。

ECharts官网地址：https://echarts.apache.org/zh/index.html

ECharts库下载地址：

1，）官网地址：下载 - Apache ECharts

2，）Github地址：https://github.com/apache/echarts/tree/5.4.3/dist

3，）菜鸟教程地址：ECharts 安装 | 菜鸟教程

三、案例实操

数据样本采取7月份跳绳数据，制作2个图表，一个折线图用于展示月跳绳数据，一个柱状图用于展示日跳绳数据。

1，）月跳绳数据展示（折线图）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的DOM-->
<div id="main" style="width: 1520px;height: 720px;"></div>
<script type="text/javascript">
    // 基于准备好的DOM，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'),'dark');

    // 指定图表的配置项和数据
    var option = {
        // backgroundColor:'rgba(255,192,203, 0.1)',
        title: {
            text:'7月份跳绳数据实例',
            subtext:'自造数据',
            align: 'left',
            left: 30,
            textStyle:{
                fontSize:24
            }
        },
        legend:{
            data:['跳绳数量','跳绳平均数'],
            align:'right',
            right:55,
            textStyle:{
                fontSize:16
            }
        },
        xAxis: {
            type:'category',
            data:["2023年7月03日","2023年7月04日","2023年7月05日","2023年7月06日","2023年7月09日","2023年7月11日","2023年7月13日","2023年7月14日","2023年7月15日","2023年7月18日","2023年7月19日","2023年7月21日","2023年7月22日","2023年7月23日","2023年7月25日","2023年7月27日","2023年7月29日","2023年7月31日"],
            axisLabel:{
                textStyle: {
                    fontSize:10
                }
            }
        },
        yAxis:{
            type:'value',
            axisLabel:{
                textStyle: {
                    fontSize:16
                }
            }
        },
        series: [{
            name:'跳绳数量',
            nameTextStyle:{fontSize:20},
            type:'line',
            symbol:'circle',
            symbolSize:10,
            data:[2386,2161,954,2251,2615,2661,3506,3271,1851,3381,3287,3702,2525,3753,4408,3515,2431,4582],
            label:{
                show:true
            }

        },
            {
                name: '跳绳平均数',
                nameTextStyle:{fontSize:20},
                type: 'line',
                symbol:'circle',
                symbolSize: 10,
                data:[113.61,108.25,119.25,112.55,130.75,147.8,175.3,172.15,154.25,169.05,205.43,185.1,126.25,197.52,220.4,152.82,135.05,254.55],
                label: {
                    show: true
                }

            }
        ],
        // 鼠标悬停至折现图图标处显示设置
        tooltip:{
            show:true,
            trigger:'axis',
            axisPointer:{
                type:'line',
                lineStyle:{
                    color:'#017bec',
                    type:'dashed'
                }
            }
        }
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

效果展示：

2，）日跳绳数据展示（部分代码）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可视化数据</title>
    <script src="../static/echarts.js"></script>
    <style>
        .body {
            background-image: url("../static/test03.jpg");
            filter: opacity(1000000%);
        }
</style>
</head>
<body class="body">
<!--7月份总计跳绳天数18天，跳绳总数为53240个-->
<div class="title" style="width: 100%;height: 40px;top: 0px;text-align: center;font-size: 26px;font-weight: bolder">
    7月份每天跳绳数量详情
</div>
<div id="main0" style="width: 620px;height: 420px;position: absolute; left: 100px;"></div>
<script type="text/javascript">
    // 基于准备好的DOM，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main0'), 'viges');

    // 指定图表的配置项和数据
    var option = {
        backgroundColor: 'rgba(216,191,216, 0.2)',
        title: {
            text: '7月3日分组跳绳数据',
            subtext: '共21组总计2386个',
            align: 'left',
            left: 200,
            textStyle: {
                fontSize: 22
            }
        },
        xAxis: {
            type: 'category',
            data: ["第1组", "第2组", "第3组", "第4组", "第5组", "第6组", "第7组", "第8组", "第9组", "第10组", "第11组", "第12组", "第13组", "第14组", "第15组", "第16组", "第17组", "第18组", "第19组", '第20组', "第21组"],
            axisLabel: {
                textStyle: {
                    fontSize: 10
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    fontSize: 16
                }
            }
        },
        series: [{
            name: '跳绳数量',
            nameTextStyle: {fontSize: 20},
            type: 'bar',
            symbol: 'circle',
            color: '#71C671',
            symbolSize: 10,
            data: [180, 100, 116, 180, 100, 90, 150, 60, 130, 100, 90, 105, 200, 80, 170, 70, 50, 190, 60, 75, 90],
            label: {
                show: true
            }
        }
        ],
        // 鼠标悬停至折现图图标处显示设置
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: '#017bec',
                    type: 'dashed'
                }
            }
        }
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<div id="main1" style="width: 620px;height: 420px; position: absolute; right: 100px;"></div>
<script type="text/javascript">
    // 基于准备好的DOM，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'), 'viges');

    // 指定图表的配置项和数据
    var option = {
        backgroundColor: 'rgba(216,191,216, 0.2)',
        title: {
            text: '7月4日分组跳绳数据',
            subtext: '共20组总计2161个',
            align: 'left',
            left: 200,
            textStyle: {
                fontSize: 22
            }
        },
        xAxis: {
            type: 'category',
            data: ["第1组", "第2组", "第3组", "第4组", "第5组", "第6组", "第7组", "第8组", "第9组", "第10组", "第11组", "第12组", "第13组", "第14组", "第15组", "第16组", "第17组", "第18组", "第19组", '第20组'],
            axisLabel: {
                textStyle: {
                    fontSize: 10
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    fontSize: 16
                }
            }
        },
        series: [{
            name: '跳绳数量',
            nameTextStyle: {fontSize: 20},
            type: 'bar',
            symbol: 'circle',
            color: '#F4A460',
            symbolSize: 10,
            data: [110, 100, 80, 130, 107, 99, 75, 120, 85, 100, 108, 300, 90, 70, 80, 100, 90, 87, 120, 110],
            label: {
                show: true
            }
        }
        ],
        // 鼠标悬停至折现图图标处显示设置
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: '#017bec',
                    type: 'dashed'
                }
            }
        }
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

页面效果展示：

3，）使用flask框架构建web服务

from flask import Flask,render_template

app = Flask(__name__,template_folder="template")

@app.route("/")
def index():
    return render_template('七月份跳绳数据可视化正式版本.html')

@app.route('/JulyRopeSkippingNumberDetails.html')
def hello():
    return render_template('JulyRopeSkippingNumberDetails.html')

app.run(port=15151,debug=True)

到此，操作基本完成~~~~

具体网页编写可以添加数据总结和网页跳转按钮用于两个页面的切换~~