数据可视化项目实践：从理论到实战的全方位解析

数据可视化项目实践：从理论到实战的全方位解析

引用

CSDN

1.

https://blog.csdn.net/woqingwenne/article/details/143240521

本文分享了一个完整的销售数据分析可视化项目实践，从项目背景、技术选型到具体实现，详细介绍了如何使用Python、Flask和ECharts等工具和技术，将销售数据转化为直观的可视化图表。通过这个项目，读者可以深入了解数据可视化项目的完整流程，掌握关键的技术实现细节。

一、项目背景与目标

（一）项目背景

在当今数字化时代，企业面临着海量的数据，如何从这些数据中提取有价值的信息成为了关键。我们的项目正是基于这样的背景展开，旨在对一家企业的销售数据进行深入分析和可视化呈现，以便为企业的决策提供有力支持。

（二）项目目标

我们设定了以下几个明确的目标：

1. 建立稳定的数据获取通道，能够准确地从数据库中提取所需的销售数据。
2. 运用合适的工具和技术，对数据进行清洗、处理和转换，确保数据的质量和可用性。
3. 创建多种类型的可视化图表，如柱形图、折线图和地图等，直观地展示销售数据的各个维度，包括不同省份的销量、销售随时间的变化趋势以及销售区域的分布情况。

二、技术选型与准备

（一）数据库连接与操作

为了获取销售数据，我们选择了 MySQL 数据库，并使用 pymysql 库进行连接和操作。以下是一段关键的代码示例，展示了如何建立连接并执行一个简单的查询：

import pymysql

# 连接到MySQL数据库
connection = pymysql.connect(
    host='localhost',
    user='root',
    password='123456',
    database='mysql',
    charset='utf8mb4'
)

try:
    with connection.cursor() as cursor:
        # 执行SQL查询
        sql = "SELECT * FROM user"
        cursor.execute(sql)
        # 获取所有记录列表
        results = cursor.fetchall()
        for row in results:
            print(row)
finally:
    # 关闭数据库连接
    connection.close()

这段代码清晰地展示了连接数据库的基本步骤以及如何获取查询结果。它是整个项目数据获取的基础。

（二）后端开发框架：Flask

在后端开发方面，我们选用了 Flask 框架。Flask 以其简洁、灵活的特性，非常适合小型项目的快速开发。以下是 app.py 文件中的核心代码片段，展示了如何定义路由和处理请求：

from flask import Flask, render_template, request, redirect, jsonify
import pandas as pd
import utils

app = Flask(__name__)

@app.route('/bar')
def bar():
    bar_data = utils.get_province_data()
    df_pro = pd.DataFrame(bar_data, columns=['省份', '总销量'])
    df_pro['总销量'] = (df_pro['总销量'] / 10000).round(2)
    df_pro = df_pro.sort_values(by='总销量', ascending=False).head(10)
    return jsonify(df_pro.to_dict(orient='list'))

@app.route('/line')
def line():
    line_data = utils.get_daily_data()
    df = pd.DataFrame(line_data, columns=['日期', '总销量'])
    df['日期'] = df['日期'].dt.strftime('%m-%d')
    df['总销量'] = (df['总销量'] / 10000).round(0)
    return jsonify(df.to_dict(orient='list'))

@app.route('/map')
def map():
    map_data = utils.get_province_data()
    data_list = []
    for i in map_data:
        data_list.append({'name': i[0], 'value': i[1]})
    return jsonify(data_list)

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

app.config['JSON_AS_ASCII'] = False

if __name__ == '__main__':
    app.run(debug=True)

通过这些路由函数，我们可以方便地获取不同类型的销售数据，并将其以 JSON 格式返回给前端，为可视化图表的绘制提供数据支持。

（三）数据查询工具函数

为了提高代码的可维护性和复用性，我们创建了一系列工具函数，这些函数定义在 utils.py 文件中。以下是一些关键函数的介绍：

get_conn 函数

import pymysql

def get_conn():
    # 建立连接
    conn = pymysql.connect(
        host="localhost",
        port=3306,
        user="root",
        password="123456",
        db="sales_data",
        charset="utf8"
    )
    # 创建游标
    cursor = conn.cursor()
    return conn, cursor

这个函数用于建立与数据库的连接，并返回连接对象和游标对象。

