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>
效果：
歡迎斧正，that's all
see also：