15. 快速用Vega实现数据可视化

引言

在数字化时代，数据已成为商业决策的重要基石，尤其在电商行业，数据分析的价值愈加显著。无论是产品的销量、价格、评价还是用户的购物行为，这些数据都能为商家提供精准的市场洞察，帮助他们制定更加科学的营销策略。在众多数据分析方法中，数据可视化作为一种直观、高效的方式，越来越多地被电商平台采纳，用以展示销售趋势、价格波动、消费者偏好等关键信息。

Vega-Lite作为一款高效的数据可视化工具，能够帮助商家轻松通过人工智能创建专业的图表，使得复杂的数据变得直观易懂。通过Vega-Lite，商家不仅能迅速掌握市场动态，还能洞察潜在的销售机会。通过这篇文章，我们将深入探索如何利用Vega-Lite在电商数据分析中的应用，特别是如何处理和可视化来自淘宝等电商平台的销售数据。

在本文中，我们将以“牛仔裤”类目为例，展示如何将淘宝平台的商品数据转化为可视化图表。我们将从数据准备、数据编码、数据聚合、图表自定义等方面进行深入分析。最终，我们将学习如何通过Vega-Lite将这些图表嵌入到网页中，使其能被更广泛的受众所查看。无论是电商平台的运营人员、数据分析师，还是商家老板，都可以从中获得有价值的洞察和实际操作的指导。

本篇文章将重点介绍五个核心部分：数据准备、数据编码、数据转化与聚合、图表定制以及人工智能提示词。每一章都会结合实际的淘宝电商数据，带领大家一步步掌握如何使用Vega-Lite进行电商数据可视化，帮助大家不仅提高数据分析能力，也能为自己的电商业务注入更具洞察力的决策支持。

第一章：数据准备

数据可视化的第一步是数据的准备和处理。无论是进行市场分析、用户行为研究，还是对销量数据进行趋势预测，数据的质量和准确性都至关重要。在电商行业，数据源来自各个方面，诸如产品的价格、销量、评价数量、品牌信息、商品标题等，都构成了一个庞大且复杂的数据体系。为了帮助商家更好地进行销售分析，我们需要先清理、整理这些数据，并将其转化为适合可视化分析的格式。

数据源

假设我们收集的数据来自淘宝电商平台的“牛仔裤”类目。通过电商记插件或淘宝API，我们可以获取到关于每款牛仔裤的详细信息，包括商品标题、价格、销量、品牌等。为了简化分析，本文选取了五款不同品牌的牛仔裤作为样本数据，以下是数据的原始展示：

商品标题	价格	月销量	品牌
高腰牛仔裤女2025春季新品	199元	5012	LEE
男士修身牛仔裤经典款	149元	8023	Levi's
直筒牛仔裤男秋冬款	299元	3011	Wrangler
女士牛仔裤修身显瘦 2025款	239元	6034	GAP
经典蓝色牛仔裤男士	180元	7015	Uniqlo

这些数据涵盖了商品的价格、销量和品牌信息。在实际电商平台的运营中，类似的数据源是常见的，商家可以通过这些数据来判断不同品牌和价格区间的牛仔裤产品在市场上的受欢迎程度。

数据的JSON表示

在Vega-Lite中，数据是通过JSON格式进行处理的，采用人工智能可以从标题中提取出“适用人群”这一属性（参看前文第10篇）。为了将上述数据转换为适合Vega-Lite绘图的格式，我们需要将这些数据嵌入到一个JSON数组中，每个商品作为数组的一个对象。以下是转换后的JSON格式：

[
    {"商品标题": "高腰牛仔裤女2025春季新品", "价格": 199, "月销量": 5012, "品牌": "LEE", "适用人群": "女士"},
    {"商品标题": "男士修身牛仔裤 经典款", "价格": 149, "月销量": 8023, "品牌": "Levi's", "适用人群": "男士"},
    {"商品标题": "直筒牛仔裤男秋冬款", "价格": 299, "月销量": 3011, "品牌": "Wrangler", "适用人群": "男士"},
    {"商品标题": "女士牛仔裤修身显瘦 2025款", "价格": 239, "月销量": 6034, "品牌": "GAP", "适用人群": "女士"},
    {"商品标题": "经典蓝色牛仔裤男士", "价格": 180, "月销量": 7015, "品牌": "Uniqlo", "适用人群": "男士"}
]

