echarts 图表制作(饼图、柱状图(包含关系)、时间轴)

最新推荐文章于 2024-07-29 19:53:51 发布

qq_35841807

最新推荐文章于 2024-07-29 19:53:51 发布

阅读量9.7k

点赞数

分类专栏： html 文章标签： echarts 图表

本文链接：https://blog.csdn.net/qq_35841807/article/details/78845588

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,user-scalable=no">

<!-- js部分 -->
<script type="text/javascript" src="../../../../js/jquery-1.11.1.min.js"></script>
<script src="../../../../js/eChart3.6.2/echarts.js"></script>
<script src="../../../../js/eChart3.6.2/theme/vintage.js"></script>
<script type="text/javascript" src="../../../../js/bootstrap.min.js"></script>
<!-- css部分 -->
<link rel="stylesheet" href="../../../../css/bootstrap/bootstrap.css">
</head>
<body>
	<div class="container-fluid" id="chartOne" class="main"
		style="height: 100%"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('chartOne'));
		
		var scale=0.5;
		var resultMap = {};
		
		$(function() {
			var url = "/shslc/khtj/tjgl/endCaseAjax.do?state=04";
			$.post(url, initData, "json")	
		})
		function initData(ob) {
			resultMap=dataFormatter(ob);
			var options=[];
			placeHolderStyle = {
			    normal: {
			        label: {
			            show: false,
			        },
			        labelLine: {
			            show: false,
			        }
			    }
			};

			//resultMap.dataGZSB = dataFormatter(resultMap.data['公众上报']);
	var min_year=resultMap.year['min_year'];
	var max_year=resultMap.year['max_year'];
	var series=[];
	var options=[];
	series=getBaseSeries();
	getOptions(options,min_year,max_year);
	var option = {
			baseOption:{ 
		 timeline : {             //时间轴
				axisType : 'category',
				autoPlay : true,
				playInterval : 1500,
				data : resultMap.timeline,
				label : {
					formatter : function(s) {
						return (new Date(s)).getFullYear();
					}
				}
			}, 
	    grid: [
	        {x: '50%', y: '7%', width: '45%', height: '80%'},
	    ],
	    tooltip: {
	        formatter: '{b} ({c})'
	    },
	    xAxis: [
	        {gridIndex: 0, axisTick: {show:false},axisLabel: {show:false},splitLine: {show:false},axisLine: {show:false }},
	    ],
	    yAxis: [
	         {  'type' : 'category',
	        	gridIndex: 0, interval:0,
	            axisTick: {show:false}, axisLabel: {show:true},splitLine: {show:false},
	            axisLine: {show:true,lineStyle:{color:"#6173a3"}},
	        },
	         {  'type' : 'category',
		        	gridIndex: 0, interval:0,
		            axisTick: {show:false}, axisLabel: {show:false},splitLine: {show:false},
		            axisLine: {show:false},
		        }
	    ],
	    series:series
			 },	    //baseoption 基础数据      
		  options: options 	  
	};
				myChart.setOption(option);
				
				
		};
		
		
		//辅助方法
		function dataFormatter(obj) {
			var pList ;
			var temp;
			for (var year = obj.year['min_year']; year <= obj.year['max_year']; year++) {
				pList=obj.data_startcase[year+'年上报类型'];
				temp =obj.data_startcase[year+'年上报数'];
				for (var i = 0, l = temp.length; i < l; i++) {
					obj.data_startcase[year+'年上报数'][i] = {
						name : pList[i],
						value : parseInt(temp[i])
					}
				}

			}
			return obj;
		}
		function getData(percent) {
		    return [{
		        value: percent,
		        name: percent,
		        itemStyle: {
		             normal: {
		                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                                offset: 0,
		                                color: '#00B2EE'
		                            }, {
		                                offset: 1,
		                                color: '#00DDE6'
		                            }])
		            }
		        }
		    }, {
		        value: 1 - percent,
		        itemStyle: {
		            normal: {
		                color: 'transparent'
		            }
		        }
		    }];
		}
		function arrAddStr(arr,str){
			var farr=[];
			for(var i=0;i<arr.length;i++){
				farr.push(arr[i]+str);
				}
			return farr;
		}
		function getBaseSeries(){
			
			var baseseries=[{           //饼图1和柱状图1  
	         
	            type: 'pie',
	            radius : '30%',
	            center: ['22%', '33%'],
	            color:['#86c9f4','#4da8ec','#3a91d2','#005fa6','#315f97'],
	        
	            labelLine:{normal:{show:false}},
	            itemStyle: {normal: {label:{ show: true,  formatter: '{b} \n ({d}%)', textStyle:{color:'#B1B9D3'}} },},
	        },
	        {
	           
	            type: 'bar',xAxisIndex: 0,yAxisIndex: 0,barWidth:'45%',
	            itemStyle:{normal:{color:'#86c9f4'}},
	            label:{normal:{show:true, position:"right",textStyle:{color:"#9EA7C4"}}},
	           
	        },
	        {
	          
	            type: 'bar',xAxisIndex: 0,yAxisIndex: 1,barWidth:'45%',
	            itemStyle:{normal:{color:'#00688B'}},
	            label:{normal:{show:true, position:"right",textStyle:{color:"#9EA7C4"}}},
	           
	        },];
			var radius_in=130;
			var radius_out=150;
			for(var j=0;j<5;j++){   //共有5中上报方式
				baseseries.push({
			            type: 'pie',
						tooltip: {
							trigger: 'item',
							formatter: function(params, ticket, callback) {
						   return params.seriesName + ": " + params.name * 100 + "%";
		        }
		    },
			            clockWise: true, //顺时加载
			            hoverAnimation: false, //鼠标移入变大
			            center: ['22%', '73%'],
			            radius: [radius_in*scale, radius_out*scale],
			            itemStyle: placeHolderStyle,
			            label: {
			                normal: {
			                    show: false,
			                }
			            },
			           
			        },)
				radius_in=radius_in-25;
				radius_out=radius_out-25;
		}
		return baseseries;
		}


		function getOptions(obj,minYear,maxYear){  //获取options
			for(var i = minYear;i<maxYear+1;i++){
			var series=[{           //饼图1和柱状图1  
            name: i+'年河道巡查上报占比',
            data:resultMap.data_startcase[i+'年上报数'],
        },
        {
            name: i+'年河道巡查上报数',
            data: resultMap.data_startcase[i+'年上报数'],
        },
        {
            name: i+'年河道巡查结案数',
            data:resultMap.data_startcase[i+'年结案数'],
        }];
		var radius_in=130;
		var radius_out=150;
		for(var j=0;j<resultMap.data_startcase[i+'年结案率'].length;j++){
			series.push({
		            name: resultMap.data_startcase[i+'年上报类型'][j],
		            radius: [radius_in*scale, radius_out*scale],
		            data: getData(resultMap.data_startcase[i+'年结案率'][j])
		        },)
			radius_in=radius_in-25;
			radius_out=radius_out-25;
		}
		obj.push(
				{ title:[                 //标题
		          	        {text:i+"年河道巡查上报占比",x: '2%', y:'1%'},
		        	        {text:i+"年河道巡查",x: '40%', y: '1%'},
		        	        {text:i+"年上报结案率",x: '2%', y: '50%'},
		        	    ],
		         yAxis: [
		        			 {  
		        		        data:resultMap.data_startcase[i+'年上报类型'],		 
		        		      },
		        		      { data:arrAddStr(resultMap.data_startcase[i+'年上报类型'],'结案数'),
		        			   }
		        		    ],	   
		       	series:series
			
		},)	
			}
		}
			
	</script>
</body>
</html>

参考表格：

http://echarts.baidu.com/demo.html#bar-stack

http://gallery.echartsjs.com/editor.html?c=xB1HF49Cjb
http://gallery.echartsjs.com/editor.html?c=xB1N7IfL1Z
http://gallery.echartsjs.com/editor.html?c=xSkFFABj0e
http://gallery.echartsjs.com/editor.html?c=xHJDyokLHb
http://gallery.echartsjs.com/editor.html?c=xHkvdVRDlb

http://gallery.echartsjs.com/editor.html?c=xB1ESvRigz

效果：