数据可视化螺蛳粉销售数据大屏项目一课一得

于 2024-12-07 19:52:46 发布
阅读量1k 收藏 10
点赞数 14
文章标签： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/T77589/article/details/144315206
版权

在本次螺蛳粉销售数据大屏项目中，我们小组以团队协作的方式深入探索了数据可视化与数据库交互的实践应用，旨在打造一个直观且信息丰富的销售数据展示平台，以下是对该项目的详细总结。

一、项目概述

本项目主要围绕螺蛳粉销售数据展开，通过 MySQL 数据库存储相关数据，并利用前端技术构建数据大屏以直观展示各类销售信息。涉及到的三张核心数据表分别为 national_network（记录网点所在省份与城市信息）、sale_products（涵盖不同口味螺蛳粉在各个日期的销售数据）以及 sale_provinces（记录不同月份销往各省份的不同口味螺蛳粉销量）。

二、项目实施过程

（一）数据库操作与数据准备

首先，依据给定的 SQL 代码在 MySQL 数据库中成功创建了 national_network、sale_products、sale_provinces 三张表，并插入了相应的数据。这些数据构成了整个数据大屏展示的基础，为后续的数据提取与分析提供了数据源泉。

（二）数据大屏布局与图形显示

  1. div 布局：精心规划了数据大屏的整体布局，运用 div 元素合理划分不同区域，包括用于展示柱形图、折线图、地图、饼图、词云图以及 “今日销量” 和 “累计销量” 等信息的特定区域，确保各元素在页面上的分布既美观又符合用户视觉浏览习惯。 
    <!DOCTYPE html>
<html>
<head>
    <title>数据大屏</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <!-- <script src="../static/js/echarts.min.js"></script> -->
    <script src="../static/js/jquery-3.7.1.js"></script>
    <script src="../static/js/china.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
    <link rel="stylesheet" href="../static/css/charts.css"/>
</head>
<body>
<div class="title">袋装螺蛳粉销量数据大屏</div>
<div class="mainbox">
    <div class="column-1">
        <div id="bar" class="charts"></div>
        <div id="line" class="charts"></div>
    </div>
    <div class="column-2">
        <div class="number-title">
            <div>今日销量</div>
            <div>累计销量</div>
        </div>
        <div class="number">
            <div id="today">100000</div>
            <div id="total">300000</div>
        </div>
        <div class="option">
            <label for="select">产品类型</label>&nbsp;
            <select name="select" id="select">
                <option value="all">所有</option>
                <option value="spicy">加辣款</option>
            </select>
        </div>
        <div id="map" class="map"></div>
    </div>
    <div class="column-1">
        <div id="pie" class="charts"></div>
        <div id="wordcloud" class="charts"></div>
    </div>
</div>
<script src="../static/js/bar.js"></script>
<script src="../static/js/line.js"></script>
<script src="../static/js/map.js"></script>
<script src="../static/js/pie.js"></script>
<script src="../static/js/wordcloud.js"></script>
</body>
</html>

  2. 柱形图：实现了柱形图的数据路由，从 sale_products 表中准确提取不同口味螺蛳粉在指定时间段内的销量数据，并将其以合适的格式传递给前端进行图形绘制。在图形显示方面，对柱形的颜色、宽度以及坐标轴标签等进行了优化，使其清晰直观地呈现各口味销量对比情况。 
    var chartDom_bar = document.getElementById('bar');
var myChart_bar = echarts.init(chartDom_bar);
// 配置项
option_bar = {
    title:{
        text:'各省份销量柱形图',
        left: 'center',          // 标题居中
        textStyle: {             // 标题文字样式
            color: 'white',       // 设置标题颜色为深灰色
            fontSize: 14,        // 设置字体大小（可选）
            fontWeight: 'bold'   // 设置字体加粗（可选）
        }
    },
    xAxis: {
        type: 'category',
        data: [],
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'bar',
    }],
    tooltip:{}
};
// ajax获取路由数据
$.ajax({
    url: "/bar",
    success: function(data) {
        option_bar.xAxis.data = data['省份']
        option_bar.series[0].data = data['总销量']
        // 配置项作用到图形中
        myChart_bar.setOption(option_bar);
    },
    error: function(xhr, type, errorThrown) {}
})

  3. 折线图：类似于柱形图，完成了折线图的数据路由，能够动态展示不同口味螺蛳粉销量随时间的变化趋势。在图形细节上，调整了折线的颜色、样式以及添加了数据标记点，增强了数据的可读性。 
    var chartDom_line = document.getElementById('line');
var myChart_line = echarts.init(chartDom_line);
// 配置项
option_line = {
    title:{
        text:'每日销量折线图',
        left: 'center',          // 标题居中
        textStyle: {             // 标题文字样式
            color: 'white',       // 设置标题颜色为深灰色
            fontSize: 14,        // 设置字体大小（可选）
            fontWeight: 'bold'   // 设置字体加粗（可选）
        }
    },
    xAxis: {
        type: 'category',
        data: [],
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'line',
    }],
    tooltip:{}
};
// ajax获取路由数据
$.ajax({
    url: "/line",
    success: function(data) {
        option_line.xAxis.data = data['日期']
        option_line.series[0].data = data['总销量']
        // 配置项作用到图形中
        myChart_line.setOption(option_line);
    },
    error: function(xhr, type, errorThrown) {}
})

  4. 地图：实现了地图的数据路由，可根据不同的需求（如 “所有产品” 或 “加辣款”）从 sale_provinces 表中提取相应数据，并在地图上以不同颜色和标记展示各省份的销量情况。同时，通过添加交互功能，如点击省份可显示详细销售信息等，提升了用户体验。 
    var chartDom_map = document.getElementById('map');
var myChart_map = echarts.init(chartDom_map);
var colors = {
    'normal':['#006d77', '#00e9ff', '#a3f7ff'],
    'spicy': ['#FFF59D', '#FFCA28', '#E64A19']
}
// 配置项
option_map = {
    title:{
        text:'各省份销量地图',
        left: 'center',          // 标题居中
        textStyle: {             // 标题文字样式
            color: 'white',       // 设置标题颜色为深灰色
            fontSize: 14,        // 设置字体大小（可选）
            fontWeight: 'bold'   // 设置字体加粗（可选）
        }
    },
    series: [
        {
            name:'销量',
            type: "map",
            mapType: "china",
            label: {
                show: true
            },
            roam: true,
            data: [
                { name: '北京', value: 10 },
                { name: '天津', value: 20 },
                { name: '广西', value: 20 },
                { name: '广东', value: 50 },
                { name: '湖南', value: 80 },
            ],
            itemStyle: {
                normal: {
                    areaColor: '#313695', // 地图区域默认填充颜色
                    borderColor: '#8cf5ff',   // 地图区域默认边框颜色
                    borderWidth: 0.5      // 地图区域默认边框宽度
                },
                emphasis: {
                    areaColor: '#4575b4', // 地图区域高亮填充颜色
                    borderColor: '#313695',// 地图区域高亮边框颜色
                    borderWidth: 1        // 地图区域高亮边框宽度
                }
            }
        }
    ],
    tooltip: {},
    visualMap: {
        calculable: true,
        inRange: {
            color: colors['normal']
        },
        min: 0,
        max: 500000,
        textStyle: {
            color: '#ffffff'
        }
    }
};
// ajax获取路由数据
$.ajax({
    url: "/map",
    success: function (data) {
        option_map.series[0].data = data
        // 配置项作用到图形中
        myChart_map.setOption(option_map);

        $('#select').change(function () {
            var value = $(this).val() // 获取当前下拉选项中的值
            if (value === 'spicy') {
                // 加辣款
                option_map.series[0].data = data['spicy_map'];  // 更新数据
                option_map.visualMap.inRange.color = colors['spicy'];   // 更新颜色
                option_map.title.text = '加辣款销量地图';
                myChart_map.setOption(option_map);  // 初始化图表
            } else if (value === 'all') {
                // 所有款
                option_map.series[0].data = data['list_map'];
                option_map.visualMap.inRange.color = colors['normal'];
                option_map.title.text = '各省份销量地图';
                myChart_map.setOption(option_map);
            }
        })

    },
    error: function (xhr, type, errorThrown) { }
})

（三）补充图形绘制

  1. 饼图：读取 sale_products 表的数据，精确统计了 2021 - 09 - 01 至 2021 - 09 - 23 期间各个口味螺蛳粉的销量总和。将统计结果以 json 格式发布到路由 /taste 中，并依据此数据成功绘制出螺蛳粉口味销量占比饼图，清晰展示了各口味在该时间段内的市场份额分布。 
    var chartDom_pie = document.getElementById('pie');
var myChart_pie = echarts.init(chartDom_pie);
// 配置项
option_pie = {
    title:{
        text:'口味销量占比饼图',
        left: 'center',          // 标题居中
        textStyle: {             // 标题文字样式
            color: 'white',       // 设置标题颜色为深灰色
            fontSize: 14,        // 设置字体大小（可选）
            fontWeight: 'bold'   // 设置字体加粗（可选）
        }
    },
    series: [
        {
            name: '',
            type: 'pie',
            radius: ['20%','40%'],
            center: ['50%', '50%'],
            data: [],
            label: {
                formatter: '{b}\n数量：{c}\n占比：{d}%' // 设置标签的文本格式
            },
        }
    ],
    tooltip:{}
};
// ajax获取路由数据
$.ajax({
    url: "/pie",
    success: function(data) {
        option_pie.series[0].data = data;
        // 配置项作用到图形中
        myChart_pie.setOption(option_pie);
    },
    error: function(xhr, type, errorThrown) {}
})

  2. 词云图：利用 national_network 表中的城市网点数据（city），将每个城市名称作为一个词语绘制词云图。虽然未对词语大小做特定要求，但通过合理的布局与颜色搭配，使词云图能够直观反映出螺蛳粉销售网点的城市分布情况。 
    const chartDom_wordcloud = document.getElementById('wordcloud');
const myChart_wordcloud = echarts.init(chartDom_wordcloud);
// 配置项
option_wordcloud = {
    title:{
        text:'城市线下网点词云图',
        left: 'center',          // 标题居中
        textStyle: {             // 标题文字样式
            color: 'white',       // 设置标题颜色为深灰色
            fontSize: 14,        // 设置字体大小（可选）
            fontWeight: 'bold'   // 设置字体加粗（可选）
        }
    },
    series: [
        {
            type: 'wordCloud',
            data: [],
            shape: 'circle',
            sizeRange: [5, 15],
            rotationRange: [-90, 90],
            rotationStep: 45,
            textStyle: {
                fontFamily: 'sans-serif',
                normal: {
                    color: function (params) {
                        return 'rgb(' + [
                            // Math.round(Math.random() * 255),
                            // Math.round(Math.random() * 255),
                            // Math.round(255 - params.value*2.5),
                            Math.round(Math.random() * 255),
                            255,
                            255
                        ].join(',') + ')';
                    }
                }
            },
        }
    ],
};
// ajax获取路由数据
$.ajax({
    url: "/wordcloud",
    success: function (data) {
        option_wordcloud.series[0].data = data
        // 配置项作用到图形中
        myChart_wordcloud.setOption(option_wordcloud);
    },
    error: function (xhr, type, errorThrown) {
    }
})

（四）图形美化

在完成基本图形绘制后，着重对各个图形进行了美化工作。为柱形图、折线图等添加了数据标签，方便用户直接读取数据；隐藏了一些不必要的坐标轴标签，使图形更加简洁；修改了图形的颜色，使其与整体风格相协调；调整了图形坐标轴及其标签的颜色，增强了视觉对比度；为部分图形添加了边框，提升了图形的精致度；同时，还修改了数据大屏的背景图片，营造出更具吸引力的展示氛围。

（五）销量数据更新

编写了相关代码读取 sale_products 表中的数据，准确计算出 “今日销量”（以表中最后一天的所有口味螺蛳粉销量之和为准）和 “累计销量”（表中所有日期所有口味螺蛳粉销量之和）。在 app.py 中创建了路由函数，分别将 “今日销量” 和 “累计销量” 以 json 数据格式发布到路由 /today 和 /total 中。然后，使用 ajax 异步请求方法成功将数据大屏标题下方的黄色数字更新为上述路由中的数值，确保销量数据的实时性与准确性。

# 今日销量
@app.route('/today')
def today_sale():
    today_sale = utils.get_today_data()
    return jsonify(today_sale)

# 累计销量
@app.route('/total')
def total_sale():
    total_sale = utils.get_total_data()
    return jsonify(total_sale)

（六）下拉框功能实现

在地图左上方新增了 “产品类型” 下拉框，包含 “所有” 和 “加辣款” 两个选项，默认选择 “所有”。通过编写 JavaScript 代码实现了下拉框选项切换功能，当选择 “加辣款” 时，地图中的各省份总销量数据能够实时切换为各省份 “加辣款” 销量数据，同时地图颜色切换为 “黄 - 红” 色系；当切换回 “所有” 时，地图数据和颜色也能正确恢复。

、

三、项目成果展示

最终呈现的螺蛳粉销售数据大屏具有以下显著特点：

  1. 布局合理：各图形和数据展示区域划分明确，整体页面布局紧凑且美观，方便用户快速获取关键信息。
  2. 数据准确：无论是柱形图、折线图、地图还是饼图、词云图所展示的数据均准确无误，且 “今日销量” 和 “累计销量” 能够实时更新，保证了数据的时效性。
  3. 交互性强：地图的省份点击交互以及下拉框的数据切换功能，增强了用户与数据大屏的互动性，提升了用户体验。
  4. 图形美观：经过美化后的图形在颜色、样式、标签等方面都有了显著提升，使数据展示更加生动形象，易于理解。

四、项目总结与展望

通过本次螺蛳粉销售数据大屏项目，我们不仅提升了技术能力，更深刻体会到了团队协作在项目开发中的重要性。在项目过程中，虽然遇到了一些数据格式转换、图形样式调整等问题，但通过查阅资料、小组讨论与反复调试，最终都得以顺利解决。

未来，我们希望能够进一步优化数据大屏的性能，例如提高数据加载速度、增加更多的数据分析维度与展示方式等。同时，考虑将该项目应用到实际的商业销售场景中，为螺蛳粉销售企业提供更强大的数据支持与决策依据，助力企业提升销售业绩与市场竞争力。

以上就是我们螺蛳粉销售数据大屏项目的详细总结，通过此次项目的历练，我们积累了宝贵的实践经验，为今后的学习与工作奠定了坚实的基础。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值