在这个JSON数组中，我们将商品的标题、价格、月销量、品牌信息、适用人群作为每个对象的属性，并且使用中文的键名（如“商品标题”，“价格”，“月销量”，“品牌”）。这使得数据结构更符合中文环境下的使用习惯，便于后续的数据处理和分析。

数据的意义与应用

这些数据所展示的每个字段都有着独特的意义。在电商数据分析中，销量是最直接的表现指标，而商品标题则能够反映出产品的市场定位和消费者的购买偏好。品牌作为一个关键因素，不仅影响产品的定价和市场需求，还可能与消费者的品牌忠诚度相关联。

例如，假设我们发现“Levi's”品牌的男士修身牛仔裤销量远高于其他品牌，那么商家可以通过加大该品牌的广告投放，或推出促销活动来进一步提升销量。另外，价格和销量之间的关系也很值得注意：价格较低的产品是否能够吸引更多消费者？或者，高价位的产品是否能够实现更高的利润？这些问题都可以通过数据的可视化分析来帮助商家找到答案。

在下一章中，我们将探讨如何将这些数据通过Vega-Lite进行编码，使其以图表的形式呈现。通过这种方式，我们可以更加直观地看到销量与价格、品牌等因素之间的关系，进而为商家提供有效的商业决策支持。

第二章：数据编码与图表创建

在数据准备好之后，接下来的步骤是通过Vega-Lite对数据进行编码并创建图表。数据编码是将数据字段映射到视觉元素的过程，这包括定义数据如何映射到位置、颜色、形状、大小等视觉属性。通过这种方式，我们能够将数据转化为直观的图表，帮助我们从中提取有价值的见解。

在本章中，我们将在电商记交互式文档中进行探索，基于第一章中准备好的数据，使用Vega-Lite框架进行编码，创建一个直观的柱状图来展示不同牛仔裤品牌的销量情况。为了更好地展示这一过程，我们将使用JavaScript代码来实现这一操作，并通过vegaEmbed函数将图表显示在网页上。

visualization%20%288%29

1. 数据映射与图表类型

在Vega-Lite中，数据映射的基本单位是“mark”，即“标记”。Vega-Lite支持多种类型的标记，最常用的包括：

点标记（point）：用于散点图等图表。
条形标记（bar）：用于条形图、柱状图等图表。
线条标记（line）：用于折线图等图表。

根据我们的需求，我们将使用柱状图（bar）来展示不同品牌牛仔裤的销量。每个柱状图的高度表示销量，X轴显示品牌，Y轴显示销量。

2. 使用Vega-Lite JSON编码数据

首先，我们需要将第一章中的数据传递给Vega-Lite进行处理。在实际应用中，数据可能来自Python脚本处理后生成的JSON格式。我们将使用JavaScript获取这个数据，并通过vegaEmbed函数将数据渲染成图表。

以下是JSON编码数据的示例：

{
  "data": {
    "values": [...]  // 使用传递过来的数据
  },
  "mark": "bar",  // 设置图表类型为柱状图
  "encoding": {
    "x": {
      "field": "品牌",  // X轴为品牌字段
      "type": "nominal",  // 品牌为类别型数据
      "title": "品牌"  // X轴标题为“品牌”
    },
    "y": {
      "field": "月销量",  // Y轴为销量字段
      "type": "quantitative",  // 销量为定量数据
      "title": "月销量"  // Y轴标题为“月销量”
    },
    "color": {
      "field": "品牌",  // 通过品牌来映射颜色
      "type": "nominal",  // 品牌为类别型数据
      "title": "品牌"  // 显示品牌的颜色映射
    },
    "tooltip": [
      {"field": "品牌", "type": "nominal", "title": "品牌"},  // 鼠标悬停时显示品牌
      {"field": "月销量", "type": "quantitative", "title": "月销量"}  // 显示月销量
    ]
  }
});

