Django echarts初试随笔

刺骨的言语ヽ痛彻心扉 2023-06-25 06:24 9阅读 0赞

`Django`项目的配置文件`APP`配置

INSTALLED_APPS = [
        'django.contrib.admin',         # 管理员站点
        'django.contrib.auth',          # 认证授权系统
        'django.contrib.contenttypes',  # 内容类型框架
        'django.contrib.sessions',      # 会话框架
        'django.contrib.messages',      # 消息框架
        'django.contrib.staticfiles',   # 管理静态文件的框架
        'myapp',
        'django_echarts',               # 注册Django rest framework
        'rest_framework',               # 在这里需要注册Django rest framework
    ]

`Django`项目的`URL`配置

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

`APP`路由配置

from django.urls import path
    from . import views
    
    urlpatterns = [
        path('', views.index, name='index'),
        path('show/', views.ChartView.as_view(), name='show')
    ]

`APP`视图代码

from django.shortcuts import HttpResponse
    from django.shortcuts import render
    
    from pyecharts.charts import Bar
    from pyecharts import options
    
    from rest_framework.views import APIView
    
    from random import randrange
    
    import json
    import os
    
    
    def index(request):
        return render(request, 'main.html')
    
    
    def response_as_json(data):
        json_str = json.dumps(data)
        response = HttpResponse(
            json_str,
            content_type='application/json'
        )
        response['Access-Control-Allow-Region'] = '*'
    
        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
    
    
    def bar_base() -> Bar:
        bar = (
            Bar()
            .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
            .add_yaxis('商家A', [randrange(0, 100) for _ in range(6)])
            .set_global_opts(title_opts=options.TitleOpts(title='这是标题', subtitle='这是副标题'))
            .dump_options_with_quotes()
        )
        return bar
    
    
    class ChartView(APIView):
        def get(self, request, *args, **kwargs):
            return JsonResponse(json.loads(bar_base()))

模板页实现

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="UTF-8">
        {% load static %}
        <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" type="text/css"/>
        <script src="{% static 'echarts-4.5.0/echarts.common.min.js' %}"></script>
        <script src="{% static 'jquery/jquery.min.js' %}"></script>
        <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
        <title>Index</title>
    </head>
    <body>
     <div class="container">
            {% block content %}
            {% endblock %}
        </div>
    </body>
    </html>

刷新界面实现

{% extends 'index.html' %}
    {% block content %}
        <div id="bar" style="width: 800px; height: 600px"></div>
        {
       { data | safe }}
        <script>
            var myChart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'cavnvas'});
    
            $(
                function () {
                    fetchData();
                    window.setInterval(fetchData, 2000)
                }
            );
    
            function fetchData() {
                $.ajax({
                    type: 'GET',
                    url: '/show/',
                    dataType: 'json',
                    success: function (result) {
                        myChart.setOption(result.data)
                    },
                    error: function (result) {
                        console.log(result)
                    }
                })
            }
        </script>
    {% endblock %}