layui集成echarts动态获取数据生成饼状图

最新推荐文章于 2024-06-07 15:43:29 发布

暗香浮动，月黑风高

最新推荐文章于 2024-06-07 15:43:29 发布

阅读量5.5k

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/xfy18317776108/article/details/103644993

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>履职统计</title>
		<meta name="renderer" content="webkit">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	    <link rel="import" href="../_frag/_jscss.html">
	    <script src="../../static/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="layui-form">
			<input type="hidden" name="time" id="time" value="" />
		  	<div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">选择年份</label>
			      <div class="layui-input-inline">
			        <input type="text" class="layui-input" id="test2" placeholder="yyyy">
			      </div>
			    </div>
		  	</div>
		</div>
		<div class="weadmin-body">
			<div id="main1" class="chart" style="width: 600px;height:400px;margin: 0 auto"></div>
			<div id="main2" class="chart" style="width: 600px;height:400px;margin: 0 auto"></div>
		</div>
	</body>
	<script type="text/javascript">
		layui.use('laydate',function(){
    		var laydate = layui.laydate;

		   	laydate.render({
			    elem: '#test2'
			    ,type: 'year'
			    ,done: function(value){
		        	console.log(value);
		        	$("#time").val(value);
		        	fn(value)
		     	}

		  	});
		});
		if ($("#time").val()) {
			
		} else{
			var date=new Date;
			var year = date.getFullYear()
			fn(year)
		}

		function fn(time){
			$.ajax({
				type:"get",
				url:basePath+"representative/record",
				data:{
					year:time
				},
				async:true,
				success:function(res){
					console.log("pp",res)
					var listdata = [];
					var activityList = [];
					if(res.data.list != undefined){
						listdata = res.data.list;
						activityList = res.data.activityVOs;
					}
					console.log("sss",listdata)
					console.log("xxx",listdata.length)
					var servicedata=[];
					for(var i=0;i<listdata.length;i++){
						var obj=new Object();
						console.log("list:",listdata[i]);
						obj.name=listdata[i].recordName;
						obj.value=listdata[i].recordNum;
						console.log("name:",obj.name);
						console.log("value:",obj.value);
						servicedata[i]=obj;

					}
					var myChart = echarts.init(document.getElementById('main1'));
					// 指定图表的配置项和数据
					var option = {
						title : {
							text: '履职登记统计',
							x:'center'
						},
						tooltip : {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							top:150,
							data: listdata.recordName
						},
						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:servicedata,
							/*	itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(128, 128, 128, 0.5)'
									}
								}*/
							}
						]
					};
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);

					console.log("wwss",listdata)

					console.log("activityVOs",activityList)
				}
			});
		}
			
    	var in_sign = "70";
		var not_sign = "30";
		var manually_sign = "0";
		var face_sign = "0"
		var APP_sign = "0"
		var GPS_sign = "0"
		var Magnetic_sign = "0"
		var IC_sign ="0"
		var RFID_sign = "0"
		var ID_sign = "0"
    	// 基于准备好的dom，初始化echarts实例

	  /*  var myChart2 = echarts.init(document.getElementById('main2'));

	    var option2 = {
	    	    title : {
	    	        text: '履职活动统计',
	    	        x:'center'
	    	    },
	    	    tooltip : {
	    	        trigger: 'item',
	    	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    	    },
	    	    legend: {
	    	        orient: 'vertical',
	    	        left: 'left',
	    	        top:100,
	    	       	data: ["会前视察","调研考察"]
	    	    },
	    	    series : [
	    	        {
	    				name:'履职活动',		        	
	    	            type: 'pie',
	    	            radius : '55%',
	    	            center: ['50%', '60%'],
	    	            data:[
	    	                {value:in_sign, name:'会前视察',itemStyle: {color: '#5fb878'}},
		                	{value:not_sign, name:'调研考察',itemStyle: {color: '#ff3f3f'}}
	    	            ],
	    	            itemStyle: {
	    	                emphasis: {
	    	                    shadowBlur: 10,
	    	                    shadowOffsetX: 0,
	    	                    shadowColor: 'rgba(128, 128, 128, 0.5)'
	    	                }
	    	            }
	    	        }
	    	    ]
	    	};
	    // 使用刚指定的配置项和数据显示图表。

	    myChart2.setOption(option2);*/
    </script>
</html>

暗香浮动，月黑风高

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
layui集成echarts动态获取数据生成饼状图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>履职统计</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compati...
复制链接

扫一扫