文档章节

ECharts饼图

p2ng
 p2ng
发布于 2015/04/13 21:03
字数 1136
阅读 1393
收藏 1

听说作者最近离开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

p2ng

粉丝 48
博文 29
码字总数 13653
作品 0
广州
后端工程师
NEV与其他图表引擎的横向对比

本文由 网易云 发布 作者:刘阳 本篇文章仅限内部分享,如需转载,请联系网易获取授权。 NEV与其他图表引擎的横向对比 对比的其他图表库包括vega、HighCharts、 ECharts以及G2 图表类型 柱状...

wangyiyungw
05/14
0
0
ECharts 简单的使用过程,完美的图形展示

最近开发项目时要做图形报表,网上找了些东西,还是觉得ECharts靠谱,具备诸多优点,功能强大,图表完美,兼容性也比较好,基于html5动画渲染。 官网的demo中是写得比较全了,但很多用不到的...

kevin小当家
2015/08/07
0
0
Echarts使用心得总结(二)

Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一...

双月通天
2014/07/14
0
0
前端知识 | 浅谈在React中使用echarts

方法一: echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。 和使用所有其他插件一样,首先,我们需要 install 它: 第一步: npminstall --save echarts(依赖) npmi...

海说软件
06/26
0
0
Echarts-地图扩展-标准geoJson格式扩展地图-例子

本人菜鸟一枚,最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子,瞬间就蒙逼了。(http://echarts.baidu.com/echarts2/doc/example/map20.html ,2016年8月...

夜辰
2015/07/17
0
13

没有更多内容

加载失败,请刷新页面

加载更多

下一页

c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
今天
2
0
Shell | linux安装包不用选择Y/N的方法

apt-get install -y packageOR echo "y" | sudo apt-get install package

云迹
今天
2
0
Hadoop的大数据生态圈

基于Hadoop的大数据的产品圈 大数据产品的一句话概括 Apache Hadoop: 是Apache开源组织的一个分布式计算开源框架,提供了一个分布式文件系统子项目(HDFS)和支持MapReduce分布式计算的软件架...

zimingforever
今天
5
0
八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
今天
2
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部