ECharts饼图
博客专区 > p2ng 的博客 > 博客详情
ECharts饼图
p2ng 发表于3年前
ECharts饼图
  • 发表于 3年前
  • 阅读 1322
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 首次使用ECharts,而且还是最简单的饼图事例,学习成本还是挺低,简单粗暴的代码书写,日后再整理一番...

听说作者最近离开Baidu创业去了,以下是他个人录制的教程,并非认识大神,有好的东西就搬运分享一下...

【http://study.163.com/course/introduction/1016007.htm?utm_source=weibo&utm_medium=webShare&utm_campaign=share&utm_content=courseIntro】

图一

图二


需求:

由于业务需求,如上【图一】阀室,点击其它类型之后,动态切换其子分类如上【图二】阀室-其它所示,(图表上的数值并非准确,方便开发直接改数据库的)

就是第一层饼图,显示大分类,第二层饼图,显示大分类的对应的子分类...


API:

http://echarts.baidu.com/doc/doc.html#实例方法

马上翻API得知,有公共事件监听,,,官方Demo如下

http://echarts.baidu.com/doc/example/event.html


轮到上映粗狂的需求code:

/** 根据指标组初始化图标 */
initEChartsByKpiGroup: function () {
    $('.pageRightBody').html('');
    $('.pageRightBody').append('<table class="lastTbl" style="clear: both"></table>');
    // 根据管线底下的资源数量遍历出图表
    for (var e = 0; e < resourceECharts.length; ++e) {
        DataHandler.getResourceKpiCfgRelationGroupByKpiGroup({
            version: searchObj.version,
            pipeLineId: searchObj.pipeLineId,
            resourceType: resourceECharts[e].resourceType
        }, function (resultKpiGroup) {
            // 初始化图标div
            $('.pageRightBody .lastTbl').before('<table class="pageRightTable" id="pageRightTable' + e + '" style="width: 33%; float: left;"><\/table>');
            var $table = $('#pageRightTable' + e);
            var html = '<td><div class="chartContent' + e + '" data-key="' + resultKpiGroup[0].resourceTypeName + '" style="height: 300px;width: 100%;z-index:100;"></div></td>';
            // 生成资源表格到界面上
            $table.append(html);

            // 保存图表数据对象
            var pieKpiGroup = {};
            // 计算图表中每个类别的总数
            var total = 0;// 总数
            var legendData = new Array();
            var seriesData = new Array();
            for (var i = 0; i < resultKpiGroup.length; i++) {
                total += resultKpiGroup[i].num;
                legendData.push(resultKpiGroup[i].kpiGroupName);
                seriesData.push({
                    value: resultKpiGroup[i].num,
                    kpiGroup: resultKpiGroup[i].kpiGroup,
                    name: resultKpiGroup[i].kpiGroupName,
                    resourceType: resultKpiGroup[i].resourceType,
                    resourceTypeName: resultKpiGroup[i].resourceTypeName
                });
            }
            pieKpiGroup.total = total;
            pieKpiGroup.legendData = legendData;
            pieKpiGroup.seriesData = seriesData;
            $('.chartContent' + e).each(function () {
                // 当前点击在哪层【1: 指标组、2: 指标分类、3: 指标详情】
                var clicklayers = 1;
                var $this = $(this);
                var pipECharts = echarts.init($this[0]);
                var val = $this.attr('data-key');
                var optionKpiGroup = {
                    title: {
                        text: val + '[总数:' + pieKpiGroup.total + ']',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} <br/> {c} ({d}%)"
                    },
                    legend: {
                        orient: 'horizontal',
                        x: 'center',
                        y: '50px',
                        data: pieKpiGroup.legendData
                    },
                    calculable: true,
                    series: [
                        {
                            name: '总数[' + pieKpiGroup.total + ']',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: pieKpiGroup.seriesData
                        }
                    ]
                };
                // 监听资源分类点击事件【根据clicklayers去判断当前在哪一层】
                pipECharts.on(echarts.config.EVENT.CLICK, function(param){
                    if(clicklayers == 1){// 1: 指标组
                        clicklayers = 2;
                        $.post(path + '/admin/pipelineCheck/getResourceKpiCfgRelationByKpiGroup', {
                            version: searchObj.version,
                            pipeLineId: searchObj.pipeLineId,
                            pipeLineCode: searchObj.pipeLineCode,
                            resourceType: param.data.resourceType,
                            kpiGroup : param.data.kpiGroup,
                            kpiGroupName : param.data.name
                        }, function(resultKpiType){
                            var pieKpiType = {};
                            var total = 0;
                            var legendData = new Array();
                            var seriesData = new Array();
                            for (var i = 0; i < resultKpiType.length; i++) {
                                total += resultKpiType[i].num;
                                legendData.push(resultKpiType[i].kpiTypeName);
                                seriesData.push({
                                    value: resultKpiType[i].num,
                                    kpiGroup: resultKpiType[i].kpiGroup,
                                    kpiGroupName: resultKpiType[i].kpiGroupName,
                                    kpiType: resultKpiType[i].kpiType,
                                    name: resultKpiType[i].kpiTypeName,
                                    resourceType: resultKpiType[i].resourceType,
                                    resourceTypeName: resultKpiType[i].resourceTypeName,
                                    version: searchObj.version,
                                    pipeLineCode: searchObj.pipeLineCode
                                });
                            }
                            pieKpiType.total = total;
                            pieKpiType.legendData = legendData;
                            pieKpiType.seriesData = seriesData;
                            var optionKpiType = {
                                title: {
                                    text: val + '-'+ resultKpiType[0].kpiGroupName + '[总数:' + pieKpiType.total + ']',
                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{b} <br/> {c} ({d}%)"
                                },
                                toolbox:{
                                    show : true,
                                    orient: 'horizontal',
                                    x: 'right',
                                    y: 'top',
                                    color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
                                    backgroundColor: 'rgba(0,0,0,0)',
                                    borderColor: '#ccc',
                                    borderWidth: 0,
                                    padding: 5,
                                    showTitle: true,
                                    feature : {
                                        toBack : {
                                            show : true,
                                            title : '返回上一层',
                                            icon : path + '/resources/admin/pipelineCheck/images/ico_back.png',
                                            onclick : function (){
                                                // 在第二层点击返回上一层按钮时,状态字段改变【clicklayers】
                                                pipECharts.setOption(optionKpiGroup, true);
                                                clicklayers = 1;
                                            }
                                        }
                                    }
                                },
                                legend: {
                                    orient: 'horizontal',
                                    x: 'center',
                                    y: '50px',
                                    data: pieKpiType.legendData
                                },
                                calculable: true,
                                series: [
                                    {
                                        name: '总数[' + pieKpiType.total + ']',
                                        type: 'pie',
                                        radius: '50%',
                                        center: ['50%', '60%'],
                                        data: pieKpiType.seriesData
                                    }
                                ]
                            };
                            pipECharts.setOption(optionKpiType, true);
                        });
                    }else if(clicklayers == 2){// 2: 指标分类
                        var title = param.data.resourceTypeName + '-' + param.name;
                        // 判断是否生成该临时菜单
                        if($(top.document).find('#menuContainer li.toCheckList').length == 0){
                            var url = 'admin/pipelineCheck/toCheckList?title=' + title + '&resourceType=' + param.data.resourceType + '&kpiGroup=' + param.data.kpiGroup + '&kpiType=' + param.data.kpiType + '&version=' + param.data.version + '&pipeLineCode=' + param.data.pipeLineCode;
                            $(top.document).find('#menuContainer').append('<li hrefValue=' + url + ' data-value-id="toCheckList" class="toCheckList">校验数据</li>');
                            if($(top.document).find('#toCheckList').length){
                                $(top.document).find('#toCheckList').attr('src', url);
                            }
                            $(top.document).find('#menuContainer li.toCheckList').click();
                        }else{
                            $(top.document).find('#menuContainer li.toCheckList').click();
                        }
                    }else if(clicklayers == 3){// 3: 指标详情

                    }
                });
                pipECharts.setOption(optionKpiGroup, true);
            });
        });
    }
}


