文档章节

ECharts饼图

p2ng
 p2ng
发布于 2015/04/13 21:03
字数 1136
阅读 1383
收藏 1
点赞 0
评论 0

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

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

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

wangyiyungw ⋅ 05/14 ⋅ 0

Echarts视频教程从入门到实战

Echarts视频教程从入门到实战 网盘地址:https://pan.baidu.com/s/1p-G9UbKmXFtnuJEdiLSw2w 密码:0e9u 备用地址(腾讯微云):https://share.weiyun.com/5sKBF8E 密码:4ms8rp 有这样一款制...

放风筝好不 ⋅ 04/16 ⋅ 0

Echarts-百度地图省分着色

通过Echarts3结合百度地图,对全国省分进行着色。 起因 由于Echarts3中,不再使用china.js文件: ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目...

莫显辉 ⋅ 05/04 ⋅ 0

Vue教程(五)在vue项目中使用echarts

1安装Echart cnpm install echarts --save 2项目页面引用Echart import echarts from 'echarts' 3启动项目 npm run dev...

凌雲木 ⋅ 04/20 ⋅ 0

vue之将echart封装为组件

最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将...

四小七 ⋅ 05/21 ⋅ 0

echarts3.0在IE9中,bar图在使用datazoom时,数据显示不完全的问题

我在swt控件中调用browser,然后用echarts来展现我的数据,IE是IE9,柱状图设置了dataZoom,但是当我拖动dataZoom滑竿时,展现的数据没有全部展现出来,只有当dataZoom覆盖全部时,数据才全部...

kmust123 ⋅ 04/26 ⋅ 0

ssh结合echarts做图表展示

在日常的开发中,我们常常需要使用图表对数据进行展示,在这里作者使用百度的开源图表echarts动态的展示数据。 看过echarts的API都知道,要想使用某种类型的图表展示数据,必须封装好一个JSO...

_Artisan ⋅ 06/04 ⋅ 0

【前端图表】echarts散点图鼠标划过散点显示信息

在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过...

祈澈姑娘 ⋅ 前天 ⋅ 0

基于 Vue2.0 和 ECharts 封装的图表组件 - v-charts

在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一...

匿名 ⋅ 05/22 ⋅ 5

ECharts 4.1.0.rc1 发布,基于 JS 的开源可视化库

ECharts 4.1.0.rc1 发布,带来一些性能提升和 bug 修复。 更新内容包括: 在大量数据(200K)的情况下启用烛状和条形图渲染并缩放 为树形图添加缩放和拖动交互 在折线图中,使用类别轴时增强...

雨田桑 ⋅ 04/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Qt中的坑--QTreeWidget添加item 不能显示出来

QTreeWidget* pTree = ui.TreeCheckList; QTreeWidgetItem* item = new QTreeWidgetItem(pTree) ;item->setText ( 0, "test" );pTree->addTopLevelItem (item ); 原因是因为创建一个......

k91191 ⋅ 17分钟前 ⋅ 0

使用Guava的RateLimiter做限流

场景: 1. 在日常生活中,我们肯定收到过不少不少这样的短信,“京东最新优惠卷…”,“天猫送您…”。这种类型的短信是属于推广性质的短信。这种短信一般群发量会到千万级别。然而,要完成这...

wind2012 ⋅ 17分钟前 ⋅ 0

QSlider重新enterEvent

#ifndef DIALOG_H#define DIALOG_H#include <QDialog>namespace Ui {class Dialog;}class Dialog : public QDialog{ Q_OBJECTpublic: explicit Dialog(QW......

xxdd ⋅ 18分钟前 ⋅ 0

生产环境redis备份与恢复

生产环境redis备份与恢复 Tyrant0532 0人评论 1563人阅读 2018-02-01 20:34:10 redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理。生产中我们主...

rootliu ⋅ 20分钟前 ⋅ 0

nginx中出现403forbidden错误

nginx “403 Forbidden” 错误 出现这个错误一般是因为以下原因: 网站禁止特定的用户访问所有内容,例:网站屏蔽某个ip访问。 访问禁止目录浏览的目录,例:设置autoindex off后访问目录。 ...

河图再现 ⋅ 20分钟前 ⋅ 0

上海云栖:金融政企行业的CDN最佳实践

摘要: 在刚刚结束的上海云栖大会飞天技术汇分论坛上,阿里云视频云产品架构师罗小飞进行了《阿里云CDN——面向金融政企的CDN最佳实践》主题分享,为上海的嘉宾介绍CDN的解决方案与技术服务体...

猫耳m ⋅ 26分钟前 ⋅ 0

docker 基本操作

docker介绍 Docker项目提供了构建在Linux内核功能之上,协同在一起的的高级工具。其目标是帮助开发和运维人员更容易地跨系统跨主机交付应用程序和他们的依赖。Docker通过Docker容器,一个安全...

haoyuehong ⋅ 27分钟前 ⋅ 0

上海云栖:金融政企行业的CDN最佳实践

摘要: 在刚刚结束的上海云栖大会飞天技术汇分论坛上,阿里云视频云产品架构师罗小飞进行了《阿里云CDN——面向金融政企的CDN最佳实践》主题分享,为上海的嘉宾介绍CDN的解决方案与技术服务体...

阿里云云栖社区 ⋅ 29分钟前 ⋅ 0

安装与配置hadoop

一、CentOS7安装 java8,参考centos7.0 安装java1.8,tomcat 二、安装hadoop 版本V3.03 1、下载并解压hadoop # mkdir /usr/local/app# mkdir /usr/local/app/hadoop# cd /usr/local/app/had......

iturtle ⋅ 31分钟前 ⋅ 0

Idea设置Serializable自动生成

File --> Settings --> Editor --> Inspections ->Serialization issues,在该项下找到“Serializable class without 'serialVersionUID' ”并勾选...

Gmupload ⋅ 34分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部