django+xadmin+echarts实现数据可视化

使用xadmin后功能比较强大，在后台展示统计图表，这个需求真的有点烫手，最终实现效果如下图：

xadmin后台与echarts完全融合遇到以下问题：

　　1.没有现成的数据model

　　2.获得指定时间段的数据

　　3.添加自定义菜单

　　4.图表不能在当前页展示（后台点击每个model都是内嵌在当前页）

　　5.echarts动态展示数据

下面解决第一个问题：

　　目前现状是得从一个千万级的大表里提取近12个月，近30天，近24小时3个时间维度的数据，同事建议使用中间表，于是乎建了3个。

　　model如下：

# 定义发送短信按小时统计模型类

class Count24(models.Model):

    alia_day_time = models.CharField(

        max_length=20,

        verbose_name='年月'

    )

    total_nums = models.IntegerField(

        default=0,

        verbose_name='发送总数'

    )

    error_nums = models.IntegerField(

        default=0,

        verbose_name='失败总数'

    )

    class Meta:

        verbose_name = verbose_name_plural = '短信发送按小时统计'

    def __str__(self):

        return '{0}: {1} {2}'.format(self.alia_day_time, self.total_nums,self.error_nums)

# 定义机构发送短信统计模型类

class OrganizationCount(models.Model):

    alia_month_time = models.CharField(

        max_length=20,

        verbose_name='年月'

    )

    alia_date_time = models.CharField(

        max_length=20,

        verbose_name='年月日'

    )

    total_nums = models.IntegerField(

        default=0,

        verbose_name='发送总数'

    )

    error_nums = models.IntegerField(

        default=0,

        verbose_name='失败总数'

    )

    name = models.CharField(

        max_length=50,

        verbose_name='机构',

    )

    class Meta:

        verbose_name = verbose_name_plural = '机构发送短信统计'

    def __str__(self):

        return '{0}: {1} {2} {3} {4} {5}'.format(self.id, self.alia_month_time,self.alia_date_time,self.total_nums, self.error_nums, self.name)

# 定义通道发送短信统计模型类

class ChannelCount(models.Model):

    alia_month_time = models.CharField(

        max_length=20,

        verbose_name='年月'

    )

    alia_date_time = models.CharField(

        max_length=20,

        verbose_name='年月日'

    )

    total_nums = models.IntegerField(

        default=0,

        verbose_name='发送总数'

    )

    error_nums = models.IntegerField(

        default=0,

        verbose_name='失败总数'

    )

    name = models.CharField(

        max_length=50,

        verbose_name='通道',

    )

    class Meta:

        verbose_name = verbose_name_plural = '通道发送短信统计'

    def __str__(self):

        return '{0}: {1} {2} {3} {4} {5}'.format(self.id, self.alia_month_time,self.alia_date_time, self.total_nums, self.error_nums, self.name)

　　sql查询如下（当然这样sql我是憋不出来的。。。）：

# 查询得到新表数据

SELECT req_time, alia_time, count(*) as total_nums, count(t.`status`=2 or null) as error_nums, name FROM

(select *, DATE_FORMAT(req_time,'%Y-%m') as alia_time, LEFT(body,LOCATE('】',body)) as name from sms_smslog

where LOCATE('】',body) >0

and LEFT(body,1)='【' ) as t GROUP BY alia_time , name;

# 插入新表【机构】

INSERT into sms_organizationcount (alia_month_time, alia_date_time, total_nums, error_nums, `name`)

SELECT alia_month_time, alia_date_time, count(*) as total_nums, count(t.`status`=2 or null) as error_nums, name FROM

(select *, DATE_FORMAT(req_time,'%Y-%m') as alia_month_time, DATE_FORMAT(req_time,'%Y-%m-%d') as alia_date_time,

 LEFT(body,LOCATE('】',body)) as name from sms_smslog

 where LOCATE('】',body) >0

and LEFT(body,1)='【' ) as t GROUP BY alia_date_time , name;

# 插入新表【通道】

INSERT into sms_channelcount (alia_month_time, alia_date_time, total_nums, error_nums, `name`)

SELECT alia_month_time, alia_date_time, count(*) as total_nums, count(t.`status`=2 or null) as error_nums, name FROM