粗暴的代码完毕,,,



自己备用初始化Echarts代码结构

/**
             * 初始化【用户登录地图分布图】
             */
            initCusLoginMap: function (statType) {
                var cusLoginMap = echarts.init($('#cusLoginMap')[0]);
                cusLoginMap.showLoading({
                    text: '正在努力为您加载中...',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize: 20
                    },
                    effect: 'bubble'
                });
                DataHandler.getCusLoginMapData({
                    statType: statType
                }, function(result){
                    // 保存最大数
                    var maxValue = 0;
                    if (result.result) {
                        var stat = JSON.parse(result.result.stat);
                        // 循环遍历赋值
                        for (var i = 0; i < stat.length; i++) {
                            for (var n = 0; n < mapData.length; n++) {
                                if (stat[i].provinceCode == mapData[n].provinceCode) {
                                    mapData[n].value = stat[i].value;

                                    // 判断各地区中最大值,并保存
                                    if (stat[i].value > maxValue) {
                                        maxValue = stat[i].value;
                                    }
                                }
                            }
                        }
                    }
                    // 根据具体图表进行修改
                    var option = {
                        title: {
                            text: '用户登录地区分布图',
                            subtext: subtextArray[statType],
                            x: 'center'
                        }, tooltip: {
                            trigger: 'item',
                            formatter: function (params, ticket, callback) {
                                return params.name + ": " + params.value;
                            }
                        }, dataRange: {
                            min: 0,
                            max: Math.ceil(maxValue / 100) * 100 == 0 ? 100 : Math.ceil(maxValue / 100) * 100,// maxValue地图只能显示整百的数据,不然的话会带上小数位
                            precision: 0,
                            splitNumber: 5,
                            x: 'left',
                            y: 'bottom',
                            text: ['活跃', '僵尸'],// 文本,默认为数值文本
                            calculable: true
                        }, toolbox: {
                            show: true,
                            orient: 'vertical',
                            x: 'right',
                            y: 'center',
                            feature: {
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        }, series: [{// 不同类型的图表有不一样的参数
                            name: '用户',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            itemStyle: {
                                normal: {label: {show: true}},
                                emphasis: {label: {show: true}}
                            }, data: mapData
                        }]
                    };
                    cusLoginMap.setOption(option, true);
                    cusLoginMap.hideLoading();
                });
            }


共有 人打赏支持
p2ng
粉丝 44
博文 29
码字总数 13653
×
p2ng
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: