本文共 1966 字，大约阅读时间需要 6 分钟。
django+echarts+ajax异步+显示优化--基本例子
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | < 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 > |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | @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)) |