基于Django快速集成Echarts代碼示例
更新時(shí)間：2020年12月01日 08:56:30 作者：-零
這篇文章主要介紹了基于Django快速集成Echarts代碼示例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
1.在線定制下載echarts
https://echarts.apache.org/zh/builder.html
2.創(chuàng)建一個(gè)django項(xiàng)目或者在已有的項(xiàng)目
- 配置文件中確保數(shù)據(jù)庫配置、static配置、與添加項(xiàng)目名到INSTALLED_APPS下。
- 配置靜態(tài)文件目錄static，目錄下創(chuàng)建：css、img、js。
- 保存echarts.min.js到j(luò)s目錄下。
- 創(chuàng)建templates文件，html文件放到此目錄。
快速靜態(tài)測(cè)試
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準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
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):
"""
請(qǐng)求到來之后，都要執(zhí)行dispatch方法，dispatch方法根據(jù)請(qǐng)求方式不同觸發(fā) 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請(qǐng)求，響應(yīng)內(nèi)容')
def put(self, request, *args, **kwargs):
return Response('PUT請(qǐng)求，響應(yīng)內(nèi)容')
Views文件
訪問url地址：
django獲取數(shù)據(jù)庫中的數(shù)據(jù)傳遞給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">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
console.log(name)
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: {{ name|safe }}
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data:{{ data|safe }}
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
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):
"""
請(qǐng)求到來之后，都要執(zhí)行dispatch方法，dispatch方法根據(jù)請(qǐng)求方式不同觸發(fā) 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請(qǐng)求，響應(yīng)內(nèi)容')
def put(self, request, *args, **kwargs):
return Response('PUT請(qǐng)求，響應(yīng)內(nèi)容')
注意：我在views文件中直接返回?cái)?shù)據(jù)，在html模板中使用標(biāo)簽渲染，如果你需要使用ORM從數(shù)據(jù)庫拿數(shù)據(jù)，可以做如下操作：
wheelsList = Wheel.objects.all()
name = list(Wheel.objects.values_list('name', flat=True))
data = list(Wheel.objects.values_list('trackid', flat=True))
訪問url地址：
echarts異步更新數(shù)據(jù)
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):
"""
請(qǐng)求到來之后，都要執(zhí)行dispatch方法，dispatch方法根據(jù)請(qǐng)求方式不同觸發(fā) 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請(qǐng)求，響應(yīng)內(nèi)容')
def put(self, request, *args, **kwargs):
return Response('PUT請(qǐng)求，響應(yīng)內(nèi)容')
count = 1
class TestView1api(View):
def dispatch(self, request, *args, **kwargs):
"""
請(qǐng)求到來之后，都要執(zhí)行dispatch方法，dispatch方法根據(jù)請(qǐng)求方式不同觸發(fā) 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請(qǐng)求，響應(yīng)內(nèi)容')
def put(self, request, *args, **kwargs):
return Response('PUT請(qǐng)求，響應(yīng)內(nèi)容')
echarts異步加載+異步更新
在上個(gè)示例的基礎(chǔ)上，修改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;
// 基于準(zhǔn)備好的dom，初始化ECharts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
};
myChart.setOption(option, true);
// 異步加載json格式數(shù)據(jù)
$.getJSON('http://127.0.0.1:8080/test1_api/', function (data) {
myChart.setOption({
xAxis: {
data: data.name
},
series: [{
// 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列
data: data.data
}]
});
});
// ajax異步更新json格式數(shù)據(jù)
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Django與pyecharts結(jié)合的實(shí)例代碼
- Django中從mysql數(shù)據(jù)庫中獲取數(shù)據(jù)傳到echarts方式
- django echarts餅圖數(shù)據(jù)動(dòng)態(tài)加載的實(shí)例
- Django數(shù)據(jù)模型中on_delete使用詳解
- Django數(shù)據(jù)統(tǒng)計(jì)功能count()的使用
- 在pycharm中使用pipenv創(chuàng)建虛擬環(huán)境和安裝django的詳細(xì)教程
- Django 用戶認(rèn)證Auth組件的使用
- 使用django自帶的user做外鍵的方法
相關(guān)文章
這篇文章主要介紹了Django ORM 練習(xí)題及答案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
用Flask實(shí)現(xiàn)token登錄校驗(yàn)的解決方案
網(wǎng)站、小程序、APP 是否已經(jīng)登錄所代表的狀態(tài),代表一個(gè)概念是登錄態(tài), 我們常用的登錄態(tài)驗(yàn)證方式有cookie,session,token,token提供了另外一種不需要緩存賬戶和密碼的登錄狀態(tài)驗(yàn)證方式,本文給大家介紹了用Flask實(shí)現(xiàn)token登錄校驗(yàn)的解決方案,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了python Xpath語法的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
讓Python腳本暫停執(zhí)行的幾種方法(小結(jié))
這篇文章主要介紹了讓Python腳本暫停執(zhí)行的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
今天小編就為大家分享一篇解決python大批量讀寫.doc文件的問題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了python繪制云雨圖raincloud?plot，Raincloud的Python實(shí)現(xiàn)是一個(gè)名為PtitPrince的包，它寫在seaborn之上，這是一個(gè)Python繪圖庫，用于從pandas數(shù)據(jù)幀中獲取漂亮的繪圖2022-08-08
使用Python將Markdown格式轉(zhuǎn)為EPUB電子書格式的代碼實(shí)現(xiàn)
我們每天都會(huì)接觸到大量的文本內(nèi)容,無論是收藏的技術(shù)文檔、自己撰寫的筆記,還是網(wǎng)絡(luò)上的優(yōu)質(zhì)文章,都可能面臨閱讀體驗(yàn)不佳的問題,所以本文給大家介紹了使用Python將Markdown格式轉(zhuǎn)為EPUB電子書格式的實(shí)現(xiàn)方法,需要的朋友可以參考下2025-04-04
Jupyter Notebook中%time和%timeit的使用詳解
本文主要介紹了Jupyter Notebook中%time和%timeit的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
制作視頻的時(shí)候，多少需要一些搞怪的聲音？或者奇怪的聲音？音樂等等。一個(gè)個(gè)下載多慢，我們今天就用python實(shí)現(xiàn)批量下載！需要的可以參考一下2022-02-02
python+selenium+chrome實(shí)現(xiàn)淘寶購物車秒殺自動(dòng)結(jié)算
這篇文章主要介紹了python+selenium+chrome實(shí)現(xiàn)淘寶購物車秒殺自動(dòng)結(jié)算，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01