close_conn 函数

def close_conn(conn, cursor):
    if cursor:
        cursor.close()
    if conn:
        conn.close()

该函数用于关闭数据库连接和游标，确保资源的合理释放。

query 函数

def query(sql):
    """
    :param sql: sql查询语句
    :return:一个数据查询结果的元组tuple对象
    """
    conn, cursor = get_conn()
    cursor.execute(sql)
    res = cursor.fetchall()
    close_conn(conn, cursor)
    return res

query 函数用于执行给定的 SQL 查询语句，并返回查询结果。

get_province_data 函数

def get_province_data():
    sql = ''' 
        select
            province, 
            origin+spicy+sauerkraut+tomato+smelly+upgrade as total
        from sale_provinces
    '''
    res = query(sql)
    return res

这个函数用于获取省份相关的销售数据。

get_daily_data 函数

def get_daily_data():
    sql = ''' 
        select
            date, 
            origin+spicy+sauerkraut+tomato+smelly+upgrade as total
        from sale_products
    '''
    res = query(sql)
    return res

get_daily_data 函数用于获取与日期相关的销售数据。

三、可视化图表实现

（一）柱形图：展示各省份销量

在前端，我们使用 echarts 库来绘制柱形图。以下是相关的 JavaScript 代码示例：

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) { }
})

通过这段代码，我们从后端获取省份销量数据，并以直观的柱形图形式展示出来。柱形图的颜色、宽度以及坐标轴的设置都经过精心调整，以提高可视化效果。

（二）折线图：呈现销售随时间的变化趋势

同样，对于折线图，我们也有相应的代码实现。以下是部分关键代码：

var chartDom_line = document.getElementById('line');
var myChart_line = echarts.init(chartDom_line);
// 配置项
var option_line = {
    title: {
        text: '销售随时间变化折线图',
        left: 'center',
        textStyle: {
            color: 'white',
            fontSize: 16,
            fontWeight: 'bold'
        }
    },
    xAxis: {
        type: 'category',
        data: [],
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [],
        type: 'line',
        lineStyle: {
            normal: {
                color: '#FF6600'
            }
        }
    }],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    }
};
// 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) { }
})

通过这些代码，我们能够清晰地看到销售数据在不同时间点上的变化趋势，折线图的颜色和线条样式都有助于突出数据的特点。

（三）地图：展示销售区域分布

对于地图数据的可视化，我们依旧使用 echarts 库。以下是核心代码示例：

var chartDom_map = document.getElementById('map');
var myChart_map = echarts.init(chartDom_map);
// 配置项
var option_map = {
    title: {
        text: '销售区域分布地图',
        left: 'center',
        textStyle: {
            color: 'white',
            fontSize: 16,
            fontWeight: 'bold'
        }
    },
    series: [{
        type: 'map',
        data: [],
        name: '销售区域',
        mapType: 'china',
        label: {
            show: true,
            fontSize: 12,
            color: 'white',
            fontWeight: 'bold'
        },
        itemStyle: {
            borderColor: 'white',
            borderWidth: 1,
            color: 'gray',
            opacity: 0.8
        }
    }],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    }
};
// ajax获取路由数据
$.ajax({
    url: "/map",
    success: (data) => {
        option_map.series[0].data = data
        // 配置项作用到图形中
        myChart_map.setOption(option_map);
    },
    error: (xhr, type, errorThrown) => { }
})

通过这些代码，我们可以直观地看到销售区域在全国范围内的分布情况，地图的颜色、标签以及提示信息都经过优化，以提高可视化效果。

四、项目总结

通过这个项目，我不仅掌握了数据可视化的基本原理和方法，还熟练运用了多种工具和技术，如 pymysql、Flask、echarts 等。在实际操作过程中，我也遇到了一些问题，例如数据库连接错误、数据格式不一致等，但通过不断地调试和学习，我最终成功地完成了项目。这个项目让我深刻体会到数据可视化在实际应用中的重要性，它可以帮助我们更直观地理解数据，从而做出更准确的决策。

图 1 为各省份销量柱形图，从图中可以清晰地看到各省份销量的差异。图 2 为某指标随日期变化折线图，它反映了销售数据随时间的变化趋势。图 3 为销售区域分布地图，展示了销售区域的分布情况。