首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >cssjshtml 多div现实echarts饼图实现

cssjshtml 多div现实echarts饼图实现

作者头像
葫芦
发布2019-04-17 15:07:16
6960
发布2019-04-17 15:07:16
举报
文章被收录于专栏:葫芦葫芦

多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
                        }]
                    })
                }
            }
        })
    });

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017/11/30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 多div现实echarts饼图实现:
    • json接口返回:
      • django mako 模板 html: 
        • js实现: 
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档