多div现实echarts饼图实现：

json接口返回:

{
code: 0,
result: true,
message: "successs",
data: {
series: [
{
name: "启用用户",
value: 6081
},
{
name: "未启用用户",
value: 5556
}
],
title: "1"
}
}

django mako 模板 html:


% for item in items:
            <div class="panel-body main-body" style="background-color: #f4f5f9">
                <div id="${item.product_id}" class="pie" style="height: 80%;witdh:80%"></div>
</div>
% endfor

js实现:

$(".pie").each(function () {
        var echart_id = $(this).attr("id");
        var myChart = echarts.init(document.getElementById(echart_id));

        $.ajax({
            url: "${SITE_URL}count_pie?product_id=" + echart_id,
            type: 'GET',
            dataType: 'json',
            containerId: echart_id,

            success: function (res) {
                //获取数据成功
                if (res.result) {
                    var data = res.data;
                    var series = data.series;
                    var aLegend = [];
                    for (var i = 0; i < series.length; i++) {
                        aLegend[i] = series[i].name;
                    }


                    // 填入数据
                    myChart.setOption({

                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },

                        calculable: false,

                        series: [{

			            radius : '70%',
                            center: ['45%', '50%'],
                            // 根据名字对应到相应的系列
                            name: 'sdk启用占比',
                            type: 'pie',
                            data: series
                        }]
                    })
                }
            }
        })
    });

葫芦的运维日志

打赏