Django echarts初试随笔

EdShao

2020-01-18

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 %}

django data