Kenway's Blog

【工具】Django框架及结合Echarts库的使用

发表于 更新于 分类于

目录

Django框架

Echarts库

Django框架

初始文件介绍

1
2
3
4
5
6
7
templates //HTML文件安置目录
__init__.py //空文件
asgi.py //异步
settings.py //主配置文件
urls.py //主路由文件
wsgi.py //网关接口
manage.py //项目管理脚本

一个简单的Django程序

一、新建一个APP

在每个Django项目中可能会包含多个APP，APP共享项目资源

在Pycharm下方的Terminal中输入

1
python manage.py start login

表示创建一个叫做login的APP，最好在settings.py的INSTALLEN_APPS中也添加一个’login’

二、编写路由(在urls.py中编写)

  • 先在头部加入以下代码，表示导入login APP中的views文件
    1
    from login import views
  • 然后在urlpatterns里添加
    1
    path('index/', views.index),

三、编写视图函数(在login/views.py中编写)

  • 先在头部加入以下代码
    1
    from django.shortcuts import HttResponse
  • 编写上一步路由中调用的index函数
    1
    2
    3
    4
    5
    def index(request):
        return HttpResponse("Hello, it's me!") 

    # 参数是固定格式，request参数封装了用户请求的所有内容
    # 字符串不能直接返回，要由HttpResonse类封装起来才能被HTTP协议识别

四、启动Web服务

启动有两种方法：

  1. 命令行输入python manage.py runserver 127.0.0.1:8000
  2. 在Pycharm中，点击右上角edit configurations，配置host为127.0.0.1，port为8000后，点击绿色三角启动

Echarts库

Echarts库是百度研发的开源可视化库，Python中有对应的Pyecharts库，当然不使用Pyecharts根据Echarts的官方文档也能在Django里引入，本文主要介绍如何在Django中使用Pyecharts库

一个Pyecharts案例

新建一个app demo

1
python manage.py startapp demo
  • 在demo文件夹下新建一个urls.py文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    urls.py
    from django.conf.urls import url
    from . import views
    urlpatterns = [
    url(r'^bar/$, views.ChartsViews.as_view(), name='demo'),
    url(r'^index/$', views.IndexViews.as_view(), name='demo'),
    ]

    # bar是后台，index是前台

    编写画图HTML代码

    在demo目录下新建一个templates文件夹，新建一个index.html文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <!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="Graph" style="width:1000px; height:600px;"></div>
        <script>
            # 使用第一个id为"Graph"的为dom空间，使用canvas渲染
            var chart = echarts.init(document.getElementById('Graph'), 'white', {renderer: 'canvas'});

            $(
                function () {
                    fetchData(chart);
                    # 这里若加一条setInterval(fetchData, 2000);可实现每2秒自动刷新一次
                }
            );

            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>

编写代码渲染图表(在views.py中编写)

结构为

  • import …
  • JsonResponse:将数据包装成HttpResponse实例
  • graph_base:构造数据(记得要xx.dump_options_with_quotes())
  • ChartView(APIView):后台数据Web
  • IndexView(APIView):前台显示Web

具体代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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


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


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


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

个人经验：

echarts关系图(力引导布局)的的属性设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
nodes = [
{"name": "节点名",
"x":300,
"y":300
"symbolSize": 10,symbolSize可只用数字，也可用[长，宽]来表示
"symbol": 'triangle',
},
]

links = [
{"soruse": "起点节点名", "target": "终点节点名"},节点名可用name也可直接用单个数字表示索引
]

lineStyles = opts.LineStyleOpts(
    is_show=True,是否显示
    width=1,线宽-
    opacity=1,图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形-
    curve=0,线的弯曲度，0 表示完全不弯曲
    type_="solid",线的类型。可选：'solid', 'dashed', 'dotted'
    color="source",
            )

c=(
Graph()
.add(
"",
nodes,
links,
linestyle_opts=lineStyles,
repulsion=8000, 斥力因子
is_draggable=True,允许拖拽
edge_symbol=['circle', 'arrow'],显示箭头
linestyle_opts = lineStyles
)
.set_global_opts(title_opts=opts.TitleOpts(title="Graph-基本示例"))Web标题设置
.dump_options_with_quotes()打包
)