3. 代码解析

图表类型：我们选择使用柱状图（bar）来展示不同品牌的销量情况。柱状图非常适合展示类别型数据和数值型数据之间的关系。在本例中，X轴表示品牌，Y轴表示月销量。
数据编码：
- X轴：我们将“品牌”字段映射到X轴，并将其指定为类别型数据（nominal）。
- Y轴：我们将“月销量”字段映射到Y轴，指定为定量数据（quantitative）。这意味着销量是一个数值，可以用柱状图的高度来表示。
- 颜色映射：为了通过颜色区分不同品牌，我们将“品牌”字段映射到颜色通道。这意味着每个品牌的柱子将具有不同的颜色，有助于视觉上区分它们。
提示框（Tooltip）：我们为每个柱状图添加了提示框，当用户将鼠标悬停在柱子上时，会显示品牌和月销量的相关信息。

4. 图表自定义与展示

接下来，我们将展示如何在电商记交互式文档中，使用Vega-Lite创建和展示图表。通过Python单元格传递数据、HTML单元格展示图表容器，最后使用JavaScript单元格进行数据渲染，我们能够灵活地在交互式文档中展示电商数据的可视化结果。

Screenshot%20from%202025-03-11%2009-04-20

单元格1：准备数据并传递给JavaScript

在电商记文档的第一个单元格中，我们首先准备原始数据，并将其转换为JSON格式，以便通过JavaScript进行处理。假设我们使用Python来处理和清洗数据，生成类似第一章中的牛仔裤销量数据。通过js.window.records=json.dumps(data)，我们将Python中的数据传递给JavaScript。

import json
import js

# 示例数据（来自第一章的数据）
data = [
    {"商品标题": "高腰牛仔裤女2025春季新品", "价格": 199, "月销量": 5012, "品牌": "LEE"},
    {"商品标题": "男士修身牛仔裤 经典款", "价格": 149, "月销量": 8023, "品牌": "Levi's"},
    {"商品标题": "直筒牛仔裤男秋冬款", "价格": 299, "月销量": 3011, "品牌": "Wrangler"},
    {"商品标题": "女士牛仔裤修身显瘦 2025款", "价格": 239, "月销量": 6034, "品牌": "GAP"},
    {"商品标题": "经典蓝色牛仔裤男士", "价格": 180, "月销量": 7015, "品牌": "Uniqlo"}
]

# 将数据转换为JSON格式并传递给JavaScript
js.window.records = json.dumps(data)

在这个单元格中，我们使用Python的json.dumps()方法将数据转换为JSON格式，并通过js.window.records将数据传递给JavaScript。此时，window.records将成为JavaScript中访问数据的变量。

单元格2：展示图表的容器

在电商记交互式文档的第二个单元格中，我们只需要创建一个空的<div>元素来容纳Vega-Lite生成的图表。该<div>元素的id为“vis”，后续我们将在JavaScript中引用这个id来将图表渲染进去。

<div id="vis"></div>  <!-- 图表显示区域 -->

<div id="vis"></div>是一个空的HTML容器，用于展示图表。Vega-Lite会将生成的柱状图渲染到这个div中。

单元格3：使用JavaScript渲染图表

在第三个单元格中，我们编写JavaScript代码来将数据传递给Vega-Lite，并生成可视化图表。通过vegaEmbed函数，我们可以在前述<div id="vis"></div>中展示图表。

import "https://juguandian.com/vega5.min.js";
import "https://juguandian.com/vegalite5.min.js";
import "https://juguandian.com/vega-embed.min.js";

// 获取Python传递过来的JSON数据
const data = JSON.parse(window.records);  // window.records包含Python传递的数据

