django+echarts+ajax异步+显示优化--基本例子-阿里云开发者社区

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

2017-11-15 3230

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

+关注继续查看

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))

本文转自 295631788 51CTO博客，原文链接：http://blog.51cto.com/hequan/1954409，如需转载请自行联系原作者