django+echarts+ajax异步+显示优化--基本例子-创新互联

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

成都创新互联专注于陇南企业网站建设,成都响应式网站建设,成都商城网站开发。陇南网站建设公司,为陇南等地区提供建站服务。全流程按需搭建网站，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

<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: '机柜总数'
            },
            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))

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。

分享题目：django+echarts+ajax异步+显示优化--基本例子-创新互联
分享路径：https://www.cdcxhl.com/article12/jigdc.html

成都网站建设公司_创新互联，为您提供商城网站、品牌网站设计、自适应网站、建站公司、域名注册、Google

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联