ECharts饼图实例

最新推荐文章于 2024-03-04 15:39:27 发布
最新推荐文章于 2024-03-04 15:39:27 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xixi_666/article/details/89403911
版权

echarts 实例：

jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="Expires" content="0"/>
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="Cache-control" content="no-cache"/>
		<meta http-equiv="Cache" content="no-cache"/>
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="../../../controls/select2/select2.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../controls/bootstrap-3.3.5/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="../../../controls/easyui-1.4.5/themes/bootstrap/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="../../../controls/dhtmlx-4.5/skins/web/dhtmlx.css"/>
		<link rel="stylesheet" type="text/css" href="../../../controls/dhtmlx-4.5/skins/dhtmlxgrid_cdmcs.css"/>
		<link rel="stylesheet" type="text/css" href="../../../style/pub-custom.css"/>		
				
		<script type="text/javascript" src="../../../script/public/tools/StringBuffer.js"></script>
		<script type="text/javascript" src="../../../script/public/tools/pagerbar_debug.js"></script>
		<script type="text/javascript" src="../../../script/public/tools/Page.js"></script>
		<script type="text/javascript" src="../../../script/public/tools/spin.js"></script>
		<script type="text/javascript" src="../../../script/ajax/ajaxProxy.js"></script>
		<script type="text/javascript" src="../../../script/public/common.js"></script>
		<script type="text/javascript" src="../../../script/public/ywpub.js"></script>
		
		<script type="text/javascript" src="../../../controls/dhtmlx-4.5/dhtmlx.min.js"></script>
		<script type="text/javascript" src="../../../controls/easyui-1.4.5/jquery.min.js"></script>
		<script type="text/javascript" src="../../../controls/bootstrap-3.3.5/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../../../controls/easyui-1.4.5/jquery.easyui.min.js"></script>
    	<script type="text/javascript" src="../../../controls/My97DatePicker/WdatePicker.js"></script>
    	
		<script type="text/javascript" src="../../../script/public/jquery/jquery.json.js"></script>
		<script type="text/javascript" src="../../../controls/select2/pinyin_abbrev.js"></script>
		<script type="text/javascript" src="../../../controls/select2/select2.cdmcs.min.js"></script>	
		
		<!-- 
		<script type="text/javascript" src="../../../script/public/echarts/echarts.js"></script> 
		<script type="text/javascript" src="../../../script/public/echarts/echarts-gl.min.js"></script>
		-->
		<script type="text/javascript" src="../../../script/public/echarts/echarts.min.js"></script>
		
		<script type="text/javascript" src="script/main.js?v=<%=System.currentTimeMillis()%>"></script>
		
		<style type="text/css">
			html, body {
	        width: 100%;
	        height: 100%;
	        margin: 0px;
	        padding:0px;
	        overflow: hidden;
	    	}
	    	#searchTbl tr{
	    		height:40px;
	    	}
	        .select2-container--open {/*select2在隐藏层中显示下拉列表*/
	 			z-index: 9999 !important;
			}
	       .criteria-form{
				width: 99.7%; 
				position: absolute;
				background-color: #FFF;  
		   		z-index: 9999;
		   		border: 1px solid #CCCCCC; 
		   		padding: 5px;   
		   		border-radius:5px; 
		    }
		    .criteria-form table td{
		    	line-height: 40px;
		    }
		    .criteria-text-val{
		        font-family: KaiTi;
		    }
	    </style>
</head>
	<body class="easyui-layout">
		<div data-options="region:'north',border:false" style="height:50px; padding-top:5px;overflow: hidden;">
		    <table width="100%" cellpadding="0" cellspacing="0" border="0">
		    	<tr><!-- 	
		    		<td width="90px" align="right">统计类型： </td>
					<td width="200px" align="left">
 						<select class="form-control" id="C_TJ_TYPE" style="width: 100%;height:35px;line-height:35px; ">
						</select>	
 					</td>-->
					<td width="90px" align="center">
						<input class="btn btn-info" id="btnSearch" type="button" value=" 统&nbsp;&nbsp;计 "/>
					</td>
					
					<td width="90px" align="center">
						<input class="btn btn-info" id="btnExport" type="button" value=" 导&nbsp;&nbsp;出 " disabled/>
					</td>
					<td></td>
		    	</tr>
		    </table>  
		</div>
		
		<div data-options="region:'center',border:false">
		    <div class="easyui-layout" data-options="fit:true">
				<div data-options="region:'west',collapsed:false" style="width:45%;">
					<div id="gridbox" style="width: 100%;height: 100%;"></div>
				    <div id="commonInfo"
				         style="z-index:99;width:98%;height:auto;position:absolute;top:50%;text-align:center;font-size:18px;color:#C6C6C6;">
				    </div>
				</div>
				
				<div data-options="region:'center'">
					<div id="echartsPie" style="width: 100%;height: 100%;"></div>
				</div>
			</div>
		</div>
		<!-- 
		<div data-options="region:'south',border:false" style="height:45px; padding-top:5px; overflow: hidden;">
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="1%">&nbsp;</td>
		            <td width="90%">
		                <div id="pagerbar" style="text-align: left;"></div>
		            </td>
		            <td width="1%">&nbsp;</td>
		            <td align="right">
		                <input type="button" class="btn btn-info" id="btnExport" value="导&nbsp;&nbsp;出" disabled  />
		            </td>
		            <td width="1%">&nbsp;</td>
				</tr>
			</table>
		</div>  -->
		<iframe id="hid_ifrm" name="hid_ifrm" width="0" height="0">
		</iframe>
		
