Reference resources https://blog.csdn.net/BobYuan888/article/details/80428417

Back end transmission data ：json.dumps(value11A)

views.py

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

    # main11 Parameter extraction 
    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 Parameter extraction 
    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=' Approved ')).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) #{' Process quality department ': 5, ' The operation Department of the general manager's office ': 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 Content Dictionary 
    context = {
    
        'value11A':json.dumps(value11A),
        'value11B':json.dumps(value11B),
        'value12A':json.dumps(value12A),
        # 'value22':value22,
        # 'value11':value11,
                }
    return render(request, 'dashboard.html',context=context) 

Front end processing data JSON.parse(‘{ { value12A|safe }}’)

template

<div class="container-fluid ">

    <!-- Training needs Kanban -->
    <div class="row">

        <!-- On the left -->
        <div class="col-lg-3 col-md py-1 align-items-center">
          <!-- Collect information -->
          <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"> // Get the value of the variable  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); //  Based on the prepared dom, initialization echarts example  var myChart = echarts.init(document.getElementById('main11')); //  Specify configuration items and data for the chart  var option = {
       title: {
       text: ' Collect information ' }, 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 Ministry ', 'B Ministry ', 'C Ministry ', 'D Ministry ', ], 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' }, }; //  Use the configuration item and data display chart just specified . myChart.setOption(option); </script>


  
        <!-- Adoption -->
        <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">
          // Get the value of the variable 
          var value12A_js = JSON.parse('{
   { value12A|safe }}');
          console.log('value12A_js',value12A_js);

          //  Based on the prepared dom, initialization echarts example 
         var myChart = echarts.init(document.getElementById('main12'));
   
         //  Specify configuration items and data for the chart 
         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: ' Adoption ',
                  subtext: ' Approved status ',
                  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)'
                      }
                    }
                  }
                ]
              };