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，如需转载请自行联系原作者

django+echarts+ajax异步+显示优化--基本例子相关推荐

mvc js ajax实例,MVC ajax异步上传文件例子(ajaxFileUpload)
[实例简介] [实例截图] [核心代码] $(function () { $(":button").click(function () { if ($("#file1&q ...
python django异步访问_初试Ajax异步请求（基于Django框架）
概要: Ajax异步请求数据之前就听朋友提起过,但是之前一直没有什么机会使用这个技术,就没有去了解,后面在做网站评论这一功能时,为了使用户评论之后不用刷新网页就能够看到刚刚评论的数据,所以决定使用Aj ...
Ajax异步调用Web服务的例子
我这里是看的Dflying Chen的使用ASP.NET AJAX异步调用Web Service和页面中的类方法的一系列文章写出来的例子. 请Dflying Chen别介意.例子中没有最后一篇文章的的 ...
.ajax显示加载动画,jQuery Ajax 加载数据时异步显示加载动画
ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码在js脚本文件中首先把这个图片动画隐藏代码如下 $(document).ready(function () { $(" ...
Echarts 表格通过ajax异步请求实现动态赋值（分析同比环比的实现）
Echarts 表格通过ajax异步请求实现动态赋值(分析同比环比的实现) 对于ElementUI中使用ECharts在上一篇文章中已经说明具体使用方法一.效果图:(以每一个月的工业产值为例) 我们 ...
echarts 玫瑰图比例太小显示优化
echarts 玫瑰图比例太小显示优化 1.效果图 2.实现思路 3.代码选择了 echarts 做大数据统计,但是由于统计数据的差异太大,数据特别小的时候,使用玫瑰图展示会造成看不清楚扇区的问题, ...
echarts力导向图节点连线动画_D3.js 力导向图的显示优化（二）- 自定义功能
摘要: 在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能:Nebula Graph 图探索的删除节点和缩放功能前言在上篇文章中(D ...
JavaWeb音乐网站开发：Ajax异步获取歌词文件并显示，以及实现音频与歌词对应同步的方法
在开发音乐网站或APP的时候,都必须要面对这一个问题:如何让正在播放的歌曲的歌词与音频对应?也就是歌曲正在唱哪一句对应显示这一句的歌词?这便是今天这篇博客主要谈论的主题,先抛开爬虫爬取这一说,今天讲的 ...
ajax显示加载动画,jQuery Ajax 加载数据时异步显示加载动画
jQuery Ajax 加载数据时异步显示加载动画 ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码在js脚本文件中首先把这个图片动画隐藏代码如下 $(document).re ...

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

django+echarts+ajax异步+显示优化--基本例子相关推荐

最新文章

热门文章