// 创建Vega-Lite图表配置
const chart = vegaEmbed('#vis', {
  "data": {
    "values": data  // 使用传递过来的数据
  },
  "mark": "bar",  // 设置图表类型为柱状图
  "encoding": {
    "x": {
      "field": "品牌",  // X轴为品牌字段
      "type": "nominal",  // 品牌为类别型数据
      "title": "品牌"  // X轴标题为“品牌”
    },
    "y": {
      "field": "月销量",  // Y轴为销量字段
      "type": "quantitative",  // 销量为定量数据
      "title": "月销量"  // Y轴标题为“月销量”
    },
    "color": {
      "field": "品牌",  // 通过品牌来映射颜色
      "type": "nominal",  // 品牌为类别型数据
      "title": "品牌"  // 显示品牌的颜色映射
    },
    "tooltip": [
      {"field": "品牌", "type": "nominal", "title": "品牌"},  // 鼠标悬停时显示品牌
      {"field": "月销量", "type": "quantitative", "title": "月销量"}  // 显示月销量
    ]
  }
});

代码解析：

数据获取：我们通过window.records获取数据。window.records是一个JSON格式的字符串，包含了从第一章中准备好的牛仔裤销量数据。在实际应用中，数据可能会通过Python脚本进行处理并传递到前端页面。通过JSON.parse()方法，我们将其转换为JavaScript可以使用的对象格式。
图表配置：我们使用Vega-Lite的vegaEmbed函数生成柱状图。x通道映射到“品牌”，y通道映射到“月销量”，颜色通过品牌字段进行区分。
显示与交互：tooltip功能允许用户在鼠标悬停在柱状图上时查看品牌和销量信息。

4. 在交互式文档中查看图表

通过上述三个单元格，电商记交互式文档将展示一个直观的柱状图，图表展示了不同品牌的牛仔裤月销量。用户可以通过交互查看不同品牌的销量数据，并且鼠标悬停时会显示更多的细节信息。

visualization%20%288%29

总结

本章介绍了如何在电商记交互式文档中，利用Python、HTML和JavaScript三个单元格来创建和展示Vega-Lite图表。通过这种交互式的方式，商家可以灵活地在电商记平台上展示自己的数据，并结合Vega-Lite提供的强大可视化功能，轻松地将电商平台的销量数据转化为可视化图表，为决策提供有力支持。

第三章：数据转化与聚合

在数据分析中，聚合是对数据进行总结和计算的常见方法。聚合操作帮助我们从大数据中提取出有意义的统计数据，例如计算每个类别的总销量、平均销量等。Vega-Lite支持多种聚合方式，帮助我们对数据进行汇总。聚合操作可以与不同类型的图表结合使用，帮助我们以可视化的方式理解数据的整体趋势和模式。

在本章中，我们将使用Vega-Lite对电商数据进行聚合操作，并展示如何在适用人群这一维度上进行聚合。我们将通过多个步骤演示如何从散点图到柱状图的转变，帮助大家理解数据的汇总和可视化过程。

1. 初始数据

我们依然使用第二章中的电商数据，包含了不同品牌、适用人群、价格和销量信息。我们将根据适用人群进行聚合，计算每个人群的总销量。以下是数据样本：

[
  {"商品标题": "高腰牛仔裤女2025春季新品", "价格": 199, "月销量": 5012, "品牌": "LEE", "适用人群": "女士"},
  {"商品标题": "男士修身牛仔裤 经典款", "价格": 149, "月销量": 8023, "品牌": "Levi's", "适用人群": "男士"},
  {"商品标题": "直筒牛仔裤男秋冬款", "价格": 299, "月销量": 3011, "品牌": "Wrangler", "适用人群": "男士"},
  {"商品标题": "女士牛仔裤修身显瘦 2025款", "价格": 239, "月销量": 6034, "品牌": "GAP", "适用人群": "女士"},
  {"商品标题": "经典蓝色牛仔裤男士", "价格": 180, "月销量": 7015, "品牌": "Uniqlo", "适用人群": "男士"}
]

我们将首先展示如何在适用人群上对月销量进行聚合操作。