(select *, DATE_FORMAT(req_time,'%Y-%m') as alia_month_time, DATE_FORMAT(req_time,'%Y-%m-%d') as alia_date_time, channel as name from sms_smslog ) as t GROUP BY alia_date_time , channel;

# 插入新表【24小时】

INSERT into sms_count24 (alia_day_time, total_nums, error_nums)

SELECT alia_day_time, count(*) as total_nums, count(t.`status`=2 or null) as error_nums FROM

(select *, DATE_FORMAT(req_time,'%Y-%m-%d %H') as alia_day_time from sms_smslog) as t GROUP BY alia_day_time;

　　这样数据雏形就出来了，数据肯定不能这样插入，dba也不会答应的，下一篇会详细解决这个问题。

下面解决第二个问题：

　　近12个月，近30天，近24小时，显然都是动态的。下面几个方法值得收藏下：

import time

from datetime import datetime, date, timedelta

# 生成近期多少天的日期

def gen_dates(end_date, days):

    day = timedelta(days=1)

    for i in range(days):

        yield (end_date - day * i)

# 生成近期多少小时

def gen_hour(end_date, hours):

    hour = timedelta(hours=1)

    for i in range(hours):

        yield (end_date - hour * i).strftime('%Y-%m-%d %H')

# 解决datetime类型不能序列化问题

class CJsonEncoder(json.JSONEncoder):

    def default(self, obj):

        if isinstance(obj, datetime):

            return obj.strftime('%Y/%m/%d %H:%M:%S')

        elif isinstance(obj, date):

            return obj.strftime('%Y/%m/%d')

        else:

            return json.JSONEncoder.default(self, obj)

# 生成近期12个月

def gen_months():

    now = datetime.now()

    today_year = now.year

    last_year = int(now.year) - 1

    today_year_months = range(1, now.month + 1)

    last_year_months = range(now.month + 1, 13)

    data_list_lasts = []

    for last_year_month in last_year_months:

        date_list = '%s-%s' % (last_year, last_year_month)

        data_list_lasts.append(date_list)

    data_list_todays = []

    for today_year_month in today_year_months:

        data_list = '%s-%s' % (today_year, today_year_month)

        data_list_todays.append(data_list)

    data_year_month = data_list_lasts + data_list_todays

    # data_year_month.reverse()

    return data_year_month

　　循环得到的时间list，拼接sql就可以查询到所需要的数据了。

下面解决第三个问题：

　　使用django来展示数据，主线一般是写视图，配路由，模板渲染。

　　a.写视图，获取数据逻辑上面写的差不多了，最终得返回echarts什么格式的数据

def msgsend_recent_30days_failed(request):

    # 获取近30天短信失败量

    con = Cache_data_to_redis().connection

    cursor = con.cursor()

    date_li, mon_li, data = [], [], {}

    end_date = datetime.now().date()

    # 获取近30天

    for i in gen_dates(end_date, 30):

        date_li.append(i)

    date_li = date_li[::-1]

    data['date_li'] = json.dumps(date_li, cls=CJsonEncoder)

    for i in date_li:

        sql = "SELECT error_nums as error from sms_organizationcount  where alia_date_time='{alia_date_time}';".format(alia_date_time=i)

        cursor.execute(sql)

        num = cursor.fetchone()

        if num == None:

            num = {}

            num['error'] = 0

        mon_li.append(num['error'])

    data['mon'] = mon_li

    return render(request, 'data_analysis/msgsend_recent_30days_failed.html', context=data)

#得到的数据如下：

