如下栗子，可以把原來數(shù)據(jù)庫中 status 和 統(tǒng)計結(jié)果 count 兩個關(guān)鍵詞替換成 echart 需要的 name 和 value 方便生產(chǎn)除json結(jié)果直接交給 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/> : {c} (u0z1t8os%)"
                },
                calculable : true,
                series : [
                    {
                        name:'實驗狀態(tài)',
                        type:'pie',
                        radius : [20, 110],
                        center : ['50%', '40%'],
                        roseType : 'area',
                        data: data
                    }
                ]
            };
            // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
            test_status.setOption(test_option);
            },
    });
}

圖形結(jié)果如下：

echart 繪圖結(jié)果