django——echarts（可視化）

目錄

• 如何使用echarts
• 實現可視化的一般方式
• django使用echars
• 示例

如何使用echarts

返回頂部

echarts官網：https://www.echartsjs.com/zh/index.html

cdn：https://www.bootcdn.cn/echarts/

實現可視化的一般方式

返回頂部

• 服務器端處理:pyecharts
• 后端負責給數據,前端拿到數據,自己渲染: echarts

django使用echars

返回頂部

1. 要引入echarts.mim.js 或者是使用cdn
2. 從官網的實例 https://www.echartsjs.com/examples/zh/index.html 找一個合適的示例
3. 頁面中要定義一個標簽,設置一下長寬

   {% csrf_token %}
   <div class="row">
       <div class="col-md-4 page-header">
           <h1>用例執行情況統計</h1>
           <div id="p1" style="max-width: 1000px;width: 900px;height:500px;max-height: 800px;"></div>
       </div>
   </div>

4. 將示例拷貝到我們前端頁面,放在function函數
5. 使用ajax將后端將數據庫傳遞給前端,前端將數據替換到option的相對位置
   里面的data數據需要從后端傳過來
   

   <script>
           function pieDoughnut(data) {
               var option = {
                   tooltip: {
                       trigger: 'item',
                       formatter: '{a} <br/>{b}: {c} ({d}%)'
                   },
                   legend: {
                       orient: 'vertical',
                       left: 10,
                       data: data[0],
                   },
                   series: [
                       {
                           name: '訪問來源',
                           type: 'pie',
                           radius: ['50%', '70%'],
                           avoidLabelOverlap: false,
                           label: {
                               normal: {
                                   show: false,
                                   position: 'center'
                               },
                               emphasis: {
                                   show: true,
                                   textStyle: {
                                       fontSize: '30',
                                       fontWeight: 'bold'
                                   }
                               }
                           },
                           labelLine: {
                               normal: {
                                   show: false
                               }
                           },
                           data: data[1],
                       }
                   ]
               };
               var myChart = echarts.init(document.getElementById('p1'));
               myChart.setOption(option);
           }
   
           window.onload = function () {
               $.ajax({
                   url: "/echarts_msg/",
                   type: "POST",
                   data: {"key": "value", "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()},
                   success: function (data) {
                       pieDoughnut(data['pie_doughnut']);
                   }
               })
           }
   </script>

6. 然后在django的view.py中寫上如下內容：
   

   from django.http import JsonResponse
   import echartsMsg
   
   
   # ————————— 可視化相關 —————————
   def pie_doughnut():
       # 它自己的數據，下面的是自己的數據，要做成它的數據結構
       # value = ''
       # name = ''
       # l = [
       #     {value: 335, name: '直接訪問'},  # data
       #     {value: 310, name: '郵件營銷'},
       # ]
   
       legend_data = ["已執行", "未執行"]
       series_data = [
           {"value": 0, "name": "已執行"},
           {"value": 0, "name": "未執行"}
       ]
       api_obj = models.API.objects.all()
       for api in api_obj:
           series_data[0]['value'] += api.case_set.filter(case_execute_status=1).count()
           series_data[1]['value'] += api.case_set.filter(case_execute_status=1).count()
   
       return legend_data, series_data
   
   def echarts_msg(request):
       if request.method == "GET":
           return render(request, "echarts_msg.html")
       else:
           pie_doughnut = echartsMsg.pie_doughnut()
   
           return JsonResponse({
               "pie_doughnut": pie_doughnut,
           })

示例

返回頂部

在視圖函數中處理好相關數據：

from django.shortcuts import render, redirect, HttpResponse
from django.http import JsonResponse
def test(request):
    if request.method == "POST":
        obj = ([{'value': 3, 'name': '未執行'}, {'value': 8, 'name': '已執行'}], ['未執行', '已執行'])
        bar = [120, 200, 150, 80, 70, 110, 130]
        return JsonResponse({"obj": obj, 'bar': bar})
    else:

        return render(request, 'test.html', )

然后前端調用：

<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>



<div id="Pie1" style="width: 400px;height:300px;"></div>
<div id="barSimple" style="width: 400px;height:300px;"></div>


</body>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.0.0/echarts.min.js"></script>
<script> // 餅圖 function Pie1(data, ) { var myChart = echarts.init(document.getElementById('Pie1')); option = { title: { text: '用例執行狀態統計', subtext: '', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: data[1] }, series: [ { name: '用例執行狀態', type: 'pie', radius: '55%', center: ['50%', '60%'], data:data[0], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option); } // 柱狀圖 function barSimple(data) { var myChart = echarts.init(document.getElementById('barSimple')); option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: data, type: 'bar' }] }; myChart.setOption(option) } window.onload = function () { $.ajax({ url: "/test/", type:"POST", data: {"k1": "v1"}, success: function (data) { // 餅圖 Pie1(data['obj']); // 柱狀圖 barSimple(data['bar']); console.log(data) } }) } </script>
</html>

效果：