Django项目实战总结一

function ajax_submit() {
    $.ajax({
        //url: "{% url 'GetIndex' %}",
        url:"/index/",
        type: "GET",
        data: {},
        success: function (arg) {
            //alert(arg.length)
            var o = $('#show_df_data')
            o.empty()
            var x = 0;
            for (var i=0; i<arg.length;i++){
                x = eval("("+arg[i]+")")
                $('#show_df_data').append('<A>'+x.system+'</A> <B>'+x.size+'</B> <C>'+x.used+'</C> <D>'+x.avail+'</D> <E>'+x.use+'</E> <F>'+x.mounted_on+'</F>')
            }
        }
    })
}

<script src="../../static/js/jquery-3.3.1.js"></script>
<script language="JavaScript">
setTimeout('ajax_submit()', 10);
</script>
<script language="JavaScript"> function myrefresh(){
    ajax_submit();
    setTimeout('myrefresh()', 10000);
}
setTimeout('myrefresh()', 30000);
</script>

先加载页面，在异步请求数据到页面；并实现实现自动和定时刷新页面

class IndexView(View):
    def get(self, request):
        if not request.is_ajax():
            return render(request,'index.html',{})
        else:
            dh_infos = get_dh_infos()
            res = []
            for dh_info in dh_infos:
                res.append(json.dumps(dh_info._asdict()))
            return HttpResponse(json.dumps(res), content_type="application/json")

需要序列化数据为json格式，前台去处理json

2.使用echarts

1设置容器
<p id="mainAnaylsis" style="width:750px;height:500px;"></p>

2.使用echart
function showTable(data) {
	var myChart = echarts.init(document.getElementById("mainAnaylsis"));
	var option ={xAxis:"",yAxis:"",series:[{}]} //从官网看api
	loadData(option);'''function {$.ajax(
		var result = "";
		data = JSON.parse(result);//data传入option->series->data)}'''
	myChart.setOption(option);
}

异步echart

function showTable() {
    //$('#mainAnaylsis').empty()
    var myChart = echarts.init(document.getElementById("mainAnaylsis"));
    myChart.showLoading();
    var option = {
    ]
};

    $.ajax({
        url:"zbbix_data",
        type: "GET",
        data: {},
        success: function (arg) {
            var x = 0;
            for (var i=0; i<arg.length; i++){
                x = eval("("+arg[i]+")");
                option.series[0].data.push({name:x.time,value:[x.time,x.value]});
                option.series[1].data.push({name:x.time,value:[x.time,x.ns]});
            }
            myChart.hideLoading();
            myChart.setOption(option);//怀疑js内存控制原因，ajax放在另外函数里面，setOption总是不生效
        }
    })
 }

设置可过滤的图表

    legend: {
        data:['ns值']
    },

设置图间距

    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },

设置其他图表格式等外部功能

    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },

设置标签的格式和内容的展示

    xAxis: {
        type:'category',
        spiltLine:{
            show:true
        },
        data:[],
        axisLabel:{
            interval:3,
            rotate:40,
            formatter: function (params) {
                //console.log(params);
                //var date = Date.parse(params.toString());
                var date = new Date(params.toString().replace(/-/g,"/"));
                //console.log(date.getHours());
                return date.getHours()+':'+date.getMinutes();
            },
        },
    },

设置数据及加载的样式

    series: [
        {
            name:'ns值',
            type:'line',
            step: 'start',
            stack: '总量',
            data:[]
        },
    ]

3.使用zbbix数据库

class ZabbixDataView(View):
    def get(self, request):
        if request.is_ajax():
            infos = show_test()
            # infos = map(lambda x: x[1].strftime('%Y-%m-%d %H:%M:%S'), infos)#元组，使用map会失败
            # infos = map(lambda x:json.dumps(x), infos)
            ZB_Info = namedtuple('ZB_Info', ['itemid', 'time', 'value', 'ns']) #使用命名元组序列化数据
            res = []
            for info in infos:
                # _,t,*arg=info[1].strftime('%Y-%m-%d %H:%M:%S')
                res.append(json.dumps(ZB_Info(info[0], info[1].strftime('%Y-%m-%d %H:%M:%S'), info[2], info[3])._asdict()))//元组或者list转json
            return HttpResponse(json.dumps(res), content_type="application/json")