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

<divid="echarts-line"></div>##定义要显示的地方<scriptsrc="/static/js/echarts.min.js"></script>#加载js<script>$(function(){varserver_info;varmyChart=echarts.init(document.getElementById('echarts-line'));varoption={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")defshow(request):##展示第一次访问返回一个数据name_id=models.JiguiInfo.objects.filter(id__gt=0)name=[]jq=[]foriinname_id:name.append(i.name)jq.append(i.jq)ret={'name':name,'jq':jq}returnrender(request,'jigui/show.html',{'name':name,'jq':jq})@login_required(login_url="/login.html")defshowapi(request):##展示API返回数据name_id=models.JiguiInfo.objects.filter(id__gt=0)name=[]jq=[]foriinname_id:name.append(i.name)jq.append(i.jq)ret={'name':name,'jq':jq}returnHttpResponse(json.dumps(ret))