2. 初步的散点图

聚合通常是按类别汇总数据。我们先用散点图展示每个商品的销量与适用人群之间的关系。在此步骤中，我们不会进行聚合操作，而是展示每个商品的销量分布。

以下是展示初步散点图的Vega-Lite配置：

const spec = {
  "data": {
    "values": data
  },
  "mark": "point",  // 使用散点图
  "encoding": {
    "x": {
      "field": "适用人群",
      "type": "nominal",
      "title": "适用人群"
    },
    "y": {
      "field": "月销量",
      "type": "quantitative",
      "title": "月销量"
    },
    "color": {
      "field": "适用人群",
      "type": "nominal",
      "title": "适用人群"
    },
    "tooltip": [
      {"field": "商品标题", "type": "nominal", "title": "商品"},
      {"field": "月销量", "type": "quantitative", "title": "销量"}
    ]
  }
};

在这个散点图中：

X轴表示“适用人群”（男士或女士）。
Y轴表示“月销量”，显示每个商品的销量。
颜色根据“适用人群”来区分，分别用不同颜色表示男士和女士。

这个散点图展示了每个商品的销量与适用人群之间的关系，但并没有进行聚合。接下来，我们将对销量进行聚合，并通过条形图来展示结果。

visualization%20%287%29

3. 聚合操作：按适用人群求和

现在，我们在适用人群维度上进行聚合操作。我们将计算每个人群的总销量，并将结果通过柱状图展示。

以下是进行聚合操作的Vega-Lite配置：

const spec = {
  "data": {
    "values": data
  },
  "mark": "bar",  // 使用柱状图
  "encoding": {
    "x": {
      "field": "适用人群",
      "type": "nominal",
      "title": "适用人群"
    },
    "y": {
      "aggregate": "sum",  // 对月销量进行求和
      "field": "月销量",
      "type": "quantitative",
      "title": "总销量"
    },
    "color": {
      "field": "适用人群",
      "type": "nominal",
      "title": "适用人群"
    },
    "tooltip": [
      {"field": "适用人群", "type": "nominal", "title": "适用人群"},
      {"field": "月销量", "type": "quantitative", "title": "总销量"}
    ]
  }
};

在这个聚合操作中：

X轴仍然表示“适用人群”，但现在展示的是每个人群的总销量，而不是单个商品的销量。
Y轴表示按适用人群汇总后的“总销量”，通过aggregate: "sum"对每个人群的销量进行求和。

通过这种方式，我们能够看到每个适用人群（男士和女士）的牛仔裤总销量，从而得出哪些人群的牛仔裤销售更好。

visualization%20%289%29

4. 修改为横向柱状图

最后，我们将散点图和柱状图的配置调整为横向柱状图，通过交换X轴和Y轴来展示每个适用人群的总销量。

以下是修改后的Vega-Lite配置：

const spec = {
  "data": {
    "values": data
  },
  "mark": "bar",  // 使用横向柱状图
  "encoding": {
    "y": {
      "field": "适用人群",
      "type": "nominal",
      "title": "适用人群"
    },
    "x": {
      "aggregate": "sum",  // 对月销量进行求和
      "field": "月销量",
      "type": "quantitative",
      "title": "总销量"
    },
    "color": {
      "field": "适用人群",
      "type": "nominal",
      "title": "适用人群"
    },
    "tooltip": [
      {"field": "适用人群", "type": "nominal", "title": "适用人群"},
      {"field": "月销量", "type": "quantitative", "title": "总销量"}
    ]
  }
};

在这个配置中：

Y轴表示“适用人群”。
X轴表示按适用人群汇总后的“总销量”，并使用aggregate: "sum"对销量进行求和。

通过这种方式，我们得到一个横向的柱状图，展示了不同适用人群的牛仔裤销量。

visualization%20%2810%29

5. 总结

