ECharts入门学习教程，从入门到精通，综合实战——ECharts电商数据可视化完整知识点+案例代码(8）

综合实战------ECharts电商数据可视化完整知识点+案例代码

本项目核心是Python数据预处理 + ECharts前端可视化 全流程实战，覆盖电商销售/客户/产品三大维度可视化，所有知识点、代码、注释完整，可直接复制运行，适配Python 3.x + ECharts 5.x。

一、核心学习目标

掌握Python环境配置、电商数据读取、清洗、格式化预处理。
使用Pandas完成数据筛选、统计、导出（供前端可视化使用）。
独立完成销售数据、客户数据、产品数据三大模块ECharts可视化。
掌握前后端数据对接（JSON数据渲染ECharts）实战方案。

项目分析

一、数据集介绍（电商标准数据集）

电商数据通用字段（本项目使用模拟真实电商数据）：

订单数据：订单ID、订单日期、销售额、利润、支付方式、地区
客户数据：客户ID、客户姓名、会员等级、消费次数、累计消费
产品数据：产品ID、产品类别、单价、销量、库存、好评率

二、需求分析

销售数据：月度销售额趋势、地区销量分布、利润统计
客户数据：会员等级占比、客户消费排行、复购率统计
产品数据：品类销量对比、热销产品TOP10、库存预警

项目准备

一、配置Python环境（知识点+步骤）

1. 知识点：Python数据科学环境

电商数据预处理必须依赖：Python 3.x + Pandas（数据处理核心库）

2. 环境安装命令（CMD/终端执行）

bash 复制代码

# 安装数据处理核心库
pip install pandas
# 安装Excel文件支持（可选，用于读取Excel数据）
pip install openpyxl

二、使用Python预处理数据（核心知识点+完整代码）

知识点1：Pandas读取数据

pd.read_csv()：读取CSV格式电商数据
pd.read_excel()：读取Excel电商数据

知识点2：数据清洗

去除空值：dropna()
去除重复数据：drop_duplicates()
数据类型转换：astype()

知识点3：数据统计与导出

分组统计：groupby()
导出JSON：to_json()（供ECharts使用）

Python数据预处理逐行注释案例

python 复制代码

# ==================== 1. 导入Pandas库 ====================
# pandas是Python数据处理核心库，用于读取、清洗、统计电商数据
import pandas as pd

# ==================== 2. 读取电商原始数据 ====================
# 读取电商订单CSV数据（文件编码utf-8，若中文乱码可改为gbk）
df = pd.read_csv("电商数据.csv", encoding="utf-8")

# 打印前5行数据，查看数据结构（测试用）
print("原始数据前5行：")
print(df.head())

# ==================== 3. 数据清洗 ====================
# ① 删除空值数据（删除包含缺失值的行，保证数据准确性）
df = df.dropna()

# ② 删除重复订单数据（避免数据重复统计）
df = df.drop_duplicates()

# ③ 数据类型转换：将销售额列转为数值型（确保可计算）
df["销售额"] = df["销售额"].astype(float)
# 数据类型转换：将订单日期转为日期格式（用于按月份统计）
df["订单日期"] = pd.to_datetime(df["订单日期"])

# ④ 新增月份列（用于月度销售趋势统计）
df["月份"] = df["订单日期"].dt.month

# ==================== 4. 数据统计分析 ====================
# ① 按月份统计总销售额（销售数据可视化核心）
month_sales = df.groupby("月份")["销售额"].sum().reset_index()

# ② 按地区统计订单数量（地区分布可视化）
area_sales = df.groupby("地区")["订单ID"].count().reset_index()
area_sales.rename(columns={"订单ID": "订单量"}, inplace=True)

# ③ 按产品类别统计销量（产品数据可视化）
product_sales = df.groupby("产品类别")["销量"].sum().reset_index()

# ==================== 5. 导出JSON数据（供ECharts前端使用） ====================
# 导出月度销售数据JSON
month_sales.to_json("month_sales.json", orient="records", force_ascii=False)
# 导出地区销售数据JSON
area_sales.to_json("area_sales.json", orient="records", force_ascii=False)
# 导出产品品类数据JSON
product_sales.to_json("product_sales.json", orient="records", force_ascii=False)

print("数据预处理完成，JSON文件已生成！")

模拟电商数据（`电商数据.csv`）

可直接复制保存为CSV文件运行预处理代码：

csv 复制代码

订单ID,订单日期,地区,产品类别,销售额,销量,客户ID,会员等级
1,2024-01-05,华东,电子产品,1500,2,C001,普通
2,2024-01-10,华南,服装鞋帽,800,5,C002,VIP
3,2024-02-03,华北,电子产品,2200,3,C003,钻石
4,2024-02-15,华东,食品饮料,600,10,C001,普通
5,2024-03-07,华南,服装鞋帽,1200,6,C002,VIP

项目实施（三大可视化模块）

一、可视化销售数据（ECharts + JSON数据）

核心图表

折线图：月度销售额趋势
柱状图：各地区订单量分布
饼图：各品类销售额占比

案例1：月度销售额折线图（带详细注释）

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>销售数据可视化-月度趋势</title>
  <!-- 引入ECharts CDN -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- 引入jQuery简化AJAX读取JSON数据操作 -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <style>
    #main { width: 800px; height: 500px; margin: 20px auto; }
  </style>
</head>
<body>
  <div id="main"></div>

  <script>
    // 1. 初始化ECharts图表实例
    const myChart = echarts.init(document.getElementById('main'));

    // 2. 使用AJAX读取Python生成的JSON数据（前后端对接核心）
    $.getJSON("month_sales.json", function(data) {
      // 定义X轴月份数组
      const months = [];
      // 定义Y轴销售额数组
      const sales = [];

      // 遍历JSON数据，拆分月份和销售额
      for(let i=0; i<data.length; i++){
        months.push(data[i].月份 + "月");
        sales.push(data[i].销售额.toFixed(2));
      }

      // 3. ECharts配置项
      const option = {
        title: { text: '2024电商月度销售额趋势', left: 'center' },
        tooltip: { trigger: 'axis' }, // 提示框
        xAxis: {
          type: 'category',
          data: months // X轴数据：月份
        },
        yAxis: { type: 'value', name: '销售额（元）' },
        series: [{
          name: '月度销售额',
          type: 'line', // 折线图
          data: sales, // Y轴数据：销售额
          smooth: true, // 平滑曲线
          markPoint: { data: [{ type: 'max', name: '最大值' }] }, // 标记最大值
          markLine: { data: [{ type: 'average', name: '平均值' }] } // 标记平均值
        }]
      };

      // 4. 将配置项设置到图表
      myChart.setOption(option);
    });
  </script>
</body>
</html>

二、可视化客户数据

核心图表

饼图：会员等级占比
柱状图：客户消费TOP5
仪表盘：客户复购率

案例2：会员等级占比饼图（南丁格尔玫瑰图）

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>客户数据可视化-会员占比</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    #main { width: 700px; height: 500px; margin: 20px auto; }
  </style>
</head>
<body>
  <div id="main"></div>

  <script>
    const myChart = echarts.init(document.getElementById('main'));

    // 客户会员等级数据（Python预处理后导出）
    const data = [
      { name: '普通会员', value: 120 },
      { name: 'VIP会员', value: 65 },
      { name: '钻石会员', value: 30 }
    ];

    const option = {
      title: { text: '电商客户会员等级占比', left: 'center' },
      tooltip: { trigger: 'item' },
      legend: { orient: 'vertical', left: 'left' },
      series: [{
        name: '会员等级',
        type: 'pie',
        radius: ['20%', '70%'], // 玫瑰图核心配置
        roseType: 'radius', // 开启南丁格尔玫瑰图
        data: data,
        label: {
          show: true,
          formatter: '{b}: {c}人 ({d}%)' // 标签格式：名称+数量+占比
        }
      }]
    };

    myChart.setOption(option);
  </script>
</body>
</html>

三、可视化产品数据

核心图表

柱状图：产品品类销量对比
条形图：热销产品TOP10
雷达图：产品综合评价

案例3：产品品类销量对比柱状图

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>产品数据可视化-品类销量</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    #main { width: 800px; height: 500px; margin: 20px auto; }
  </style>
</head>
<body>
  <div id="main"></div>

  <script>
    const myChart = echarts.init(document.getElementById('main'));

    // 产品品类数据
    const categories = ['电子产品', '服装鞋帽', '食品饮料', '家居用品', '美妆护肤'];
    const sales = [520, 380, 750, 290, 410];

    const option = {
      title: { text: '电商产品品类销量统计', left: 'center' },
      tooltip: { trigger: 'axis' },
      xAxis: {
        type: 'category',
        data: categories,
        axisLabel: { rotate: 15 } // X轴文字旋转15度避免重叠
      },
      yAxis: { type: 'value', name: '销量（件）' },
      series: [{
        name: '品类销量',
        type: 'bar', // 柱状图
        data: sales,
        itemStyle: {
          // 柱状图渐变颜色美化
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4fc3f7' },
            { offset: 1, color: '#0288d1' }
          ])
        }
      }]
    };

    myChart.setOption(option);
  </script>
