文章詳情頁

基于Django快速集成Echarts代碼示例

瀏覽：11日期：2024-09-15 17:01:19

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>  {% load static %} <script src='http://www.aoyou183.cn/bcjs/{% static ’/js/echarts.min.js’ %}'></script></head><body>  <div 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 pathfrom app.views import TestViewurlpatterns = [ path(’test/’,TestView.as_view()),]

Views文件

from django.shortcuts import renderfrom rest_framework.views import Viewfrom rest_framework.response import Responseclass 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快速集成Echarts代碼示例

django獲取數(shù)據(jù)庫中的數(shù)據(jù)傳遞給echarts

test1.html

<!DOCTYPE html><html><head> <meta charset='utf-8'> <title>ECharts</title>  {% load static %} <script src='http://www.aoyou183.cn/bcjs/{% static ’/js/echarts.min.js’ %}'></script></head><body> <div 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 pathfrom app.views import TestView1urlpatterns = [ path(’test1/’,TestView1.as_view()),]

Views文件

from django.shortcuts import renderfrom rest_framework.views import Viewfrom rest_framework.response import Responseclass 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地址：

基于Django快速集成Echarts代碼示例

echarts異步更新數(shù)據(jù)

test2.html文件

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title>  <script src='http://code.jquery.com/jquery-latest.js'></script>  {% load static %} <script src='http://www.aoyou183.cn/bcjs/{% static ’/js/echarts.min.js’ %}'></script></head><body> <div 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 pathfrom app.views import TestView,TestView1,TestView1apiurlpatterns = [ path(’test2/’,TestView1.as_view()), path(’test1_api/’,TestView1api.as_view()),]

View文件

from django.shortcuts import renderfrom rest_framework.views import Viewfrom rest_framework.response import Responsefrom django.http import HttpResponseclass 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 = 1class 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)容’)

基于Django快速集成Echarts代碼示例

echarts異步加載+異步更新

在上個(gè)示例的基礎(chǔ)上，修改test2.html如下：

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title>  <script src='http://code.jquery.com/jquery-latest.js'></script>  {% load static %} <script src='http://www.aoyou183.cn/bcjs/{% static ’/js/echarts.min.js’ %}'></script></head><body> <div 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í)有所幫助，也希望大家多多支持好吧啦網(wǎng)。

Django

上一條：Django集成MongoDB實(shí)現(xiàn)過程解析下一條：Django數(shù)據(jù)模型中on_delete使用詳解

相關(guān)文章：

1. ASP基礎(chǔ)入門第三篇(ASP腳本基礎(chǔ))2. 詳解CSS不定寬溢出文本適配滾動(dòng)3. Python實(shí)現(xiàn)查找數(shù)據(jù)庫最接近的數(shù)據(jù)4. python中if嵌套命令實(shí)例講解5. 使用css實(shí)現(xiàn)全兼容tooltip提示框6. CSS自定義滾動(dòng)條樣式案例詳解7. Java之JSP教程九大內(nèi)置對(duì)象詳解(中篇)8. PHP與已存在的Java應(yīng)用程序集成9. 使用ProcessBuilder調(diào)用外部命令，并返回大量結(jié)果10. python b站視頻下載的五種版本

排行榜

					
					python中if嵌套命令實(shí)例講解
使用ProcessBuilder調(diào)用外部命令，并返回大量結(jié)果
ASP基礎(chǔ)入門第三篇(ASP腳本基礎(chǔ))
使用css實(shí)現(xiàn)全兼容tooltip提示框
Python實(shí)現(xiàn)查找數(shù)據(jù)庫最接近的數(shù)據(jù)
Java之JSP教程九大內(nèi)置對(duì)象詳解(中篇)
CSS自定義滾動(dòng)條樣式案例詳解
詳解CSS不定寬溢出文本適配滾動(dòng)
PHP與已存在的Java應(yīng)用程序集成
如何用python插入獨(dú)創(chuàng)性聲明
SpringBoot快速集成jxls-poi(自定義模板,支持本地文件導(dǎo)出,在線文件導(dǎo)出)
				