本章展示了如何使用Vega-Lite对电商数据进行聚合，并通过不同的图表展示结果。我们从散点图开始，演示了如何展示每个商品的销量与适用人群的关系，然后通过柱状图展示了按适用人群聚合后的总销量。最后，我们还演示了如何将柱状图转为横向柱状图，帮助我们更好地理解不同适用人群的销量差异。

第四章：图表定制

在数据可视化中，图表的定制不仅仅是关于数据的展现，还包括图表外观和交互的优化。Vega-Lite为我们提供了强大的功能，使得定制变得更加灵活和简便。在本章中，我们将以第三章中介绍的横向条形图为基础，进一步探索如何定制Vega-Lite图表的各个方面。我们将学习如何调整轴标题、颜色方案、添加标签、格式化数值，以及设置图表的外观样式，使其更加符合实际需求。

1. 修改轴标题和标签

Vega-Lite默认会为X轴和Y轴自动生成标题，但有时我们可能希望根据实际需求修改轴标题或调整轴的标签内容。在第三章的横向条形图示例中，我们的Y轴表示“适用人群”，X轴显示的是“总销量”。现在我们将学习如何修改X轴和Y轴的标题以及标签，以便更好地描述图表的含义。

例如，我们可以将X轴标题从“总销量”修改为“销量总和”，并调整Y轴标题。

下面是修改后的Vega-Lite配置：

const spec = {
  "data": {
    "values": data
  },
  "mark": "bar",  // 横向柱状图
  "encoding": {
    "y": {
      "field": "适用人群",  // 显示适用人群
      "type": "nominal",
      "title": "人群定位"  // 修改Y轴标题
    },
    "x": {
      "aggregate": "sum",  // 聚合总销量
      "field": "月销量",  // 以月销量为字段
      "type": "quantitative",
      "title": "销量总和"  // 修改X轴标题
    },
    "color": {
      "field": "适用人群",
      "type": "nominal",
      "title": "人群定位"
    },
    "tooltip": [
      {"field": "适用人群", "type": "nominal", "title": "适用人群"},
      {"field": "月销量", "type": "quantitative", "title": "销量总和（件）"}
    ]
  }
}

在这个配置中：

X轴标题被修改为“销量总和”，以更准确地反映数据的意义。
Y轴标题被修改为“人群定位”，进一步描述了该维度的内容。
Tooltip中显示了每个品牌的总销量（件数）和适用人群的详细信息。

visualization%20%2811%29

2. 调整颜色方案

颜色在数据可视化中起着至关重要的作用，不仅能帮助区分不同类别，还能提高图表的可读性。在本例中，我们使用了“适用人群”来映射颜色，但默认的颜色方案可能不符合实际需求。我们可以选择一个定制的颜色方案，使得图表更加美观和清晰。

Vega-Lite提供了多种颜色方案，我们可以通过设置color属性的scale来选择颜色。例如，可以使用"range": ["#1f77b4", "#ff7f0e"]来设置颜色为蓝色和橙色。

修改后的配置如下：

{
  "data": {
    "values": data
  },
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "适用人群",
      "type": "nominal",
      "title": "人群定位"
    },
    "x": {
      "aggregate": "sum",
      "field": "月销量",
      "type": "quantitative",
      "title": "销量总和"
    },
    "color": {
      "field": "适用人群",
      "type": "nominal",
      "title": "人群定位",
      "scale": {
        "range": ["#ff7f0e", "#1f77b4"]  // 设置颜色为橙色和蓝色
      }
    },
    "tooltip": [
      {"field": "适用人群", "type": "nominal", "title": "人群定位"},
      {"field": "月销量", "type": "quantitative", "title": "销量总和"}
    ]
  }
}

在这个配置中：

通过"scale": {"range": ["#ff7f0e","#1f77b4"]}，我们为“适用人群”字段定义了一个自定义的颜色范围：蓝色代表男士，橙色代表女士。

visualization%20%2812%29

3. 格式化数值

有时候，我们希望对数据进行格式化，例如将销量数值显示为带有千分位的格式，或者在数值后添加单位。在Vega-Lite中，可以通过format属性来格式化数值。

