文档章节

ECharts饼图

p2ng
 p2ng
发布于 2015/04/13 21:03
字数 1136
阅读 1396
收藏 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
程序员分析微信好友后的惊天发现

点击上方“程序人生”,选择“置顶公众号” 第一时间关注程序猿(媛)身边的故事 图片源自:モブサイコ100 作者 码农 如需转载,请联系原作者授权。 今天我将带领大家一起来看看微信好友里面...

CSDN程序人生
08/25
0
0
前端知识 | 浅谈在React中使用echarts

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

海说软件
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
今天
2
0
Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
今天
2
0
OSChina 周二乱弹 —— 程序员圣衣

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享Skeeter Davis的单曲《The End of the World》 《The End of the World》- Skeeter Davis 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
14
0
[ python import module ] 导入模块

import moudle_name ----> import module_name.py ---> import module_name.py文件路径 -----> sys.path (这里进行查找文件) # from app.web import Personimport app.web.Person as Pe......

_______-
昨天
5
0
Redis性能问题排查解决手册

一、性能相关的数据指标 通过Redis-cli命令行界面访问到Redis服务器,然后使用info命令获取所有与Redis服务相关的信息。通过这些信息来分析文章后面提到的一些性能指标。 nfo命令输出的数据可...

IT--小哥
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部