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

# 定义发送短信按小时统计模型类
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)

# 查询得到新表数据
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;

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

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]
}

# 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)

<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>

<!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>