基于Django快速集成Echarts代码示例
1.在线定制下载echarts
https://echarts.apache.org/zh/builder.html
2.创建一个django项目或者在已有的项目
- 配置文件中确保数据库配置、static配置、与添加项目名到INSTALLED_APPS下。
- 配置静态文件目录static，目录下创建：css、img、js。
- 保存echarts.min.js到js目录下。
- 创建templates文件，html文件放到此目录。
快速静态测试
test.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
{% load static %}
<script src="{% static '/js/echarts.min.js' %}"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
urls文件
from django.urls import path
from app.views import TestView
urlpatterns = [
path('test/',TestView.as_view()),
]
Views文件
from django.shortcuts import render
from rest_framework.views import View
from rest_framework.response import Response
class TestView(View):
def dispatch(self, request, *args, **kwargs):
"""
请求到来之后，都要执行dispatch方法，dispatch方法根据请求方式不同触发 get/post/put等方法
注意：APIView中的dispatch方法有好多好多的功能
"""
return super().dispatch(request, *args, **kwargs)
def get(self, request, *args, **kwargs):
return render(request, "test.html")
def post(self, request, *args, **kwargs):
return Response('POST请求，响应内容')
def put(self, request, *args, **kwargs):
return Response('PUT请求，响应内容')
Views文件
访问url地址：
django获取数据库中的数据传递给echarts
test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
{% load static %}
<script src="{% static '/js/echarts.min.js' %}"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
console.log(name)
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: {{ name|safe }}
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data:{{ data|safe }}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
urls文件
from django.urls import path
from app.views import TestView1
urlpatterns = [
path('test1/',TestView1.as_view()),
]
Views文件
from django.shortcuts import render
from rest_framework.views import View
from rest_framework.response import Response
class TestView1(View):
def dispatch(self, request, *args, **kwargs):
"""
请求到来之后，都要执行dispatch方法，dispatch方法根据请求方式不同触发 get/post/put等方法
注意：APIView中的dispatch方法有好多好多的功能
"""
return super().dispatch(request, *args, **kwargs)
def get(self, request, *args, **kwargs):
name = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
data = [56, 40, 54, 23, 12, 31]
return render(request, "test1.html",{"name":name,"data":data})
def post(self, request, *args, **kwargs):
return Response('POST请求，响应内容')
def put(self, request, *args, **kwargs):
return Response('PUT请求，响应内容')
注意：我在views文件中直接返回数据，在html模板中使用标签渲染，如果你需要使用ORM从数据库拿数据，可以做如下操作：
wheelsList = Wheel.objects.all()
name = list(Wheel.objects.values_list('name', flat=True))
data = list(Wheel.objects.values_list('trackid', flat=True))
访问url地址：
echarts异步更新数据
test2.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 jquery.js-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 引入 echarts.js -->
{% load static %}
<script src="{% static '/js/echarts.min.js' %}"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
$(function () {
var server_info;
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: {{ name | safe }}
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: {{ data | safe }}
}]
};
myChart.setOption(option, true);
setInterval( function () {
$.ajax({
type: 'GET',
url: '/test1_api/',
dataType: 'json',
success: function (arg) {
server_info = eval(arg);
option.xAxis.data = server_info.name;
option.series[0].data = server_info.data;
}
});
myChart.setOption(option, true);
}, 2000);
window.onresize = function () {
myChart.resize();
};
});
</script>
</body>
</html>
urls文件
from django.urls import path
from app.views import TestView,TestView1,TestView1api
urlpatterns = [
path('test2/',TestView1.as_view()),
path('test1_api/',TestView1api.as_view()),
]
View文件
from django.shortcuts import render
from rest_framework.views import View
from rest_framework.response import Response
from django.http import HttpResponse
class TestView1(View):
def dispatch(self, request, *args, **kwargs):
"""
请求到来之后，都要执行dispatch方法，dispatch方法根据请求方式不同触发 get/post/put等方法
注意：APIView中的dispatch方法有好多好多的功能
"""
return super().dispatch(request, *args, **kwargs)
def get(self, request, *args, **kwargs):
name = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
data = [56, 40, 54, 23, 12, 31]
return render(request, "test2.html",{"name":name,"data":data})
def post(self, request, *args, **kwargs):
return Response('POST请求，响应内容')
def put(self, request, *args, **kwargs):
return Response('PUT请求，响应内容')
count = 1
class TestView1api(View):
def dispatch(self, request, *args, **kwargs):
"""
请求到来之后，都要执行dispatch方法，dispatch方法根据请求方式不同触发 get/post/put等方法
注意：APIView中的dispatch方法有好多好多的功能
"""
return super().dispatch(request, *args, **kwargs)
def get(self, request, *args, **kwargs):
global count
name = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
data = [56+count, 40+count, 54+count, 23+count, 12+count, 31+count]
count = count + 1
print(data)
print(count)
ret = {'name': name, 'data': data}
return HttpResponse(json.dumps(ret))
def post(self, request, *args, **kwargs):
return Response('POST请求，响应内容')
def put(self, request, *args, **kwargs):
return Response('PUT请求，响应内容')
echarts异步加载+异步更新
在上个示例的基础上，修改test2.html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 jquery.js-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 引入 echarts.js -->
{% load static %}
<script src="{% static '/js/echarts.min.js' %}"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
$(function () {
var server_info;
// 基于准备好的dom，初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
};
myChart.setOption(option, true);
// 异步加载json格式数据
$.getJSON('http://127.0.0.1:8080/test1_api/', function (data) {
myChart.setOption({
xAxis: {
data: data.name
},
series: [{
// 根据名字对应到相应的系列
data: data.data
}]
});
});
// ajax异步更新json格式数据
setInterval( function () {
$.ajax({
type: 'GET',
url: '/test1_api/',
dataType: 'json',
success: function (arg) {
server_info = eval(arg);
option.xAxis.data = server_info.name;
option.series[0].data = server_info.data;
}
});
myChart.setOption(option, true);
}, 2000);
window.onresize = function () {
myChart.resize();
};
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
使用django自带的user做外键的方法
一.使用django自带的user做外键,可以直接在model中使用.只需导入settings模块 使用方法: 在app应用(此处是Product应用)中的models.py文件,导入settings模块 # Product / models.py from django.db import models from django.contrib.auth import settings class Product(models.Model): productName = models.CharF
-
django echarts饼图数据动态加载的实例
如下所示: 后台关键代码: data = {} #keys与values分别为该数据的键数组,值的数组.这里循环为字典添加对应键值 for k, v in zip(keys, values): data.update({k: v, },) #最后将数据打包成json格式以字典的方式传送到前端 return render(request, 'index.html', {'data': json.dumps(data)}) 网页(js中)取值关键代码: 1.取值: var kv = new Arra
-
Django与pyecharts结合的实例代码
一.创建Application 转到manage.py的同级目录,运行: py manage.py startapp NLP 在sitting.py中注册该Application: # Application definition #包含项目中启用的所有Django应用 INSTALLED_APPS = [ 'polls.apps.PollsConfig',#将创建的polls添加到项目中 'NLP' 'django.contrib.admin', 'django.contrib.auth',
-
Django中从mysql数据库中获取数据传到echarts方式
尝试了几种方法,感觉过于复杂,于是自己写了一个方法. (1)首先在要绘图的页面传入从数据库中提取的参数,这一步通过views可以实现: (2)然后是页面加载完成时执行的函数ready,调用方法f; (3)在函数f中获取参数,此时是string类型,需要将其转换为json对象,使用eval即可: (4)json对象的每一个元素均为string(可以使用typeof()判断),需要取出每一个成员将其转换为json对象: (5)在echarts模块函数中调用函数f,获取所需的数据 补充知识:djang
-
Django数据统计功能count()的使用
一.view实现计数 在apiviews.py中加入以下内容 from ApiTest.models import ApiTest from django.shortcuts import render def api_test_manage(request): apitest_count = ApiTest.objects.all().count() return render(request, "apitest_manage.html", {'user': username, 'a
-
Django 用户认证Auth组件的使用
Django 用户认证(Auth)组件 Django 用户认证(Auth)组件一般用在用户的登录注册上,用于判断当前的用户是否合法,并跳转到登陆成功或失败页面. Django 用户认证(Auth)组件需要导入 auth 模块: # 认证模块 from django.contrib import auth # 对应数据库 from django.contrib.auth.models import User 返回值是用户对象. 创建用户对象的三种方法: create():创建一个普通用户,密码是明
-
Django数据模型中on_delete使用详解
on_delete属性针对外键ForeignKey 一.django3.0官方文档介绍: Many-to-one relationships多对一关系 To define a many-to-one relationship, use django.db.models.ForeignKey. You use it just like any other Field type: by including it as a class attribute of your model. ForeignK
-
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
刚在网上查了一圈,好家伙,全都是那一篇文章,而且用的pycharm是老版本的,下边介绍的是pycharm2019专业版的,直接切入正题: (1)打开 pycharm -> File文件 -> New Project 创建新项目 (2)选择Django项目 1.选择创建Django项目的本地路径(这里补充下,下边图应该没有后边的 \ , 必须要选择一个文件夹). 2.选择Pipenv来创建虚拟环境. 3.Base interpreter 为本机系统的python解释器,也就是安装python时的
-
基于Django快速集成Echarts代码示例
1.在线定制下载echarts https://echarts.apache.org/zh/builder.html 2.创建一个django项目或者在已有的项目 配置文件中确保数据库配置.static配置.与添加项目名到INSTALLED_APPS下. 配置静态文件目录static,目录下创建:css.img.js. 保存echarts.min.js到js目录下. 创建templates文件,html文件放到此目录. 快速静态测试 test.html文件 <!DOCTYPE html> &l
-
Apache Commons Math3探索之快速傅立叶变换代码示例
上一篇文章中我们了解了Apache Commons Math3探索之多项式曲线拟合实现代码,今天我们就来看看如何通过apache commons math3实现快速傅里叶变换,下面是具体内容. 傅立叶变换:org.apache.commons.math3.transform.FastFourierTransformer类. 用法示例代码: double inputData = new double[arrayLength]; // ... 给inputData赋值 FastFourierTran
-
Python学习之Django的管理界面代码示例
本文研究的主要是Python web开发框架Django的管理界面的相关内容,具体如下. admin界面的路径,通常在my_project中已经设置好了,使用django-admin.py startproject my_project 在目录下的urls.py文件中可以看到 from django.conf.urls import include, url from django.contrib import admin urlpatterns = [ # Examples: # url(r'
-
SpringBoot整合minio快速入门教程(代码示例)
分享一个快速使用springboot整合minio实现文件上传和下载的示例.前提是已经安装并运行minio服务,参考 minio快速入门文档 首先添加Minio的依赖 <dependency> <groupId>io.minio</groupId> <artifactId>minio</artifactId> <version>3.0.10</version> </dependency> 然后写一个contro
-
Android实现基于ZXing快速集成二维码扫描功能
二维码扫描现在是一直比较多的应用场景,android的开源项目ZXing提供了完整.成熟的解决方案,如果仅仅是出于快速开发的目的,可以根据自己的项目需要,把ZXing官方提供的项目稍加裁剪,就可以快速的集成到自己的项目中.下面详细演示和介绍如何实现基于ZXing官方提供的源码,快速集成二维码扫描功能到自己项目中的解决方案. (第1步):到ZXing官方主页下载最新的项目代码包,ZXing在github的官方主页:https://github.com/zxing,下载后解压.解压后根目录下有若干项
-
Bitmap海量数据快速查找去重代码示例
题目描述 给你一个文件,里面包含40亿个整数,写一个算法找出该文件中不包含的一个整数, 假设你有1GB内存可用. 如果你只有10MB的内存呢? 解题思路 对于40亿个整数,如果直接用int数组来表示的大约要用4010^84B=16GB,超出了内存要求,这里 我们可以用bitmap来解决,bitmap基本思想是一位表示一个整数,比如我们有6个数据: 1 7 3 1 5 6 4 假设bitmap容量为8,当插入7时 bit[7]=1,以此类推 bit[3]=1 bit[1]=1 bit[5]=1 -
-
Django使用celery异步发送短信验证码代码示例
目录 celery 1.celery介绍 1.1 celery应用举例 1.2 Celery有以下优点 1.3 Celery 特性 2.工作原理 2.1 Celery 扮演生产者和消费者的角色 3.异步发短信 1.settings同级目录下创建 celery 文件 2.配置settings文件 3 配置 settings同级目录下 init 文件 4.在utils下新建一个task.py文件 5.接口中调用 6 .先启动django项目 然后另开终端 cd到项目 celery 1.celery介
-
SpringBoot集成JPA的示例代码
本文介绍了SpringBoot集成JPA的示例代码,分享给大家,具体如下: 1.创建新的maven项目 2. 添加必须的依赖 <!--springboot的必须依赖--> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.9.RELEASE
-
django 发送手机验证码的示例代码
一.流程分析: 1.用户在项目前端,输入手机号,然后点击[获取验证码],将手机号发到post到后台. 2.后台验证手机号是否合法,是否已被占用,如果通过验证,则生成验证码,并通过运行脚本,让短信运营商向该手机号,发送该验证码,如果没通过验证,则返回错误信息 3.用户收到短信验证码以后,再次将所有信息post到后台. 4.后台验证各个数据,通过验证则完成实名制认证,如果没通过则返回错误信息. 总结,一次实名验证,需要两次ajax+post 二.对接短信商: 1.在云片网端: 1.注册云片网 地址:
-
Django用户身份验证完成示例代码
在这篇Django文章中,wom 将讨论Django User 验证,Django附带了一个用户认证系统. 它处理用户帐户,组,权限和基于cookie的用户会话. Django身份验证系统同时处理身份验证和授权. 简要地说,身份验证将验证用户是他们声称的身份,而授权则确定允许经过身份验证的用户执行的操作. 基本上,我们将创建登录,注销,忘记密码和重置密码功能. 身份验证支持在django.contrib.auth中为Django contrib模块.默认情况下,所需的配置已包含在django-a