django+echarts+ajax異步+顯示優化--基本例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<code><</code><code>div</code> <code>style</code><code>=</code><code>"height:300px;"</code><code>id</code><code>=</code><code>"echarts-line"</code><code>></</code><code>div</code><code>></code>
<code>##定義要顯示的地方</code>
<code><</code><code>script</code> <code>src</code><code>=</code><code>"/static/js/echarts.min.js"</code><code>></</code><code>script</code><code>> </code>
<code>#加載js</code>
<code><</code><code>script</code><code>></code>
<code> </code><code>$(function () {</code>
<code> </code><code>var server_info;</code>
<code> </code><code>var myChart = echarts.init(document.getElementById('echarts-line'));</code>
<code> </code><code>var option = {</code>
<code> </code><code>title: {</code>
<code> </code><code>text: '機櫃總數'</code>
<code> </code><code>},</code>
<code> </code><code>tooltip: {},</code>
<code> </code><code>legend: {</code>
<code> </code><code>data:['總數']</code>
<code> </code><code>xAxis: {</code>
<code> </code><code>data: {{ name | safe }} ##第一次通路頁面時，先從後端傳回一個最新的資料，這樣子就不會需要人們等着更新資料。</code>
<code> </code><code>yAxis: {},</code>
<code> </code><code>series: [{</code>
<code> </code><code>name: '銷量',</code>
<code> </code><code>type: 'bar',</code>
<code> </code><code>data: {{ jq | safe }} ##第一次通路頁面時，先從後端傳回一個最新的資料</code>
<code> </code><code>}]</code>
<code> </code><code>};</code>
<code> </code><code>myChart.setOption(option, true);</code>
<code>{# myChart.showLoading();#} ## echarts 的顯示加載頁面</code>
<code> </code><code>setInterval( function () { ##AJAX去擷取資料通過showapi</code>
<code> </code><code>$.ajax({</code>
<code> </code><code>type: 'GET',</code>
<code> </code><code>url: '/jigui/showapi',</code>
<code> </code><code>dataType: 'json',</code>
<code> </code><code>success: function (json) {</code>
<code> </code><code>server_info = eval(json);</code>
<code> </code><code>}</code>
<code> </code><code>});</code>
<code> </code><code>option.xAxis.data = server_info.name; ##指派</code>
<code> </code><code>option.series[0].data = server_info.jq;</code>
<code>{# myChart.hideLoading();#} ## echarts 的隐藏加載頁面</code>
<code> </code><code>myChart.setOption(option, true);</code>
<code> </code><code>}, 2000); ##每隔2秒 擷取一次，重新生成值</code>
<code> </code><code>window.onresize = function () {</code>
<code> </code><code>myChart.resize(); ##根據頁面大小重新定義圖形大小</code>
<code> </code><code>});</code>
<code></</code><code>script</code><code>></code>
<code>@login_required</code><code>(login_url</code><code>=</code><code>"/login.html"</code><code>)</code>
<code>def</code> <code>show(request): </code><code>## 展示 第一次通路傳回一個資料 </code>
<code> </code><code>name_id </code><code>=</code> <code>models.JiguiInfo.objects.</code><code>filter</code><code>(id__gt</code><code>=</code><code>0</code><code>)</code>
<code> </code><code>name </code><code>=</code> <code>[]</code>
<code> </code><code>jq </code><code>=</code> <code>[]</code>
<code> </code><code>for</code> <code>i </code><code>in</code> <code>name_id:</code>
<code> </code><code>name.append(i.name)</code>
<code> </code><code>jq.append(i.jq)</code>
<code> </code>
<code> </code><code>ret </code><code>=</code> <code>{</code><code>'name'</code><code>: name, </code><code>'jq'</code><code>: jq}</code>
<code> </code><code>return</code> <code>render(request, </code><code>'jigui/show.html'</code><code>,{</code><code>'name'</code><code>:name,</code><code>'jq'</code><code>:jq})</code>
<code>def</code> <code>showapi(request): </code><code>## 展示 API傳回資料</code>
<code> </code><code>ret</code><code>=</code><code>{</code><code>'name'</code><code>:name,</code><code>'jq'</code><code>:jq}</code>
<code> </code><code>return</code> <code>HttpResponse(json.dumps(ret))</code>
本文轉自 295631788 51CTO部落格，原文連結：http://blog.51cto.com/hequan/1954409，如需轉載請自行聯系原作者
![json擷取資料的三種方式[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)