本文讲解Django学习成绩管理网站搭建的第13部分，用ECharts实现成绩数据可视化。

本系列将详细介绍如何使用django框架搭建一个网站，专注于创建一个独立的项目应用，主要功能包括学习成绩查询和数据统计分析。该项目将涉及前端技术如datatables、echarts和jquery。

Part 1：目标

我们的目标是实现对查询的成绩进行排榜，展示一个柱状图和一个折线图。每个图表下方将有一个区域，允许用户对X轴进行缩放。

这是X轴缩放的演示动图。

Part 2：代码

界面设计为一行两张卡片，每张卡片内包含两个子卡片。

以下是用于显示排行榜的JavaScript代码：

js部分：更新图表1

以下是用于更新柱状图的JavaScript代码：

js部分：更新图表2

以下是用于更新折线图的JavaScript代码：

Part 3：部分代码解读

界面设计为一行多张卡片，通过

来分割。

以下是用于显示X轴缩放功能的JavaScript代码：

长按图片识别二维码，关注本公众号Python 优雅 帅气