django存储光交业务管理系统-菜鸟开发日记第10节-业务图表

作者: python菜鸟 | 来源:发表于2018-05-04 11:07 被阅读150次

django存储光交业务管理系统-菜鸟开发日记第10节-业务图表
django存储光交业务管理系统-菜鸟开发日记第11节-结束及总
django存储光交业务管理系统-菜鸟开发日记第二节-pyhon
django存储光交业务管理系统-菜鸟开发日记第九节-系统开发遇
django存储光交业务管理系统-菜鸟开发日记第三节-系统初步分
django存储光交业务管理系统-菜鸟开发日记第六节-系统的架构
django开发之存储光交业务管理系统-菜鸟的开发日记-第一节-
django存储光交业务管理系统-菜鸟开发日记第四节-光交数据库
django存储光交业务管理系统-菜鸟开发日记第五节-存储数据库
django存储光交业务管理系统-菜鸟开发日记第七节-程序的启动

客户需求分析<情况完成打勾:

[x] 需要获取所有部门的主机使用率，存储使用量，每个月的规划情况
[x] 实时展示每个部门的业务情况，主机情况，等等
[x] 需要通过图表的方式展示。

计划完成情况:

计划时间

大致前端情况如下(使用bootstrap+echarts):

基于部门，业务，整体情况展示

选择部门，或者业务信息

整体情况展示：

获取一共使用啦多少主机
展示今年每个月的规划情况
- 获取当年每个月的存储规划情况
展示业务详细分配情况
- 需要获取所有的部门信息
- 需要获取每个部门已经使用啦多少存储空间，及该部门使用的主机数量

部门业务展示

显示该部门一共使用啦多台主机
显示今年每个月该部门的规划情况
- 收集通过部门获取信息。
显示该部门所有的业务情况
- 展示该部门所有的业务情况，使用的容量，及该业务使用的主机数量

由于显示的数据量计算周期比较长，采用ajax异步进行获取。

图表采用echarts进行展示模版。

使用模版如下:

        var myChart = echarts.init(document.getElementById('zengzqingk'));
        optionss = {
            title : {   #标题
                text: '2018年规划情况',
                subtext: '容量:(GB)'
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            toolbox: {  #工具箱
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [  #x坐标
                {
                    type : 'category',
                    data : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [#y坐标
                {
                    type : 'value'
                }
            ],
            series : [#数据
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    data:[]
                }
            ]
        };
        myChart.setOption(optionss);#注册图表

通过异步获取的方式对echarts进行更改。

大致模版如下：


myChart.showLoading({
    text: '正在努力的读取数据中...',    //loading话术
});
$.ajax({
    url: "{% url "storage_guihua_ajax" %}",
    type: 'POST',
    success: function(data){
        var obj = JSON.parse(data);
        if(obj.status){
            myChart.setOption(
                {
                    title : {
                        text: '2018年存储规划情况',
                        subtext: '容量:(GB)'
                    },
                    series : [
                        {
                            name:'存储使用容量',
                            type:'bar',
                            barWidth: '60%',
                            data:obj.monthdata#每个月的数据量
                        }
                    ]
                }
            )
        }
    });
});
myChart.hideLoading();  #等待异步获取成功后显示数据

最终展示效果：