【Django-meetings】dashboard制作热力图-20220930

背景：

利用echarts来制作dashboard的热力图。

views.py

# 定义全局函数dashboard_map_day
def count_heatmap_day(classroom_name,query_date='2022-07-13'):
    
    # 查出query_date所在的周一到周日的日期（# 周一为第一天）
    # today = dt.date.today()
    today1 = query_date
    today = dt.datetime.strptime(str(today1),"%Y-%m-%d")
    print('query_date',query_date)
    week_start_date = today - dt.timedelta(days=today.weekday())
    week_end_date = today + dt.timedelta(days=6-today.weekday())
    week_Monday = week_start_date
    week_Tuesday = week_start_date + dt.timedelta(days=1)
    week_Wednesday = week_start_date + dt.timedelta(days=2)
    week_Thursday = week_start_date + dt.timedelta(days=3)
    week_Friday = week_start_date + dt.timedelta(days=4)
    week_Saturday = week_start_date + dt.timedelta(days=5)
    week_Sunday = week_end_date
    # print('week_start = {}\nweek_end = {}'.format(week_start_date,week_end_date))
    source = []



    # 日期和Hour参数范围
    hours_range = ['8:00', '8:30', '9:00', '9:30','10:00', '10:30', '11:00','11:30',
        '12:00', '12:30', '13:00', '13:30','14:00', '14:30', '15:00','15:30', 
        '16:00', '16:30', '17:00', '17:30','18:00', '18:30', '19:00','19:30',
        '20:00','20:30',
        ]
    week_range = [week_Sunday, week_Saturday, week_Friday, week_Thursday, week_Wednesday, week_Tuesday, week_Monday, ]



    # 按照周一到周日的日期查询教室借定情况
    if classroom_name:
        for j in range(len(week_range)):
             for i in range(len(hours_range)):
                fenzi_week_someday = booking_all.filter(Q(booking_classroom_name__contains=classroom_name) & Q(booking_date=week_range[j]) & Q(booking_start_time__lte=hours_range[i]) & Q(booking_end_time__gte=hours_range[i]) & Q(booking_approve_Y_N='Y')).count()
                # print([j,i,fenzi_week_someday])
                source.append([j,i,fenzi_week_someday])
    else:
        for j in range(len(week_range)):
             for i in range(len(hours_range)):
                fenzi_week_someday = booking_all.filter(Q(booking_date=week_range[j]) & Q(booking_start_time__lte=hours_range[i]) & Q(booking_end_time__gte=hours_range[i]) & Q(booking_approve_Y_N='Y')).count()
                # print([j,i,fenzi_week_someday])
                source.append([j,i,fenzi_week_someday])


    # 返回值
    # print('source',source)
    return source



@login_required
def dashboard_map_day(request):
    # 验证权限
    hr_permission = request.user.has_perm('myclassroom.add_classpermission')
    print('hr_permission',hr_permission)

    # 获取日期筛选数据
    now_today = dt.date.today()
    classroom_name = request.POST.get('classroom_name', '')
    paradata = request.POST.get('paradata', now_today)
    if paradata=='':
        paradata = now_today
    else:
        pass
    print('paradata',paradata)


    # 获取source数据
    # source=[[0, 0, 0], [0, 1, 0], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 0], [0, 12, 0],[0, 13, 0], [0, 14, 0], [0, 15, 0], [0, 16, 0], [0, 17, 0], [0, 18, 0], [0, 19, 0], [0, 20, 0], [0, 21, 0], [0, 22, 0], [0, 23, 0], [0, 24, 0], [0, 25, 0], 
    #         [1, 0, 0], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 0], [1, 11, 0], [1, 12, 0], [1, 13, 0], [1, 14, 0], [1, 15, 0], [1, 16, 0], [1, 17, 0], [1, 18, 0], [1, 19, 0], [1, 20, 0], [1, 21, 0], [1, 22, 0], [1, 23, 0], [1, 24, 0], [1, 25, 0],
    #         [2, 0, 0], [2, 1, 0], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 0], [2, 11, 0], [2, 12, 0], [2, 13, 0], [2, 14, 0], [2, 15, 0], [2, 16, 0], [2, 17, 0], [2, 18, 0], [2, 19, 0], [2, 20, 0], [2, 21, 0], [2, 22, 0], [2, 23, 0], [2, 24, 0], [2, 25, 0],
    #         [3, 0, 0], [3, 1, 0], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 0], [3, 9, 0], [3, 10, 0], [3, 11, 0], [3, 12, 0], [3, 13, 0], [3, 14, 0], [3, 15, 0], [3, 16, 0], [3, 17, 0], [3, 18, 0], [3, 19, 0], [3, 20, 0], [3, 21, 0], [3, 22, 0], [3, 23, 0], [3, 24, 0], [3, 25, 0],
    #         [4, 0, 0], [4, 1, 0], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 0], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 0], [4, 10, 0], [4, 11, 0], [4, 12, 0], [4, 13, 0], [4, 14, 0], [4, 15, 0], [4, 16, 0], [4, 17, 0], [4, 18, 0], [4, 19, 0], [4, 20, 0], [4, 21, 0], [4, 22, 0], [4, 23, 0], [4, 24, 0], [4, 25, 0],
    #         [5, 0, 0], [5, 1, 0], [5, 2, 0], [5, 3, 0], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 0], [5, 9, 0], [5, 10, 0], [5, 11, 0], [5, 12, 0], [5, 13, 0], [5, 14, 0], [5, 15, 0], [5, 16, 0], [5, 17, 0], [5, 18, 0], [5, 19, 0], [5, 20, 0], [5, 21, 0], [5, 22, 0], [5, 23, 0], [5, 24, 0], [5, 25, 0],
    #         [6, 0, 0], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 0], [6, 11, 0], [6, 12, 0], [6, 13, 0], [6, 14, 0], [6, 15, 0], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 0], [6, 21, 0], [6, 22, 0], [6, 23, 0], [6, 24, 0], [6, 25, 0],]
    source = count_heatmap_day(classroom_name=classroom_name, query_date=paradata)

    ###### 上下文内容字典
    context = {
        'paradata':paradata,
        'classroom_name':classroom_name,
        'value_map_day':json.dumps(source),
        }

    return render(request, 'dashboard_map_day.html',context=context)

