【Django-CI系统】JSON的使用-20220509

参考https://blog.csdn.net/BobYuan888/article/details/80428417

后端传输数据：json.dumps(value11A)

views.py

def dashboard(request):
    '''dashboard'''

    # main11参数提取
    list_of_suggestion_dept_count = []
    dict_of_sum_suggestion_dept_count = {}
    for su in suggestion.objects.all():
        list_of_suggestion_dept_count.append(su.suggestion_employee_dept)
    for suggestion_employee_dept in list_of_suggestion_dept_count:
        dept_sum = suggestion.objects.filter(suggestion_employee_dept=suggestion_employee_dept).aggregate(suggestion_employee_dept=Count('suggestion_employee_id'))
        process_dict = {suggestion_employee_dept : dept_sum['suggestion_employee_dept']}
        dict_of_sum_suggestion_dept_count.update(process_dict)
    #print('dict_of_sum_suggestion_dept_count',dict_of_sum_suggestion_dept_count)
    value11A = []
    value11B = []
    for key,value in dict_of_sum_suggestion_dept_count.items():
        value11A.append(key)
        value11B.append(value)


    # main12参数提取
    list_of_dept_review_count = []
    dict_of_sum_dept_review_count = {}
    for de in dept_review.objects.all():
        list_of_dept_review_count.append(de.dept_review_suggestion_dept_reviewer)
    for each_dept in list_of_dept_review_count:
        dept_sum = dept_review.objects.filter(Q(dept_review_suggestion_dept_reviewer=each_dept) & Q(dept_review_suggestion_finished_review='已核准')).aggregate(each_dept=Count('dept_review_suggestion_employee_id'))
        process_dict = {each_dept : dept_sum['each_dept']}
        dict_of_sum_dept_review_count.update(process_dict)
    print('dict_of_sum_dept_review_count',dict_of_sum_dept_review_count) #{'工艺质量部': 5, '总经办运营部': 1}
    value12A = []
    for key,value in dict_of_sum_suggestion_dept_count.items():
        listA = []
        listA.append(key)
        listA.append(value)
        value12A.append(listA)
    print('json.dumps(value12A)',json.dumps(value12A))
    print('json.dumps(value12A)',json.loads(json.dumps(value12A)))


    ###### 上下文内容字典
    context = {
        'value11A':json.dumps(value11A),
        'value11B':json.dumps(value11B),
        'value12A':json.dumps(value12A),
        # 'value22':value22,
        # 'value11':value11,
                }
    return render(request, 'dashboard.html',context=context) 

前端处理数据JSON.parse(‘{{ value12A|safe }}’)

template

<div class="container-fluid ">

    <!--培训需求看板-->
    <div class="row">

        <!--左边-->
        <div class="col-lg-3 col-md py-1 align-items-center">
          <!--收集情况-->
          <div class="row p-2 pt-3 m-2 border" style="width: 300px;height:300px;">
            <div id="main11" style="width: 90%;height:90%;"></div>
          </div>

          <script type="text/javascript">
            //获取变量值
            var value11A_js = JSON.parse('{{ value11A|safe }}');
            console.log('value11A_js',value11A_js);
            var value11B_js = JSON.parse('{{ value11B|safe }}');
            console.log('value11B_js',value11B_js);

            // 基于准备好的dom，初始化echarts实例
           var myChart = echarts.init(document.getElementById('main11'));
     
           // 指定图表的配置项和数据
           var option = {
                 title: {
                   text: '收集情况'
                 },
                 tooltip: {
                   trigger: 'axis',
                   axisPointer: {
                     type: 'shadow'
                   }
                 },
                 legend: {
                 top: "10%",
                 },
                 grid: {
                   left: '3%',
                   right: '4%',
                   bottom: '3%',
                   containLabel: true
                 },
                 xAxis: {
                   type: 'value',
                   //boundaryGap: [0, 0.01],
                   minInterval:0.1,
                   min: 0,
                   //max: 0.7,
                 },
                 yAxis: {
                   type: 'category',
                   inverse: true,
                   //data: ['A部', 'B部', 'C部', 'D部', ],
                   data: value11A_js,
                 },
                 series: [
                   // {
                   //   name: '2021',
                   //   type: 'bar',
                   //   data: [0.40, 0.22, 0.15, 0.77, 0.61, 0.03, 0.02]
                   // },
                   {
                     name: '2022',
                     type: 'bar',
                    //data: [0.22,0.03,0.09,0.40,0.15,0.09,0.02],
                     data: value11B_js,
                   }
                 ],
                 itemStyle: {
                   //color: '#1E90FF'
                   color: '#4169E1'
                 },
               };



           // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option);
           
         </script>


  
        <!--采纳情况-->
        <div class="row p-2 pt-3 m-2 border" style="width: 300px;height:300px;">
          <div id="main12" style="width: 100%;height:100%;"></div>
        </div>

        <script type="text/javascript">
          //获取变量值
          var value12A_js = JSON.parse('{{ value12A|safe }}');
          console.log('value12A_js',value12A_js);

          // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('main12'));
   
         // 指定图表的配置项和数据
         var option = {
                dataset: [
                  {
                    dimensions: ['dept', 'count'],
                    source: value12A_js,
                    // [['Hannah Krause', 41,],
                    // ['Zhao Qian', 20, ],
                    // ['Jasmin Krause ', 52,]]
                  },
                  {
                    transform: {
                      type: 'sort',
                      config: { dimension: 'count', order: 'desc' }
                    }
                  }
                ],
                title: {
                  text: '采纳情况',
                  subtext: '已核准状态',
                  left: 'left'
                },
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  //orient: 'vertical',
                  left: 'bottom'
                },
                series: [
                  {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              };