實現可視化的一般方式：
-服務器端處理：pyecharts
-后端負責給數據，前端拿到數據，自己渲染：echarts
about
Echarts
Echarts是一個非常優秀的可視化框架，由百度開源，提供了非常豐富的圖表類型。
Github地址：https://github.com/apache/incubator-echarts
官網地址：echartsjs.com/zh/index.html
用過echarts的同學都知道，它提供了一個叫setOptions的方法，通過這個方法我們傳入一個options就可以生成一個圖表了。
對開發者而言，這是非常方便的，我們只需維護這個options變量就OK了。
pyecharts
pyecharts是一款將echarts封裝到python中的一款開源框架，由國內幾個大哥寫的，源碼拜讀了些許，感覺封裝的很有層次感，pythonic十足。
Github地址： https://github.com/pyecharts/pyecharts
官網地址： https://pyecharts.org/#/zh-cn/
示例
在視圖函數中處理好相關數據：
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>效果：