在这个例子中，我们希望将销量数值格式化为带有千位分隔符的形式。我们可以通过format属性设置格式：

{
  "data": {
    "values": data
  },
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "适用人群",
      "type": "nominal",
      "title": "适用人群"
    },
    "x": {
      "aggregate": "sum",
      "field": "月销量",
      "type": "quantitative",
      "title": "总销量",
      "axis": {
        "format": ",.0f",  // 格式化为千位分隔符
        "labelExpr": "datum.label + ' 件'" // 在每个标签后加上单位      
      }
    },
    "color": {
      "field": "适用人群",
      "type": "nominal",
      "title": "适用人群",
      "scale": {
        "range": ["#1f77b4", "#ff7f0e"]
      }
    },
    "tooltip": [
      {"field": "适用人群", "type": "nominal", "title": "适用人群"},
      {"field": "月销量", "type": "quantitative", "title": "总销量"}
    ]
  }
}

在这个配置中：

使用"axis": {"format": ",.0f"}来格式化X轴上的数值，将其显示为千位分隔符（例如：5,012）。
labelExpr用于修改轴上的标签，在原始的数值（通过datum.label访问）后面追加了一个字符串"单位"作为单位标识。

4. 总结

本章介绍了如何通过Vega-Lite定制电商数据可视化图表。我们修改了图表的轴标题、调整了颜色方案、格式化了数值，并且展示了如何添加标签和定制轴的格式。这些定制选项将帮助我们提高图表的可读性和美观性，使其更好地传达数据背后的信息。通过这些定制功能，我们能够将数据转化为既直观又易于理解的图表，为电商分析提供强有力的支持。

第五章：使用人工智能生成Vega-Lite图表

在数据分析中，图表生成是非常重要的一环，它不仅帮助我们理解数据，还能更好地展示给决策者、团队成员或公众。手动编写Vega-Lite配置文件进行图表生成需要时间和技术技能，但随着人工智能技术的发展，我们可以利用AI快速生成所需的图表配置。

本章将教会你如何利用人工智能模型（如DeepSeek、ChatGPT）来自动生成Vega-Lite图表配置。你将学习如何通过简单的提示词，引导AI生成符合需求的Vega-Lite配置。这种方法不仅能提高效率，还能帮助那些不熟悉Vega-Lite或编程的用户快速上手。

1. AI生成图表的基本流程

使用人工智能生成Vega-Lite图表的基本流程包括三个步骤：

定义需求：确定你希望展示的数据、图表类型以及定制要求（例如聚合、排序、颜色方案等）。
编写提示词：基于需求，编写简洁明了的提示词，告诉AI你希望生成什么样的Vega-Lite图表。
生成配置：AI将根据提示词生成相应的Vega-Lite配置（通常是JSON格式），然后你可以将这个配置应用到Vega-Lite中生成图表。

2. 如何编写提示词

AI生成Vega-Lite配置的关键在于编写清晰准确的提示词。提示词越具体，AI生成的结果就越接近你的需求。以下是一些常见的图表生成需求及对应的提示词：

2.1 数据准备

需求：展示一个包含商品标题、价格、月销量、品牌、适用人群的电商数据集。

提示词： “请生成一个Vega-Lite JSON配置，数据来自淘宝电商平台，包含以下字段：商品标题、价格、月销量、品牌、适用人群。数据包括5条记录，分别展示男士和女士牛仔裤的销量数据。数据格式要求为JSON格式，包含字段‘商品标题’，‘价格’，‘月销量’，‘品牌’和‘适用人群’。”

2.2 数据编码与图表创建

需求：展示按品牌聚合的牛仔裤销量数据，使用柱状图显示品牌与销量的关系。

提示词： “请生成一个Vega-Lite JSON配置，展示牛仔裤销量数据的柱状图。X轴为‘品牌’，Y轴为‘月销量’，数据需要按品牌进行编码，颜色区分不同品牌的销量。配置中需要包含的数据字段为‘商品标题’，‘价格’，‘月销量’，‘品牌’和‘适用人群’。图表应使用柱状图（bar），并显示品牌和销量的提示框（tooltip）。”

