专栏首页葫芦cssjshtml 多div现实echarts饼图实现

cssjshtml 多div现实echarts饼图实现

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • cssjshtml vue.js 时间格式化

    葫芦
  • cssjshtml javascript控制多视频播放

    葫芦
  • python 匿名函数赋给变量只能用一次

    葫芦
  • xml view里control id的生成逻辑

    id的naming convention: +"–" + “<control id in xml view definition”, 例如:

    Jerry Wang
  • xml view里control id的生成逻辑

    id的naming convention: +"–" + “<control id in xml view definition”, 例如:

    Jerry Wang
  • 等待5年,Go 2.0终于要来了!

    早在今年8月份,Go团队便提出了2.0版本的设计草案,包括两大主题:错误处理和泛型。而今天,团队开发人员发话了:“是时候采取行动了!”

    新智元
  • UI5 xml view里control id的生成逻辑

    id的naming convention: +"–" + “<control id in xml view definition”, 例如:

    Jerry Wang
  • UI5 xml view里control id的生成逻辑

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • 记录一次spark sql的优化过程

    集群有一个spark sql的任务,每天需要跑38561秒,噢,来计算一下38561/60/60 这就是10.7个小时呀,就是下面那这种样子:

    数据仓库践行者
  • canvas实现拖动页面时显示窗口视频

    简介   当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以...

    欲休

扫码关注云+社区

领取腾讯云代金券