基于Django快速集成Echarts代码示例
作者：-零 发布时间：2021-12-10 18:53:32
标签：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>
来源：https://www.cnblogs.com/-wenli/p/13368215.html
0
投稿猜你喜欢
写在前面在用pd.read_csv读取数据集时，我有2个疑问？1是：写相对路径还是绝对路径。2是：相对路径，绝对路径怎么写。这篇文章就是解决- 场景在 Go 语言中，常量分为有类型常量和无类型常量。// 有类型常量const VERSION string = "v1.0.0
- 1、字典的概念Python中的字典数据类型和现实中的字典很像，它是以键值对（键和值的组合）的方式把数据组织到一起，可以通过键找到与之对应的值
- Queue模块保持线程同步利用Queue对象先进先出的特性，将每个生产者的数据一次存入队列，而每个消费者将依次从队列中取出数据import
- 正则表达式的介绍1)在实际开发过程中经常会有查找符合某些复杂规则的字符串的需要，比如:邮箱、手机号码等，这时候想匹配或者查找符合某些规则的字
- 本文实例讲述了Zend Framework教程之资源(Resources)用法。分享给大家供大家参考，具体如下：Zend_Applicati
- 通常来说，javascript中的对象就是一个指向prototype的指针和一个自身的属性列表。javascript创建对象时采用了写时复制
- 本文实例讲述了python统计文本字符串里单词出现频率的方法。分享给大家供大家参考。具体实现方法如下：# word frequency in
- 首先是不知道怎么忽然mysql用命令行，workbench都登录不了，都提示'Access denied for user '
- 问题描述：已有的model，修改之后，想重新建模，于是将migrations文件夹中除__init__.py之外其他文件都删掉，再次执行以下
- 一 pandas DataFrame一列赋值问题说明，把b的列赋值给a情况1：a,b index设置相同如下代码import pandas
- 这是初始状态 输入文字变成这样，这里会区分圆角半角，2个半角的文字算一个。 这个是超出的样子 如果超出了点击提
- mysql数据库版本从5.6.28升到8.0.11过程中部署项目时遇到的问题和解决方法，具体介绍如下所示：首先这个项目用到了hibernat
- 现在有这样一个需求，内网有一个数据库服务，需要将外网的数据库导入到内网数据库。将外网的数据库导出sql文件有700MB+,用MySQL自带的
- 虽然python是万能的，但是对于某些特殊功能，需要c语言才能完成。这样，就需要用python来调用c的代码了具体流程：c编写相关函数 ，编
- 1.利用装饰器在视图中拦截未登录的url@login_required(login_url='/user/login/')d
- 我们都知道在函数中定义的局部变量在声明他的函数体以及其嵌套的函数内始终是有定义的，并且在函数的作用域链上始终会有个对象指向全局对象，使函数能
- 不难，代码总共也就25行，大致逻辑如下。总共分为是下面两步在云服务器上部署自定义消息处理服务这里需要我们自定义来处理用户发送过来的消息首先导
- 第一种 #This File was made using the WinMySQLAdmin 1.4 Tool #2004-2-23 16
- 概述前段时间突然发现，我之前对git stash的使用都是错误的。具体说来，我是这么使用的：在远端有新的提交，需要git pull来拉取合并
