django+echarts+ajax异步+显示优化--基本例子

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>&lt;</code><code>div</code>   <code>style</code><code>=</code><code>"height:300px;"</code><code>id</code><code>=</code><code>"echarts-line"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>##定义要显示的地方</code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"/static/js/echarts.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt; </code>

<code>#加载js</code>

<code>&lt;</code><code>script</code><code>&gt;</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>&lt;/</code><code>script</code><code>&gt;</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，如需转载请自行联系原作者