2.3 数据转化与聚合

需求：展示按适用人群聚合的总销量数据，并使用柱状图进行可视化。

提示词： “请生成一个Vega-Lite JSON配置，展示按‘适用人群’聚合后的牛仔裤销量数据。请将数据按‘适用人群’聚合并计算‘月销量’的总和，使用柱状图（bar）展示。X轴为‘适用人群’，Y轴为‘总销量’。数据源包括‘商品标题’，‘价格’，‘月销量’，‘品牌’和‘适用人群’。此外，图表应显示适用人群和总销量的提示框（tooltip）。"

2.4 图表定制

需求：自定义柱状图的轴标题、颜色方案和格式。

提示词： “请生成一个Vega-Lite JSON配置，展示按‘适用人群’聚合的总销量柱状图，要求进行以下定制：修改X轴标题为‘总销量’，修改Y轴标题为‘适用人群’，调整颜色方案以区分‘男士’和‘女士’。X轴显示‘总销量’，Y轴显示‘适用人群’，并且每个柱子的颜色要根据‘适用人群’进行定制。设置千位分隔符格式化销量数字，并添加提示框（tooltip）显示每个适用人群的总销量。”

2.5 数据转化与过滤

需求：展示价格在200元到300元区间的牛仔裤销量数据。

提示词： “请生成一个Vega-Lite JSON配置，展示在特定价格范围内的牛仔裤销量数据。数据应根据价格过滤，只显示价格在‘200元到300元’区间的产品。X轴为‘品牌’，Y轴为‘月销量’，图表应使用柱状图，并且只显示价格在指定区间的产品。配置应包含字段‘商品标题’，‘价格’，‘月销量’，‘品牌’和‘适用人群’。”

2.6 交互式可视化

需求：展示交互式图表，当用户悬停时显示详细信息。

提示词： “请生成一个Vega-Lite JSON配置，展示一个交互式可视化图表。X轴为‘品牌’，Y轴为‘月销量’，图表类型为柱状图（bar）。当用户悬停在某个品牌上时，图表应该显示该品牌的详细信息，包括‘商品标题’，‘月销量’，‘价格’和‘适用人群’。图表应支持交互功能，用户可以点击一个品牌并筛选该品牌的相关数据。”

2.7 多视图展示

需求：展示两个视图的组合，一个是柱状图，另一个是散点图。

提示词： “请生成一个Vega-Lite JSON配置，展示两个视图的组合：一个柱状图展示按‘品牌’聚合的销量，另一个散点图展示每个商品的价格与销量之间的关系。柱状图的X轴为‘品牌’，Y轴为‘月销量’；散点图的X轴为‘价格’，Y轴为‘月销量’。两个视图应并排显示，用户可以通过交互选择不同的视图。”

3. 使用AI生成图表的优势

通过向AI提供清晰的需求描述，我们可以迅速得到Vega-Lite的JSON配置文件，而不需要手动编写复杂的代码。AI模型能够：

自动生成符合需求的Vega-Lite配置。
为用户提供灵活的图表定制选项。
使非技术背景的用户也能快速上手数据可视化。

4. 生成和应用图表配置

一旦AI生成了相应的Vega-Lite JSON配置，用户只需要将其粘贴到合适的工具中（如电商记的交互式文档等），即可立即生成图表。通过这种方式，用户可以快速实现复杂的数据可视化，而不需要深入了解Vega-Lite的语法和配置细节。

5. 总结

在本章中，我们展示了如何利用人工智能（如DeepSeek, ChatGPT）生成Vega-Lite图表配置。通过简洁明了的提示词，用户可以轻松生成所需的图表，定制图表的各种属性，并根据不同的数据需求快速调整和优化可视化效果。这种方法不仅提升了效率，也降低了学习门槛，让更多人能够快速使用Vega-Lite进行数据可视化。

💻交互式文档 💬向助教提问 🧺采集数据