三、Django 前后端分离_定时全量更新图表
1、安装 djangorestframework
linux pip3 install djangorestframework
windows pip install djangorestframework
2、新建一个 Django 项目
$ django-admin startproject pyecharts_django_demo_3
创建一个应用程序

$ python manage.py startapp demo
在 pyecharts_django_demo_3/settings.py 中注册应用程序

# pyecharts_django_demo_3/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'demo', # <--- app 名称
'rest_framework',
]
在 pyecharts_django_demo_3/urls.py 中新增 'demo.urls'

from django.contrib import admin
from django.urls import path
from django.conf.urls import url, include

urlpatterns = [
path('admin/', admin.site.urls),
url(r'^demo/', include('demo.urls'))
]

3、编写画图 HTML 代码
先在根目录文件夹下新建 templates 文件夹,新建一个 index.html, 定时刷新的核心在于 html 的 setInterval 方法。
文件目录情况
__pycache__ db.sqlite3 demo manage.py pyecharts_django_demo_3 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="line" style="width:1600px; height:800px;"></div>
<script>
var chart = echarts.init(document.getElementById('line'), 'white', {renderer: 'canvas'});

$(
function () {
getData(chart);
setInterval(getData, 2000);
}
);

function getData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/demo/line",
dataType: 'json',
success: function (result) {
chart.setOption(result.data);
}
});
}
</script>
</body>
</html>
3、编写 Django 和 pyecharts 代码渲染图表
将下列代码保存到 demo/vurls.py 和demo/views.py 中
后端代码也需要相应做出改变

编辑 demo/urls.py 文件(没有就新建一个)

from django.conf.urls import url
from . import views

urlpatterns = [
url(r'^bar/$', views.ChartViewBar.as_view(), name='bar'),
url(r'^line/$', views.ChartView.as_view(), name='line'),
url(r'^lineUpdate/$', views.ChartUpdateView.as_view(), name='lineupdate'),
url(r'^index/$', views.IndexView.as_view(), name='demo'),
]

demo.view.py

from django.shortcuts import render

# Create your views here.
import json
from random import randrange

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

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

cnt = 0 #定义line初始化时有多少组数据

# 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 line_base() -> Line:
global cnt
cnt = 9
line = (
Line()
.add_xaxis(list(range(cnt + 1)))
.add_yaxis(series_name="", y_axis=[randrange(0, 100) for _ in range(10)])
.set_global_opts(
title_opts=opts.TitleOpts(title="动态数据"),
xaxis_opts=opts.AxisOpts(type_="value"),
yaxis_opts=opts.AxisOpts(type_="value")
)
.dump_options()
)
return line

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()
)
return c

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

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

class ChartUpdateView(APIView):
def get(self, request, *args, **kwargs):
global cnt
cnt = cnt + 1
print({"name": cnt, "value": randrange(0, 100)})
return JsonResponse({"name": cnt, "value": randrange(0, 100)})

class IndexView(APIView):
def get(self, request, *args, **kwargs):
return HttpResponse(content=open("./templates/index.html").read())
Step 4: 运行项目
$ python manage.py runserver
使用浏览器打开 http://127.0.0.1:8000/demo/index 即可访问服务
http://127.0.0.1:8000/demo/line返回json格式的数据

django使用pyecharts(3)----django加入echarts_定时全量更新的更多相关文章

  1. django使用pyecharts(6)----django加入echarts_增量更新_定长_坐标轴定长

    六.Django 前后端分离_定时增量更新图表(坐标轴定长) 1.安装 djangorestframework linux pip3 install djangorestframework windo ...

  2. django使用pyecharts(5)----django加入echarts_增量更新_定长

    五.Django 前后端分离_定时增量更新图表定长数据 1.安装 djangorestframework linux pip3 install djangorestframework windows ...

  3. django使用pyecharts(4)----django加入echarts_增量更新

    四.Django 前后端分离_定时增量更新图表 1.安装 djangorestframework linux pip3 install djangorestframework windows pip ...

  4. django使用pyecharts(2)----django加入echarts_前后台分离

    二.Django 中使用 pyecharts. 前后端分离 1.安装 djangorestframework linux pip3 install djangorestframework window ...

  5. Centos 实战-MySQL定时全量备份(1)

    /usr/bin/mysqldump -uroot -p123456 --lock-all-tables --flush-logs test > /home/backup.sql 如上一段代码所 ...

  6. django使用pyecharts(1)----django加入echarts

    Django 中使用 pyecharts.一.普通django加入echarts Django 模板渲染 Step 0: 新建一个 Django 项目 $ django-admin startproj ...

  7. Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法

    Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法 2018/11/06 Chenxin 资料说明 Django基础入 ...

  8. Django视频教程 - 基于Python的Web框架(全13集)

    Django是由Python驱动的开源模型-视图-控制器(MVC)风格的Web应用程序框架,使用Django可以在即可分钟内快速开发一个高品质易维护数据库驱动的应用程序.下面是一大坨关于Django应 ...

  9. Django项目实践4 - Django网站管理(后台管理员)

    http://blog.csdn.net/pipisorry/article/details/45079751 上篇:Django项目实践3 - Django模型 Introduction 对于某一类 ...

随机推荐

  1. Git的使用(4) —— 分支的概念和使用

    1. 概念 在SVN中,分支并不是很便于使用.但是在Git中,分支就变成了特别好用的功能呢,受到大多数使用者的青睐. 分支中有几个概念: (1) 分支:分支就是每一次提交创建的点连接成的线. (2) ...

  2. Thingsboard HTTP连接至服务器

    当布署了Thingsboard服务器后,可以通过在服务器地址后,加入swagger-ui.html来打开API文档

  3. 修改layui的表单手机、邮箱验证可以为空怎么实现?

      修改layui的表单手机.邮箱验证可以为空   解决办法: 修改源码: 把表单验证源代码(form.js)的正则表达式改一下,例如手机的正则为:/^1d{10}$/,可以改成/^$|^1d{10} ...

  4. TP5 查询 字符串条件如何实现

      TP5 查询 字符串条件如何实现 当查询条件是 (1,3,8) ,3,4) 这种情况改如何查询呢?   主要用到FIND_IN_SET $where[ ]=>['exp',Db::raw(& ...

  5. 到底啥是鸭子类型(duck typing)带简单例子

    #百度百科鸭子类型定义 这是程序设计中的一种类型推断风格,这种风格适用于动态语言(比如PHP.Python.Ruby.Typescript.Perl.Objective-C.Lua.Julia.Jav ...

  6. (转)Darknet模型与Tensorflow模型相互转换

    目前darknet框架下的模型训练都是在C环境下训练的,难免较为晦涩,如果能将模型转换到Tensorflow环境下完成模型的训练,在将训练好的权重转为Darknet可以识别的权重部署到实际应用中.这样 ...

  7. 读《中国人工智能与 IJCAI 的 40 周年,还有哪些未曾对外诉说的故事?》

    原文地址: https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_10186783044528 ...

  8. IDEA子项目的相互依赖

    A项目依赖B项目 一.B项目打包,执行install 这一步其实就是把你的项目打包到本地仓库,你可以在本地仓库看到相应的jar包 二.在A项目的pom.xml引入依赖可以了 当B项目修改后,需要重新打 ...

  9. DataWorks2.0——DataStudio简单对比使用上手

    1.原先的数据管理去哪里了? 悬停在此图标上即可:  2.项目模式有何不同?

  10. 中标麒麟+Qt+mysql解决驱动无法加载的问题

    问题描述:都安装了Qt,Mysql之后,发现Qt始终不能连接Mysql 1.安装Qt 2.写程序直接连接QMysql 打印QSqlDatabase: * driver not loaded ,进入/h ...