Django集成Echarts与Pyecharts实现数据可视化详解

宋时安

发布时间：2026-10-14| 5人浏览过

原创

本文详细讲解在Django Web开发中集成Echarts和Pyecharts两种主流可视化方案的具体流程。通过对比分析，分别演示了基于Ajax的Echarts后端数据交互方式，以及利用Pyecharts封装简化渲染步骤的方法，帮助开发者快速实现柱状图等常见图表的展示与复杂场景拓展。

1. 前言

大家好，我是安果！

在进行Django Web开发时，经常需要展示图表以丰富网页的数据呈现效果。

常见的解决方案包括Highcharts、Matplotlib、Echarts和Pyecharts，其中后两种方案在实际应用中使用频率更高。

本文将重点探讨Django结合Echarts和Pyecharts实现图表可视化的具体操作流程。

2. Echarts

Echarts是百度开源的一款优秀的可视化框架，支持展示各类复杂类型的图表。

下面以展示一个简单的柱状图为例，介绍Django集成Echarts的具体步骤。

首先，在对应App的views.py文件中编写视图函数。

当请求方法为POST时，定义柱状图所需的数据值，并通过JsonResponse返回这些数据。


from django.http import JsonResponse
from django.shortcuts import render


def index_view(request):
    if request.method == "POST":

        # 柱状图的数据
        datas = [5, 20, 36, 10, 10, 20]

        # 返回数据
        return JsonResponse({'bar_datas': datas})
    else:
        return render(request, 'index.html', )

在HTML模板文件中，需要导入Echarts的相关依赖库。

注意：可以使用本地JS文件或CDN加速服务来加载资源。


{#导入js和echarts依赖#}
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.js"></script>

接着，重写window.onload函数，发送一个Ajax请求至后端，获取数据并利用Echarts将结果渲染到图表容器中。


<script>
    // 柱状图
    function show_bar(data) {

        //控件
        var bar_widget = echarts.init(document.getElementById('bar_div'));

        //设置option
        option = {
            title: {
                text: '简单的柱状图'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                type: 'category',
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'bar'
            }]
        };

        bar_widget.setOption(option)
    }
    //显示即加载调用
    window.onload = function () {
        //发送post请求，地址为index（Jquery）
        $.ajax({
            url: "/",
            type: "POST",
            data: {},
            success: function (data) {
                // 柱状图
                show_bar(data['bar_datas']);

                //后端返回的结果
                console.log(data)
            }
        })
    }
</script>

最后，配置路由URL并运行项目。


from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('',include('index.urls')),
    path('admin/', admin.site.urls),
]

运行后，首页成功展示了一个简单的柱状图。

如需展示更复杂的图表类型，可参考官方文档。

https://echarts.apache.org/examples/zh/index.html

3. Pyecharts

Pyecharts是一款基于Python对Echarts进行二次封装的开源框架。

与直接集成Echarts相比，Django集成Pyecharts的过程更为快捷和简便。

在Django中集成Pyecharts仅需完成以下4个步骤。

3-1 安装依赖


# 安装依赖
pip(3) install pyecharts

3-2 拷贝pyecharts的模板文件到项目下

将虚拟环境中pyecharts的模板文件拷贝至项目的模板文件夹中。

例如，本机路径如下：

/Users/xingag/Envs/xh_log/lib/python3.7/site-packages/pyecharts/render/templates/

3-3 编写视图函数，渲染图表

在视图文件中，使用pyecharts库内置的Bar类创建一个柱状图。


# Create your views here.
from django.http import HttpResponse
from jinja2 import Environment, FileSystemLoader
from pyecharts.globals import CurrentConfig

CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./index/templates"))

from pyecharts import options as opts
from pyecharts.charts import Bar


# http://127.0.0.1:8000/demo/
def index(request):
    c = (
        Bar()
            .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
            .add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
            .add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
            .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
    )
    return HttpResponse(c.render_embed())