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

Part 1：目标

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

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

Part 2：代码

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

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

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

排行榜-柱状图
排行榜-折线图

js部分：更新图表1

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

// 更新图表1
var str_title = JSON.stringify(data.title_name);
var array_title = JSON.parse(str_title);
// x轴信息
var str_xaxis = JSON.stringify(data.xaxis);
var array_xaxis = JSON.parse(str_xaxis);
var chart_1 = echarts.init(document.getElementById("chart-1"));
chart_1.clear(); // 清空原图表
if (Array.isArray(array_xaxis) && array_xaxis.length === 0) {
    // 没有数据，清空即可
    alert("无数据");
} else {
    var str_y = JSON.stringify(data.y);
    var array_y = JSON.parse(str_y);
    var option = {
        xAxis: {
            type: 'category',
            data: array_xaxis
        },
        dataZoom: [{
            startValue: ''
        }, {
            type: 'inside'
        }],
        yAxis: {
            type: 'value'
        },
        series: [{
            data: array_y,
            type: 'bar',
            label: {
                show: true,
                position: 'inside'
            },
            showBackground: true,
            backgroundStyle: {
                color: '#e7e7e7'
            }
        }]
    };
    chart_1.setOption(option);
};

js部分：更新图表2

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

// 更新图表2
str_title = JSON.stringify(data.title_name);
array_title = JSON.parse(str_title);
// x轴信息
str_xaxis = JSON.stringify(data.xaxis);
array_xaxis = JSON.parse(str_xaxis);
chart_2 = echarts.init(document.getElementById("chart-2"));
chart_2.clear(); // 清空原图表
if (Array.isArray(array_xaxis) && array_xaxis.length === 0) {
    // 没有数据，清空即可
    alert("无数据");
} else {
    str_y = JSON.stringify(data.y);
    array_y = JSON.parse(str_y);
    option = {
        xAxis: {
            type: 'category',
            data: array_xaxis
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        dataZoom: [{
            startValue: ''
        }, {
            type: 'inside'
        }],
        yAxis: {
            type: 'value'
        },
        series: [{
            data: array_y,
            type: 'line',
        }]
    };
    chart_2.setOption(option);
}

Part 3：部分代码解读

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

col-md-6

来分割。

第1部分
第2部分
<br>

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

dataZoom: [
    {
        startValue: ''
    },
    {
        type: 'inside'
    }
],

---

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