</body>
</html>

需要引得js：

1、引入jQuery的js文件

2、引入echarts的js文件

 

js页面

var user = top._globPlateUserInfo;

var grid;
var pagerbar;
var gPageSize = 25;

var gs_echartsPie;
var gsData = {};

$(function(){
	
	initDateInput();//初始化查询时间（默认当月）
	
	initGrid();
	
	initEvent();
	
});

/**
 * 初始化日期
 */
function initDateInput(){
	var today = getSysDate();
}

/**
 * 事件初始化
 */
function initEvent(){
	
	gs_echartsPie = echarts.init(document.getElementById("echartsPie"));
	initCharts();
	
	$("#btnSearch").click(function(){
		loadGridData(-1);
	});
	
	$("#btnExport").click(f_btnExport);
}

/**
 * 数据表格初始化
 */
function initGrid(){
	grid = new dhtmlXGridObject('gridbox');
	grid.setImagePath("../../../controls/dhtmlx-4.5/skins/web/imgs/");
	grid.setHeader("岗位序列,人数,女性人数,占总人数比例,女性占该岗位比例");
	grid.setInitWidthsP("20,19,20,20,20");
	grid.setColAlign("center,center,center,center,center");
	grid.setColTypes("ro,ro,ro,ro,ro");
	grid.setColSorting("str,str,str,str,str");
	grid.enableMultiselect(true);
   // grid.splitAt(1);  //冻结第一列
	grid.init();
	
}

function loadGridData(page){
	grid.clearAll();
    var ajax = new AjaxProxy();
    Page.wait();

    //等待图标
    var spinner = new Spinner({lines: 20, radius: 30, length: 6, corners: 0.9, trail: 30}).spin(document.body);
    try {
        ajax.invokeProc("APPUSER.CTRI_CXTJ_HR.PW_CTRI_CXTJ_HR_SZGWTJ", true, function (ap) {
            Page.waitend();
            spinner.stop();
			
			var ret = ap.getInt("PN_RET");
			var msg = ap.getString("PC_MSG");
			var row = ap.getRowCount("P_RESULT");
			
			if(ret==null || ret!='0' || row < 1){
                $("#commonInfo").text("没有查询结果！"+msg);
                $("#commonInfo").show();
                $("#btnExport").attr("disabled", true);
            }else{        
                $("#commonInfo").hide();   
                $("#btnExport").attr("disabled", false);     
            }
			
			gsData = {};
			var legendDataArr = [];
			var seriesDataArr = [];
            for (var i = 1; i <= row; i++) {
                var data = {
                		C_SZGW	      	: ap.getString("P_RESULT", i, "C_SZGW"),//岗位序列
                		C_SZGWSM	    : ap.getString("P_RESULT", i, "C_SZGWSM"), 
                		N_GROUPING 	  	: ap.getString("P_RESULT", i, "N_GROUPING"), 
                		N_CNT_TOTAL 	: ap.getString("P_RESULT", i, "N_CNT_TOTAL"), //总人数
                		N_CNT_SZGW 	  	: ap.getString("P_RESULT", i, "N_CNT_SZGW"), //单独岗位序列的总人数
                		N_CNT_SZGW_NV 	: ap.getString("P_RESULT", i, "N_CNT_SZGW_NV"), //单独岗位序列女性总人数
                		C_CNT_SZGW_BL 	: ap.getString("P_RESULT", i, "C_CNT_SZGW_BL"), //单独岗位序列占总人数比例
                		C_CNT_SZGW_NV_BL: ap.getString("P_RESULT", i, "C_CNT_SZGW_NV_BL")// 单独岗位序列女性占该序列总人数比例
                }
                //grid.setHeader("岗位序列,人数,女性人数,占总人数比例,女性占该岗位比例");
                grid.addRow(i, [
                	data.C_SZGWSM, data.N_CNT_SZGW,data.N_CNT_SZGW_NV,data.C_CNT_SZGW_BL,data.C_CNT_SZGW_NV_BL
                	
                ]);
                
                if(null != data.C_SZGW && "" != data.C_SZGW){
                	var jsonData = {name: '', datas: []};
                	jsonData.name = data.C_SZGWSM;
                	jsonData.value = data.N_CNT_SZGW;
                	jsonData.datas[0] = data.C_CNT_SZGW_BL;
                	jsonData.datas[1] = data.N_CNT_SZGW_NV;
                	jsonData.datas[2] = data.C_CNT_SZGW_NV_BL;

                	seriesDataArr.push(jsonData);
                	legendDataArr.push(data.C_SZGWSM);
                }
                
                if (null == data.C_SZGW || "" == data.C_SZGW) {
                    grid.setRowTextStyle(i, "color:blue;font-weight:bold;");
                }else{
                    grid.setUserData(i, "data", data);
                }
                
            }
            gsData = {
            		legendDataArr 	: legendDataArr,
            		seriesDataArr 	: seriesDataArr	
            };
            //加载饼图
            initCharts(gsData);
        }, ajax);

    } catch (e) {
        Page.waitend();
        spinner.stop();
    }
}


function initCharts(chartsData){
	if(typeof(chartsData) == "undefined" || null == chartsData || "" == chartsData){
		return;
	}
	
	//alert($.toJSON(chartsData));
	var option = {
	    title : {
	        text: '岗位统计',
	        subtext: '单位:人',
	        x:'center'
	    },
	    tooltip : {
	        trigger: 'item',
	        //formatter: "{a} <br/>{b} : {c} "
	        formatter: function(a){
                return ('岗位序列：'+a['name']
                       +'</br>人数：'+a['value'] + ' 人'
                       +'<br>占总人数比例：'+a['data'].datas[0]
                       +'<br>女性人数：'+a['data'].datas[1] + ' 人'
                       +'<br>女性人数占该岗位比例：'+a['data'].datas[2]);
            },
            textStyle: {
            	//color 		: 'red',
            	fontStyle	: 'normal',//default: 'normal' ,'normal','italic','oblique'
            	fontWeight	: 'bold',
            	fontFamily	: 'Arial', //default: 'sans-serif' 
            	fontSize	: '12',// default: 14 
            	//height		: '',
            	//width		: '',
            	lineHeight	: '60' //行高
            }
                      
	    },
	    legend: {
	        orient : 'vertical',
	        x : 'left',
	        data:chartsData.legendDataArr
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {
	                show: true, 
	                type: ['pie', 'funnel'],
	                option: {
	                    funnel: {
	                        x: '25%',
	                        width: '50%',
	                        funnelAlign: 'left',
	                        max: 1548
	                    }
	                }
	            },
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    calculable : true,
	    series : [
	        {
	            name:'岗位',
	            type:'pie',
	            radius : '55%',//饼图的半径大小
	            center: ['50%', '60%'],//饼图的位置
	            data:chartsData.seriesDataArr,
	            label:{
					show:true,
					position : 'insideRight',
					formatter : function(a) {
						return (a['name'] + '（' + a['value'] + '人）' );
					}
				}
	        }
	    ]
	}; 
    gs_echartsPie.clear();
    gs_echartsPie.setOption(option);

}

/**
 * 导出excel表
 */
function f_btnExport(){
	
	var exp = {};
    exp.expType = 'xls';
    exp.expMode = '3';
    exp.caption = '岗位序列统计';
    exp.fileName = exp.caption;
	exp.subCaption = getSearchConditionStr();
	
	exp.width = [20, 15, 15, 20, 20];
	exp.align = ['center','center','center','center','center'];
	exp.header = ['岗位序列','人数','女性人数','占总人数比例','女性占该岗位比例'];

    exp.invoker = {
        procName: 'APPUSER.CTRI_CXTJ_HR.PW_CTRI_CXTJ_HR_SZGWTJ',
        procParams: {
	         
        }  
    }

    exp.attrsType = {
    		C_SZGWSM      	: 'str',
    		N_CNT_SZGW     	: 'str',
    		N_CNT_SZGW_NV   : 'str',
    		C_CNT_SZGW_BL   : 'str',
    		C_CNT_SZGW_NV_BL: 'str'
    }
    var action = getContextPath() + "/*.EXPXLS";
    openPostWindow(action, $.toJSON(exp), 'hid_ifrm');

}
/**
 * 得到查询条件串
 * @returns
 */
function getSearchConditionStr(){
    var str = "";
    
    return str;
    
}

 

最终显示

xixi_666
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts的示例二：饼图（南丁格尔图）
记录和分享属于我的“IT”时光
11-20 2321
ECharts-饼图（南丁格尔图）
echarts实用篇（一）——饼状图
BloodyMandoo的博客
07-27 2万+
echarts实用篇（一）——饼状图 从官网上我们可以看到通常用到的有这几类： 常规饼状图 环形图 嵌套环形图 纹理饼图 南丁格尔玫瑰图 定制饼状图 下面来看看各类的基本做法，直接使用官网上的例子。 常规饼状图 代码主体： option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构
echarts如何实现3D饼图(环形图)?
最新发布
weixin_48082900的博客
03-04 2343
自定义修改3D饼图的宽高和legend
Echarts饼图简单案例
qiudechao1的博客
08-19 2710
附链接：Echarts饼状图属性设置大全 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>EChartsTest</title> <!-- 引入 echarts.js --> <script...
1.Echarts饼状图详解及示例
热门推荐
笨小孩
12-19 6万+
1、基本饼状图示例 2、内嵌图示例及绑定点击事件 3、未能实现的饼状图形
【Echarts】- 制作饼图
m0_55960697的博客
04-22 4034
效果大概是这样 步骤分析 ​​​​​​​ 封装好函数，为后续传入真实数据做准备 初始化echarts 设置配置项，空的 option 即可 创建图表 查找官方示例 按需求，自定义配置图表 第一步：echarts基本步骤 function pieChart() { let myChart = echarts.init(document.querySelector('.pie')); let option = {}; ...
echarts饼图扇区添加点击事件的实例
08-29
下面小编就为大家带来一篇echarts饼图扇区添加点击事件的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
django echarts饼图数据动态加载的实例
09-18
今天小编就为大家分享一篇django echarts饼图数据动态加载的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ECharts 饼图
12-14
ECharts 饼图 前面的章节我们已经学会了使用 ECharts 绘制一个简单的柱状图，本章节我们将绘制饼图。 饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不...
解决echarts中饼图标签重叠的问题
12-17
饼图中的series有个avoidLabelOverlap属性， avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 当avoidLabelOverlap设置为false时会出现...
echarts常用饼图、圆环图、漏斗图示例
m0_51431448的博客
04-04 1万+
最近做可视化比较多，就常用的图表类型做了一下总结。 因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。 这里都是用的vue3，其实和vue2差不多，各式各样的花里胡哨的图表无非就是option配置不同，如果使用的是vue2，在写法上稍作修改即可 vue2、vue3组件封装模板链接echarts图表组件封装模板 1. 精简圆环图 <template&g...
ECharts柱状图和饼图实现案例
10-26
使用ECharts+Java实现的完整案例，包括实现柱状图和饼图，代码完整，有数据库文件，数据库为Oracle
Echarts 图形实例（柱图，饼图，曲线图等）
11-24
史上最强大的js图表库——ECharts，免费的图标控件，运行速度流畅，画面美观。
echarts饼图 配置，及案例
qq_41973526的博客
06-08 2901
echarts饼图案例及配置
echarts 饼图
weixin_43931625的博客
10-31 2万+
echarts 饼图
【Echarts】用echarts绘制饼图
m0_55394328的博客
12-06 5605
echarts（Enterprise Charts，商业级数据图表）是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
echarts案例网站
vfjcgg的博客
05-18 434
http://www.ppchart.com/#/
echarts图表示例大全
qq_44476779的博客
01-11 649
图表示例集
Java面试基础篇
m0_67392010的博客
07-29 3218
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。Java的强引用、弱引用、软引用、虚引用。Java语言基础常识。Java12新特性。JavaIO详解。...
echarts饼图怎么自动
08-25
3. 创建饼图实例：使用echarts提供的API，创建一个饼图实例，可以设置其大小、位置等属性。 4. 设置自动切换功能：使用JavaScript定时器，设置一个时间间隔，然后在定时器中更新饼图的数据，通过echarts的API进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值