echarts的使用

echarts数据可视化插件，就是用来统计数据的图

1.首先，下载并引入插件，文件结构如下所示

	<script type="text/javascript" src="js/echarts/build/dist/echarts.js"></script>

<div class="index1_6" id="statisTypeStats">
		<div class="index1_6_1">
			<div style="height: 400px" id="typeStats"></div>
		</div>
	</div>

2.js处理

/**
 * 问题类型比例分析
 */
function typeStats(){
	var legendData = [], seriesData = [];
	$.ajax({
		type : 'post',
		url: '/epsp/mvc/questionstatistics/typeStats.json',
		dataType: 'json',
		success: function(data){
			if (data) {
				$.each(data, function(k, v){
					legendData.push(k);
					seriesData.push({value: v.questionTotal, name: v.questionTypeName});
				});
				// 路径配置
		        require.config({
		            paths: {
		                echarts: '/epsp/resources/echarts/build/dist'
		            }
		        });
		    	// 使用
		        require(
		        	[
		                'echarts',
		                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
		            ],
		            function (ec) {
		                // 基于准备好的dom，初始化echarts图表
		                var myChart = ec.init(document.getElementById('typeStats')),
		                	option = {
		               	    	title: {
		                	        text: '问题类型比例分析',
		                	        x:'center'
		                	    },
		                	    tooltip: {//提示框
		                	        trigger: 'item',
		                	        formatter: "{a}<br/>{b}: {c} ({d}%)"
		                	    },
		                	    legend: {//图例
		                	      	y: 'bottom',
		                	      	selectedMode: false,
		                	        data: legendData
		                	    },
		                	    series: [//设置数据
		                	        {
		                	            name: '问题类型',
		                	            type: 'pie',
		                	            radius: '55%',
		                	            center: ['50%', '60%'],
		                	            clickable: false,
		                	            data: seriesData
		                	        }
		                	    ]
		                	};
		                // 为echarts对象加载数据 
		                myChart.setOption(option); 
		                window.onresize = myChart.resize;//onresize 当对象的大小将要改变时触发
		            }
		        );
			}
		}
	});
}
//效果图：

/**
 * 问题解决情况
 */
function streetQuestionStats(){
	var streetName = [] ,notSolve = [] , isSolve = [], ratio = [];
	$.ajax({
		type : 'post',
		url: '/epsp/mvc/questionstatistics/streetQuestionStats.json',
		dataType: 'json',
		success: function(data){
			if (data) {
				$.each(data, function(k, v){
					streetName.push(v.streetName);
					notSolve.push(v.notSolve);
					isSolve.push(v.isSolve);
					ratio.push(Math.round(v.ratio));
				});
				// 路径配置
		        require.config({
		            paths: {
		                echarts: '/epsp/resources/echarts/build/dist'
		            }
		        });
		    	// 使用
		        require(
		        	[
		                'echarts',
		                'echarts/chart/line',
		                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
		            ],
		            function (ec) {
		                // 基于准备好的dom，初始化echarts图表
		                var myChart = ec.init(document.getElementById('questionSolveStats')),
		                option = {
		                	title: {
	                	        text: '问题解决情况分析',
	                	        x:'center'
	                	    },
		                    tooltip : {
		                        trigger: 'axis',
		                        formatter: '{b}<br/>{a1}: {c1}<br/>{a2}: {c2}<br/>{a}: {c}%',
		                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		                        }
		                    },
		                    legend: {
		                    	y: 26,
	                	      	selectedMode: false,
		                        data: ['已解决', '未解决', '问题解决率']
		                    },
		                    dataZoom: {
		                    	orient: "horizontal", //水平显示
		                    	show: true, //显示滚动条
		                    	zoomLock: true,//数据缩放锁，当设置为true时选择区域不能伸缩，即(end - start)值保持不变，仅能做数据漫游。
		                    	start: 0, //起始值为0%
		                    	end: 20,  //结束值为50%
		                    	height: 20,
		                    	fillerColor: 'rgba(144,197,237,0.5)'
	                    	},
		                    xAxis : [
								{	//显示策略，可选为：true（显示） | false（隐藏），默认值为true  
								    //show: false,  
								    type : 'category',
								    axisLabel: {
								    	interval: 0
								    },
								    data : streetName
								}
		                    ],
		                    yAxis : [
								{
		                            type : 'value',
		                            name: '问题数量'
		                        },
		                        {
		                            type : 'value',
		                            name: '问题解决率',
		                            axisLabel : {
		                                formatter: '{value}%'
		                            }
		                        }
		                    ],
		                    series : [
		                        {
		                            name:'已解决',
		                            type:'bar',
		                            stack: '问题解决情况',
		                            clickable: false,
		                            data:isSolve
		                        },
		                        {
		                            name:'未解决',
		                            type:'bar',
		                            stack: '问题解决情况',
		                            clickable: false,
		                            data:notSolve
		                        },
		                        {
		                            name:'问题解决率',
		                            type:'line',
		                            stack: '问题解决情况',
		                            yAxisIndex: 1,
		                            smooth: true,
		                            clickable: false,
		                            data: ratio
		                        }
		                    ]
		                };
		                // 为echarts对象加载数据 
		                myChart.setOption(option); 
		                window.onresize = myChart.resize;
		            }
		        );
			}
		}
	});
}

//效果图：