使用Django利用pyecharts进行Ajax异步请求

最新推荐文章于 2022-05-13 14:12:22 发布

Alex抱着爆米花

最新推荐文章于 2022-05-13 14:12:22 发布

阅读量664

点赞数 2

本文链接：https://blog.csdn.net/qq_41080854/article/details/114639603

版权

官网的个人感觉官网的比较难以理解，并且由于使用的Django的版本为3.1较高。
这里进行根据官网的例子。并按照自己的理解，复现和梳理一下。

urls.py

配置路由，pyecharts是请求显示图表的页面，givedata是Ajax请求服务器给Json的服务器地址

from django.urls import path,re_path
from . import views
urlpatterns = [
    path('pyecharts/',views.pyecharts),
    path('givedata/',views.givedata)
]

views.py

import json
from random import randrange
def response_as_json(data):
    json_str = json.dumps(data)
    response = HttpResponse(
        json_str,
        content_type="application/json",
    )
    response["Access-Control-Allow-Origin"] = "*"
    return response
def json_response(data, code=200):
    data = {
        "code": code,
        "msg": "success",
        "data": data,
    }
    return response_as_json(data)


def json_error(error_string="error", code=500, **kwargs):
    data = {
        "code": code,
        "msg": error_string,
        "data": {}
    }
    data.update(kwargs)
    return response_as_json(data)


JsonResponse = json_response
JsonError = json_error

函数response_as_json、json_response和json_error是必须要加的。是pyecharts的开发人员针对 json 数据类型问题重写的JsonResponse方法。如果不加就无法正常显示。

def bar_base() -> Bar:
    c = (
        Bar()
        .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
        .add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])
        .add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])
        .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
        .dump_options_with_quotes()
    )
    return c
def givedata(request):
    return JsonResponse(json.loads(bar_base()))

bar_base是一个正常的python函数，就是利用pyecharts进行画图，该函数返回一个画图的对象。然后进行转换为json格式。有一说一，这里的代码不够精简。

个人精简了代码，这样更清晰明了。

def givedata(request):
    c = (
        Bar()
            .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
            .add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])
            .add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])
            .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
            .dump_options_with_quotes()
    )
    return JsonResponse(json.loads(c))

test.html

这里的代码就不用改了，写的没问题。换一下请求服务器的地址就能用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <h1>test</h1>
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});

        $(
            function () {
                fetchData(chart);
            }
        );

        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/givedata",
                dataType: 'json',
                success: function (result) {
                    console.log('进来了');
                    chart.setOption(result.data);
                }
            });
        }
    </script>
</body>
</html>

最终的效果图
在这里插入图片描述

Alex抱着爆米花

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
使用Django利用pyecharts进行Ajax异步请求

官网的个人感觉官网的比较难以理解，并且由于使用的Django的版本为3.1较高。这里进行根据官网的例子。并按照自己的理解，复现和梳理一下。urls.py配置路由，pyecharts是请求显示图表的页面，givedata是Ajax请求服务器给Json的服务器地址from django.urls import path,re_pathfrom . import viewsurlpatterns = [ path('pyecharts/',views.pyecharts), path(
复制链接

扫一扫