django+echarts+ajax非同步+顯示最佳化--基本例子

標籤：ajax   django   echarts   

django+echarts+ajax非同步+顯示最佳化--基本例子

<div   style="height:300px;"id="echarts-line"></div>##定義要顯示的地方<script src="/static/js/echarts.min.js"></script> #載入js<script>    $(function () {        var server_info;        var myChart = echarts.init(document.getElementById(‘echarts-line‘));        var option = {            title: {                text: ‘機櫃總數‘            },            tooltip: {},            legend: {                data:[‘總數‘]            },            xAxis: {                data: {{ name  | safe }}    ##第一次訪問頁面時，先從後端返回一個最新的資料，這樣子就不會需要人們等著更新資料。            },            yAxis: {},            series: [{                name: ‘銷量‘,                type: ‘bar‘,                data: {{ jq | safe }} ##第一次訪問頁面時，先從後端返回一個最新的資料            }]        };        myChart.setOption(option, true);{#        myChart.showLoading();#}   ## echarts 的顯示載入頁面        setInterval( function () {     ##AJAX去擷取資料通過showapi                $.ajax({                    type: ‘GET‘,                    url: ‘/jigui/showapi‘,                    dataType: ‘json‘,                    success: function (json) {                        server_info = eval(json);                    }                });                    option.xAxis.data =  server_info.name;   ##賦值                    option.series[0].data = server_info.jq;{#                    myChart.hideLoading();#}   ## echarts 的隱藏載入頁面                    myChart.setOption(option, true);                }, 2000);  ##每隔2秒 擷取一次，重建值         window.onresize = function () {            myChart.resize();      ##根據頁面大小重新定義圖形大小        };    });</script>

@login_required(login_url="/login.html")def show(request):  ## 展示         第一次訪問返回一個資料             name_id = models.JiguiInfo.objects.filter(id__gt=0)    name = []    jq = []    for i in name_id:        name.append(i.name)        jq.append(i.jq)        ret = {‘name‘: name, ‘jq‘: jq}        return render(request, ‘jigui/show.html‘,{‘name‘:name,‘jq‘:jq})@login_required(login_url="/login.html")def showapi(request):  ## 展示    API返回資料    name_id = models.JiguiInfo.objects.filter(id__gt=0)    name = []    jq = []    for i in name_id:        name.append(i.name)        jq.append(i.jq)        ret={‘name‘:name,‘jq‘:jq}    return  HttpResponse(json.dumps(ret))

本文出自 “何全” 部落格，請務必保留此出處http://hequan.blog.51cto.com/5701886/1954409

django+echarts+ajax非同步+顯示最佳化--基本例子