开发者社区> 余二五> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

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 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 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框架入门
Django框架入门
12 0
Django框架之ORM
Django框架之ORM
33 0
Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战
Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战
419 0
【愚公系列】2022年04月 Python教学课程 61-Django框架Resful接口
【愚公系列】2022年04月 Python教学课程 61-Django框架Resful接口
34 0
Django框架进阶(大型施工现场。。)
路由是关联URL及其处理函数关系的过程 settings.py文件中ROOT_URLCONF变量指定全局路由文件名称
44 0
Django框架基础(大型施工现场。。)
一.Django简介与安装 Win平台: “以管理员身份运行”cmd,执行 pip install django 1.Django库的小测和版本
30 0
Django框架入门
Django框架入门
54 0
django框架
http://zh.wikipedia.org/wiki/Django http://www.
608 0
4款基于Django框架的开源软件推荐
Django是一款高性能的Python web框架,鼓励快速开发和干净、务实的设计。Django项目是一个定制框架,它源自一个在线新闻Web站点,于2005年以开源的形式被释放出来。Django的重点是尽可能地自动化,坚持DRY原则。
3052 0
+关注
20376
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载