</body>
</html>

项目评价标准（完整评分表）

评价维度	满分	评分标准
Python环境配置	10	成功安装Python + Pandas，无环境报错
数据预处理	20	完成数据读取、去重、去空、格式转换、统计、导出JSON
销售数据可视化	20	折线/柱状/饼图正常渲染，数据展示准确，交互正常
客户数据可视化	20	会员占比、消费排行图表美观，数据对接无误
产品数据可视化	20	品类销量、热销TOP图渲染正常
代码规范注释	10	代码注释详细，格式规范，可直接运行

全项目核心知识点总结

Python预处理 ：Pandas读取/清洗/统计/导出JSON，是电商数据可视化基础。
前后端对接：AJAX读取JSON数据，动态渲染ECharts图表。
销售可视化：折线图（趋势）、柱状图（分布）、饼图（占比）。
客户可视化：玫瑰图（会员占比）、柱状图（消费排行）。
产品可视化：柱状图（品类销量）、条形图（热销TOP）。
全流程：数据 → 清洗 → 统计 → 可视化 → 交互展示。

ECharts入门学习教程，从入门到精通，综合实战——ECharts电商数据可视化完整知识点+案例代码(8）

综合实战------ECharts电商数据可视化完整知识点+案例代码

一、核心学习目标

项目分析

一、数据集介绍（电商标准数据集）

二、需求分析

项目准备

一、配置Python环境（知识点+步骤）

1. 知识点：Python数据科学环境

2. 环境安装命令（CMD/终端执行）

二、使用Python预处理数据（核心知识点+完整代码）

知识点1：Pandas读取数据

知识点2：数据清洗

知识点3：数据统计与导出

Python数据预处理 逐行注释案例

模拟电商数据（电商数据.csv）

项目实施（三大可视化模块）

一、可视化销售数据（ECharts + JSON数据）

核心图表

案例1：月度销售额折线图（带详细注释）

二、可视化客户数据

核心图表

案例2：会员等级占比饼图（南丁格尔玫瑰图）

三、可视化产品数据

核心图表

案例3：产品品类销量对比柱状图

项目评价标准（完整评分表）

全项目核心知识点总结

Python数据预处理逐行注释案例

模拟电商数据（`电商数据.csv`）