二、Django 中使用 pyecharts。 前后端分离
1、安装 djangorestframework
linux pip3 install djangorestframework
windows pip install djangorestframework
2、新建一个 Django 项目
$ django-admin startproject pyecharts_django_demo_2
创建一个应用程序

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

# pyecharts_django_demo_2/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_2/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')) #本行为新增内容
]
编辑 demo/urls.py 文件(没有就新建一个)

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

urlpatterns = [
url(r'^bar/$', views.ChartView.as_view(), name='demo'),
url(r'^index/$', views.IndexView.as_view(), name='demo'),
]
3、 编写画图 HTML 代码
先在根目录文件夹下新建 templates 文件夹，新建一个 index.html，目录结构为

__pycache__ db.sqlite3 demo manage.py pyecharts_django_demo_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 () {
getData(chart);
}
);

function getData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/demo/bar",
dataType: 'json',
success: function (result) {
chart.setOption(result.data);
}
});
}
</script>
</body>
</html>
4: 编写 Django 和 pyecharts 代码渲染图表
将下列代码保存到 demo/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

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):
return JsonResponse(json.loads(bar_base()))

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/bar返回json格式的数据

django使用pyecharts(2)----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(3)----django加入echarts_定时全量更新

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

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

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

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

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

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

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

  8. Django学习之六：Django 常用模块导入记忆

    Django 常用模块导入记忆 django相关 1. urls相关操作 from django.urls import path, re_path, include from django.urls ...

  9. Django学习之四：Django Model模块

    目录 Django Model 模型 MODEL需要在脑子里记住的基础概念 区分清楚,必须不能混淆的 class Meta 内嵌元数据定义类 简单model创建实例 数据源配置 接着通过models在 ...

随机推荐

  1. 三大框架 之 spring-JDBC

    目录 spring-JDBC模板 Spring的JDBC的模板 JDBC模板使用的入门 引入jar包 创建数据库和表 使用JDBC的模板 将连接池和模板交给Spring管理 配置文件配置Bean 使用 ...

  2. 树莓派python 控制GPIO

    sudo pip install rpi.gpio #!/usr/bin/env python # encoding: utf-8 import RPi.GPIO as GPIO import tim ...

  3. C#文件或文件夹压缩和解压

    C#文件或文件夹压缩和解压方法有很多,本文通过使用ICSharpCode.SharpZipLib.dll来进行压缩解压 1.新建一个winform项目,选择项目右键 管理NuGet程序包,搜索ICSh ...

  4. kafka笔记博客

    大数据数据流组件选择: https://www.cnblogs.com/yinzhengjie/articles/11155051.html 初识Apache Kafka 核心概念: https:// ...

  5. Looper: Looper,Handler,MessageQueue三者之间的联系

    在Android中每个应用的UI线程是被保护的,不能在UI线程中进行耗时的操作,其他的子线程也不能直接进行UI操作.为了达到这个目的Android设计了handler Looper这个系统框架,And ...

  6. Hystrix原理与实战(转)

    背景 分布式系统环境下,服务间类似依赖非常常见,一个业务调用通常依赖多个基础服务.如下图,对于同步调用,当库存服务不可用时,商品服务请求线程被阻塞,当有大批量请求调用库存服务时,最终可能导致整个商品服 ...

  7. c#反射动态创建窗体

    根据窗体的名称动态创建窗体 Assembly assembly = Assembly.GetExecutingAssembly();             // 实例化窗体 try { Form f ...

  8. CDH 部署 Hadoop：5.开始安装

    Cloudera Enterprise 6.2.x   或者参考https://blog.csdn.net/shawnhu007/article/details/52579204 第零步:优化相关 e ...

  9. ISO/IEC 9899:2011 条款6.7.4——函数说明符

    6.7.4 函数说明符 语法 1.function-specifier: inline _Noreturn 约束 2.函数说明符应该只能被用在对一个函数标识符的声明中. 3.对一个含有外部连接函数的内 ...

  10. ISO/IEC 9899:2011 条款6.5.2——后缀操作符

    6.5.2 后缀操作符 语法 1.postfix-expression: primary-expression postfix-expression    [    expression    ] p ...