Django 结合 Echarts、Pyecharts 实现图表可视化的具体流程

2022-10-0310:29:23后端程序开发Comments1,117 views字数 3397阅读模式

使用 Django 进行 Web 开发时，经常有需要展示图表的需求，以此来丰富网页的数据展示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

常见方案包含：Highcharts、Matplotlib、Echarts、Pyecharts，其中后 2 种方案使用频率更高文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

本篇文章将聊聊 Django 结合 Echarts、Pyecharts 实现图表可视化的具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

Echarts

Echarts 是百度开源的一个非常优秀的可视化框架，它可以展示非常复杂的图表类型文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

以展示简单的柱状图为例，讲讲 Django 集成 Echarts 的流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

首先，在某个 App 的 views.py 编写视图函数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

当请求方法为 POST 时，定义柱状图中的数据值，然后使用 JsonResponse 返回数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

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', )

在模板文件中，导入 Echarts 的依赖文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

PS：可以使用本地 JS 文件或 CDN 加速服务文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

{#导入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 将返回结果展示到图表中去文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

<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，运行项目文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

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

发现，首页展示了一个简单的柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

Django 结合 Echarts、Pyecharts 实现图表可视化的具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

更多复杂的图表展示可以参考官方文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

https://echarts.apache.org/examples/zh/index.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

Pyecharts

Pyecharts 是一款使用 Python 对 Echarts 进行再次封装后的开源框架文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

相比 Echarts，Django 集成 Pyecharts 更快捷、方便文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

Django 集成 Pyecharts 只需要 4 步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

3-1  安装依赖文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

# 安装依赖
pip(3) install pyecharts

3-2  拷贝 pyecharts 的模板文件到项目下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

将虚拟环境中 pyecharts 的模板文件拷贝到项目的模板文件夹下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

比如本机路径如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

/Users/xingag/Envs/xh_log/lib/python3.7/site-packages/pyecharts/render/templates/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

Django 结合 Echarts、Pyecharts 实现图表可视化的具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

3-3  编写视图函数，渲染图表文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

在视图文件中，使用 pyecharts 库内置的类 Bar 创建一个柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

# 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())

3-4  运行项目文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

运行项目，生成的柱状图如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

Django 结合 Echarts、Pyecharts 实现图表可视化的具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

这只是最简单的使用实例，更多复杂的图表及前后端分离、更新的例子文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

可以参考官网：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

https://pyecharts.org/#/zh-cn/web_django?id=django-%e5%89%8d%e5%90%8e%e7%ab%af%e5%88%86%e7%a6%bb文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

4. 最后

文中介绍了 Django 快速集成 Echarts 和 Pyecharts 的基本步骤。实际项目中，一些复杂的图表、前后端分离数据更新可以参考官网去拓展。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/bc/28190.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定