Pyecharts--并列多图实现前后端分离、定时全量更新图表

最新推荐文章于 2023-12-26 22:58:16 发布

i see the future

最新推荐文章于 2023-12-26 22:58:16 发布

阅读量1.8k

点赞数 1

分类专栏： pyecharts 文章标签： python

本文链接：https://blog.csdn.net/m0_46629123/article/details/119804355

版权

pyecharts 专栏收录该内容

14 篇文章 12 订阅

订阅专栏

Pyecharts–并列多图实现前后端分离、定时全量更新图表

1.官方文档

1.1 官方文档

2.我的例子

在这里插入图片描述

2.1 views.py


import json
from random import randrange

from django.http import HttpResponse
from rest_framework.views import APIView

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


# Create your views here.
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




from pyecharts import options as opts
from pyecharts.charts import Grid, Line, Scatter
from pyecharts.faker import Faker

scatter = (
    Scatter()
    .add_xaxis(Faker.choose())
    .add_yaxis("商家A", Faker.values())
    .add_yaxis("商家B", Faker.values())
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Grid-Scatter"),
        legend_opts=opts.LegendOpts(pos_left="20%"),
    )
)
line = (
    Line()
    .add_xaxis(Faker.choose())
    .add_yaxis("商家A", Faker.values())
    .add_yaxis("商家B", Faker.values())
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Grid-Line", pos_right="5%"),
        legend_opts=opts.LegendOpts(pos_right="20%"),
    )
)

def grid_table():
    grid = (
        Grid()
        .add(scatter, grid_opts=opts.GridOpts(pos_left="55%"))
        .add(line, grid_opts=opts.GridOpts(pos_right="55%"))
        .dump_options_with_quotes()
    )
    return grid



class ChartView(APIView):
    def get(self, request, *args, **kwargs):
        return JsonResponse(json.loads(grid_table()))


class IndexView(APIView):
    def get(self, request, *args, **kwargs):
        return HttpResponse(content=open("./templates/index.html").read())

2.2 templates/index.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>
    <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/demo/bar",
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result.data);
                }
            });
        }
    </script>
</body>
</html>

i see the future

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Pyecharts--并列多图实现前后端分离、定时全量更新图表

Pyecharts–并列多图实现前后端分离、定时全量更新图表1.官方文档1.1 官方文档2.我的例子2.1 views.pyimport jsonfrom random import randrangefrom django.http import HttpResponsefrom rest_framework.views import APIViewfrom pyecharts.charts import Barfrom pyecharts import options a
复制链接

扫一扫