{

    'date_li': '["2018/07/15", "2018/07/16", "2018/07/17", "2018/07/18", "2018/07/19", "2018/07/20", "2018/07/21", "2018/07/22", "2018/07/23", "2018/07/24", "2018/07/25", "2018/07/26", "2018/07/27", "2018/07/28", "2018/07/29", "2018/07/30", "2018/07/31", "2018/08/01", "2018/08/02", "2018/08/03", "2018/08/04", "2018/08/05", "2018/08/06", "2018/08/07", "2018/08/08", "2018/08/09", "2018/08/10", "2018/08/11", "2018/08/12", "2018/08/13"]',

    'mon': [0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

}

　　b.配路由，首先在xadmin后台添加自定义菜单

# app下的urls.py添加路由

url(r'^data_analysis/msgsend_recent_30days_failed/$', views.msgsend_recent_30days_failed, name='msgsend_recent_30days_failed'),

# adminx里面添加自定义菜单和url

class GlobalSetting(object):

    site_title = "短信后台管理系统"

    site_footer = "http://smsweb.corp.ncfgroup.com/xadmin"

    menu_style = "accordion"

    # 菜单

    def get_site_menu(self):

        return [

            {

                'title': '近期数据统计和分析',

                'perm': self.get_model_perm(SMSLog, 'view'),

                'icon': 'fa fa-bar-chart-o',

                'menus': (

                    {

                        'title': '短信整体情况',

                        # 写死的url进行替换

                        'url': self.get_model_url(SMSLog,'changelist').replace('xadmin/sms/smslog/','sms/data_analysis/msgsend_recent_24hours/'),

                        # 'url': 'http://10.17.20.86:8004/sms/data_analysis/msgsend_recent_24hours/',

                        'perm': self.get_model_perm(SMSLog, 'view'),

                        'icon': 'fa fa-smile-o'

                    },

                )

            }

        ]

xadmin.site.register(views.CommAdminView, GlobalSetting)

下面解决第四个问题：

　　这个问题重新描述下：点数据统计图表的时候会在当前页展示出来，要是想回到主页需要点后退，这样操作就很不舒服了。找到xadmin源码里对应菜单处，添加上a标签就可以解决这个比较尴尬的问题。

xadmin/templates/xadmin/includes/sitemenu_accordion.html最后一行上面加上：

<script>

    var anchors = document.getElementById("nav-panel-1").getElementsByTagName("a");

    for(i=0;i<anchors.length;i++){

        var anchor_item = anchors[i];

        anchor_item.setAttribute("target","_blank");

    }

</script>

下面解决最后一个问题：

使用echarms模板需要改动以下地方，

（1）使用sublink时，自动获取服务器host；

（2）x轴上的坐标原点可能不是紧挨着y轴，错位了一点，xAxis下面加上boundaryGap : false,

（3）title改成自己的

（4）x轴与y轴数据对应见下面完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>近30天通道短信情况</title>

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="lineMain" style="height:400px"></div>

<!-- ECharts单文件引入 -->

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

<script type="text/javascript">

    var target = {{ target|safe }}

// 路径配置

require.config({

　　paths: {

　　　　echarts: 'http://echarts.baidu.com/build/dist'

　　}

});

// 使用

require(

　　　　　　[

　　　　　　　　'echarts',

　　　　　　　　'echarts/chart/bar',

　　　　　　　　'echarts/chart/line'

　　　　　　],

　　　　　　drawEcharts

);

function drawEcharts(ec){

　　drawLine(ec);

}

function drawLine(ec){

　　var myLineChart = ec.init(document.getElementById('lineMain'));

    var date_li = {{ date_li|safe }}

    var num = {{ num|safe }}

    var sub = window.location.href.match('(.*)/(.*)/')[1];

    var sublink = sub + '/msgsend_recent_12months_channel/';

    // 动态push数据到series

    var series = [];

    for (var k = 0; k< target.length;k++){

        var item = {

            name:target[k],

            type:'line',

            data:num[k],

        };

        series.push(item);

    };

　　var option2 = {

　　　　title : {

　　　　text: '近30天渠道短信情况',

        subtext: '近12个月渠道短信情况',

        sublink: sublink,

　　},

　　tooltip : {

　　　　trigger: 'axis'

　　},

    grid:{

        y2: 80

    },

　　legend: {

        orient: 'horizontal',

        y:  'bottom',

        data:target,

　　},

　　toolbox: {

　　　　show : true,

　　　　feature : {

　　　　　　mark : {show: true},

　　　　　　dataView : {show: true, readOnly: false},

　　　　　　magicType : {show: true, type: ['line', 'bar']},

　　　　　　restore : {show: true},

　　　　　　saveAsImage : {show: true}

　　　　}

　　},

　　calculable : true,

　　xAxis : [

　　　　{

　　　　　　type : 'category',

　　　　　　boundaryGap : false,

　　　　　　data : date_li

　　　　}

　　],

　　yAxis : [

　　　　{

　　　　　　type : 'value',

　　　　}

　　],

　　series : series,

};

myLineChart.setOption(option2,true);

}

</script>

</body>

</html>

巴特西

django+xadmin+echarts实现数据可视化

最新文章

热门文章