课程 12：ECharts 前端数据可视化

1. ECharts 简介

Apache ECharts 是一个免费、功能强大且高度灵活的开源 JavaScript 库，用于为 Web 创建直观、交互式且高度可定制的图表和数据可视化。

什么是 ECharts？

它最初由百度开发，现在是 Apache 顶级项目。
它提供了广泛的图表类型和组件，使其适用于各种数据可视化需求，从简单图表到复杂仪表板。

ECharts 的主要特性：

声明式框架：您将图表选项定义为 JavaScript 对象，ECharts 负责渲染。
丰富的图表类型：支持常见的图表，如条形图、折线图、饼图、散点图，以及更复杂的图表，如树图、关系图、热力图、地理地图和 3D 图表。
交互性：提供内置的交互功能，如工具提示、数据缩放（数据漫游）、筛选、动态数据更新和响应式设计。
可定制性：图表几乎每个元素的外观和行为都高度可定制。
大数据集支持：针对处理大型数据集进行了优化，具有良好的性能。

在 HTML 页面中引入 ECharts

引入 ECharts 最简单的方法是使用内容分发网络 (CDN)。将以下脚本标签添加到 HTML 页面的 <head> 或结束 </body> 标签之前：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>

（为演示目的，此 CDN 链接已包含在本页的 <head> 中。）

2. ECharts 基本用法：一个简单的条形图

让我们用静态数据创建一个非常简单的条形图来理解核心步骤。

核心步骤：

准备一个 DOM 容器：在 HTML 中创建一个具有唯一 id 的 <div> 元素，并指定其宽度和高度。
初始化 ECharts 实例：使用 echarts.init() 在准备好的 DOM 容器上初始化一个 ECharts 实例。
定义图表配置 (选项对象)：创建一个 JavaScript 对象来定义图表的外观和数据。关键属性包括：
- title：图表标题。
- tooltip：悬停时显示的工具提示的配置。
- legend：显示系列名称，允许用户切换其可见性。
- xAxis：x 轴的配置（类别、类型等）。
- yAxis：y 轴的配置（值、类型等）。
- series：定义要绘制的数据系列的数组。每个系列对象通常包括 name、type（例如 'bar'、'line'、'pie'）和 data。
设置选项：调用 ECharts 实例的 setOption() 方法，传入配置对象。

示例：静态条形图

此示例创建一个显示不同水果销量的条形图。

上面的图表在本页面上实时渲染。其 JavaScript 代码嵌入在此 HTML 文件中。

3. 使用 ECharts 可视化数据挖掘结果

一个常见的用例是可视化从后端 API 动态获取的数据。我们将使用来自 Flask API（课程 11）的词频统计数据作为示例。

使用 `fetch` 从后端 API 获取数据

现代 JavaScript 使用 fetch API 发出异步 HTTP 请求。它返回一个 Promise，该 Promise 解析为对该请求的响应。

fetch('/api/wordcounts') // 您的 Flask API 端点的 URL
    .then(response => {
        if (!response.ok) {
            throw new Error('网络响应不佳: ' + response.statusText); // 'Network response was not ok: '
        }
        return response.json(); // 从响应中解析 JSON
    })
    .then(data => {
        console.log('数据获取成功:', data); // 'Data fetched successfully:'
        // 现在处理此数据并渲染 ECharts 图表
    })
    .catch(error => {
        console.error('获取数据时出错:', error); // 'Error fetching data:'
        // 处理错误，例如向用户显示消息
    });

为 ECharts 处理数据

来自我们 Flask API 的数据（例如 {"spark": 15, "flask": 10, ...}）需要转换为 ECharts 可以直接用于其 xAxis.data（类别）和 series.data（值）的格式。

对于词频统计的条形图，我们需要：

一个单词数组（例如 ['spark', 'flask', ...]）用于 x 轴类别。
一个相应的计数数组（例如 [15, 10, ...]）用于系列数据。

4. 实践示例：可视化来自 Flask API 的词频统计

此示例演示了从 Flask API（在课程 11 中构建，用于提供来自 Redis 的数据，该数据由课程 9 中的 PySpark 结果填充）获取词频统计数据，并使用 ECharts 将其可视化为条形图。

完整的 HTML/JavaScript 代码

以下是 HTML 和 JavaScript 代码。将其另存为 HTML 文件（例如 visualize_wordcounts.html）并在浏览器中打开。确保您课程 11 中的 Flask API 正在运行，并在 http://127.0.0.1:5000/api/wordcounts 提供数据。

正在加载图表数据...

运行此示例：

启动您的 Flask API：确保课程 11 中的 Flask 应用程序 (app_redis_api.py) 正在运行。它应该从 Redis 在 http://127.0.0.1:5000/api/wordcounts 提供词频统计数据。Redis 实例也应该正在运行并已填充数据（例如，使用 populate_redis_for_api.py）。
保存此 HTML：将此当前页面的完整 HTML 代码另存为 .html 文件（例如 course12_visualization.html）。
在浏览器中打开：在您的 Web 浏览器中直接打开保存的 HTML 文件。JavaScript 将执行，从您正在运行的 Flask API 获取数据，并渲染条形图。
CORS 注意：如果您的 Flask API 和此 HTML 页面从不同的源提供服务（例如，Flask 在 127.0.0.1:5000 上，而 HTML 通过 file:/// 打开），您可能会遇到跨源资源共享 (CORS) 错误。对于开发，最简单的解决方案是在您的 Flask 应用中使用像 Flask-CORS 这样的 Flask 扩展：
安装：pip install Flask-CORS
在您的 Flask 应用 (app_redis_api.py) 中：
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # 这将为所有路由启用 CORS

结论

Apache ECharts 是一个通用且功能强大的库，用于在浏览器中创建丰富、交互式的数据可视化。通过将 ECharts 与后端 API（如用 Flask 构建的 API）相结合，您可以动态获取数据并以引人入胜且易于理解的方式呈现它。此功能对于解释数据挖掘结果、监控系统和构建数据驱动的 Web 应用程序至关重要。