templates：dashboard_map_day.html

{% extends 'dashboard-base.html' %}

{% block main_block %}
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
    <h1 class="h2">Dashboard</h1>
    <div class="btn-toolbar mb-2 mb-md-0">

    <!--筛选行-->
    <div class="row m-1">
      <form action="" method="post">
        {% csrf_token %}
        <div class="form-group row" >
              <div class="row">
                <input class="form-control col-7" type="text" placeholder="教室名称" style="font-size:15px;" id="classroom_name" name="classroom_name" />           
              </div>
              <div class="row">
                <input class="form-control col-7" type="date"  style="font-size:15px;" id="paradata" name="paradata" />
                <input class="btn-small btn-primary col-4" type="submit" value="查询">
              </div>   
        </div>
      </form>
    </div>

    </div>
  </div>

  <!-- 看板 -->
  <h2>本周教室借订分布图(教室数量)-{{ paradata }} {{ classroom_name }} </h2>
  <canvas class="my-4" id="main" width="1200" height="400"></canvas>
  <script type="text/javascript">
        var value_map_day_js = JSON.parse('{{ value_map_day|safe }}');
        console.log('value_map_day_js',value_map_day_js);

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        // prettier-ignore
        // const hours = ['8:00-8:29', '8:30-8:59', '9:00-9:29', '9:30-9:59','10:00-10:29', '10:30-10:59', '11:00-11:29','11:30-11:59',
        // '12:00-12:29', '12:30-12:59', '13:00-13:29', '13:30-13:59','14:00-14:29', '14:30-14:59', '15:00-15:29','15:30-15:59', 
        // '16:00-16:29', '16:30-16:59', '17:00-17:29', '17:30-17:59','18:00-18:29', '18:30-18:59', '19:00-19:29','19:30-19:59',
        // '20:00-20:29','20:30-20:59',
        // ];
        const hours = ['8:00', '8:30', '9:00', '9:30','10:00', '10:30', '11:00','11:30',
        '12:00', '12:30', '13:00', '13:30','14:00', '14:30', '15:00','15:30', 
        '16:00', '16:30', '17:00', '17:30','18:00', '18:30', '19:00','19:30',
        '20:00','20:30',
        ];
        // prettier-ignore
        const days = ['Sunday','Saturday', 'Friday', 'Thursday','Wednesday', 'Tuesday', 'Monday', ];
        // prettier-ignore
        // const data = [[0, 0, 100], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4],[0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], 
        //               [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], 
        //               [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], 
        //               [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], 
        //               [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], 
        //               [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], 
        //               [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
        //     .map(function (item) {
        //     return [item[1], item[0], item[2] || '-'];
        // });
        const data = value_map_day_js
            .map(function (item) {
            return [item[1], item[0], item[2] || '-'];
        });
        option = {
          tooltip: {
            position: 'top'
          },
          grid: {
            height: '50%',
            top: '10%'
          },
          xAxis: {
            type: 'category',
            data: hours,
            splitArea: {
              show: true
            }
          },
          yAxis: {
            type: 'category',
            data: days,
            splitArea: {
              show: true
            }
          },
          visualMap: {
            min: 0,
            max: 10,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '15%'
          },
          series: [
            {
              name: 'Punch Card',
              type: 'heatmap',
              data: data,
              label: {
                show: true
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        option && myChart.setOption(option);

  </script>


</main>
{% endblock %}