django+echarts+ajax異步+顯示優(yōu)化--基本例子

成都創(chuàng)新互聯(lián)專注于隴南企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設,成都商城網(wǎng)站開發(fā)。隴南網(wǎng)站建設公司,為隴南等地區(qū)提供建站服務。全流程按需搭建網(wǎng)站，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

<div   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: '機柜總數(shù)'
            },
            tooltip: {},
            legend: {
                data:['總數(shù)']
            },
            xAxis: {
                data: {{ name  | safe }}    ##第一次訪問頁面時，先從后端返回一個最新的數(shù)據(jù)，這樣子就不會需要人們等著更新數(shù)據(jù)。
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: {{ jq | safe }} ##第一次訪問頁面時，先從后端返回一個最新的數(shù)據(jù)
            }]
        };
        myChart.setOption(option, true);

{#        myChart.showLoading();#}   ## echarts 的顯示加載頁面
        setInterval( function () {     ##AJAX去獲取數(shù)據(jù)通過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();      ##根據(jù)頁面大小重新定義圖形大小
        };
    });

</script>

@login_required(login_url="/login.html")
def show(request):  ## 展示         第一次訪問返回一個數(shù)據(jù)         
    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返回數(shù)據(jù)
    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))

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡助力業(yè)務部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統(tǒng)配攻擊溯源，準確進行流量調(diào)度，確保服務器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務器買多久送多久。

分享題目：django+echarts+ajax異步+顯示優(yōu)化--基本例子-創(chuàng)新互聯(lián)
分享路徑：http://www.chinadenli.net/article12/jigdc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、品牌網(wǎng)站設計、自適應網(wǎng)站、建站公司、域名注冊、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)