如下栗子,可以把原来数据库中 status 和 统计结果 count 两个关键词替换成 echart 需要的 name 和 value 方便生产除json结果直接交给 echart 绘图:
data = SampleProductStatus.objects.filter(sample__customer_id=request.user.username).values('status')\
.annotate(count=Count('status'), name=F('status'), value=F('count')).values('value', 'name')
return HttpResponse(json.dumps(list(data), cls=DjangoJSONEncoder), content_type="application/json")
然后直接就可以使用 js 绘图啦:
function set_sample_test(){
$.ajax({
type: 'GET',
url: "/sample_status/",
data: null,
success: function (data) {
test_option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable : true,
series : [
{
name:'实验状态',
type:'pie',
radius : [20, 110],
center : ['50%', '40%'],
roseType : 'area',
data: data
}
]
};
// 使用刚指定的配置项和数据显示图表。
test_status.setOption(test_option);
},
});
}
图形结果如下: