基於Django快速整合Echarts程式碼示例
阿新 • • 發佈：2020-12-02
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,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,**kwargs)
def get(self,**kwargs):
return render(request,"test.html")
def post(self,**kwargs):
return Response('POST請求，響應內容')
def put(self,**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 入門示例'
},legend: {
data: ['銷量']
},xAxis: {
data: {{ name|safe }}
},series: [{
name: '銷量',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,**kwargs):
name = ["襯衫","襪子"]
data = [56,40,54,23,12,31]
return render(request,"test1.html",{"name":name,"data":data})
def post(self,**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 入門示例'
},xAxis: {
data: {{ name | safe }}
},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/',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,"test2.html",**kwargs):
return Response('PUT請求，響應內容')
count = 1
class TestView1api(View):
def dispatch(self,**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,**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 入門示例'
},legend: {
data: ['銷量']
},xAxis: {
data: []
},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',2000);
window.onresize = function () {
myChart.resize();
};
});
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。