Echarts图表简单使用_var machart=echarts.int(document.getelentbyid)

效果图

JSP部分

<script src="echarts.js"></script>
 
 
<!-- 显示Echarts图表 -->
			    <div id='timeRate' style="width:100%;height:310px;"></div>
			    
			    <script type="text/javascript">
				// 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('timeRate'));
 
		        // 指定图表的配置项和数据
		        var option = {
		            title: {	//图表标题
		                text: ''
		            },
		            tooltip: {
		                trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中
		            },
		            
		            legend: {	//图表上方的类别显示           	
		            	show:true,
		            	data:['准点率（%）']
		            },
		            color:[
		            	  '#00FF00',	//柱体颜色
		                   
		                   ],
		           toolbox: {
		               feature: {
		                 dataView: {show: true, readOnly: false},
		                 magicType: {show: true, type: ['line', 'bar']},
		                 restore: {show: true},
		                 saveAsImage: {show: true}
		               }
		             },
		            xAxis:  {	//X轴       	
		                type : 'category',
		                data : []	//先设置数据值为空，后面用Ajax获取动态数据填入
		            },
		            yAxis : {
		            				//第一个（左边）Y轴，yAxisIndex为0
			                         type : 'value',
			                         //name : '准点率（%）',
			                         /* max: 120,
			                         min: -40, */
			                         axisLabel : {
			                             formatter: '{value} %'	//控制输出格式
			                         }
			                     },
			                
		            series : [	//系列（内容）列表                      
								{
				                    name:'准点率（%）',
				                    type:'bar',	//柱状图表示
				                    data:[]		//数据值通过Ajax动态获取
				                }
		            ]
		        };
				 
				myChart.showLoading();	//数据加载完之前先显示一段简单的loading动画
				 
				 var timeRate=[];		//准点率数组
				 var line=[];           //线路
		         $.ajax({	//使用JQuery内置的Ajax方法
		         type : "POST",		//post请求方式
		         async : true,		//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
		         url : "queryBusTimeRate",	//请求地址
		         dataType : "json",		//返回数据形式为json
		         success : function(result) {
		        	 //请求成功时执行该函数内容，result即为服务器返回的json对象
			         if (result != null && result.length > 0) {
			                for(var i=0;i<result.length;i++){  
			                	timeRate.push(result[i].timeRate);
			                	line.push(result[i].line);
			                }
			                myChart.hideLoading();	//隐藏加载动画
			                
			                myChart.setOption({		//载入数据
			   		         xAxis: {
			   		             data: line	//填入X轴数据
			   		         },
			   		         series: [	//填入系列（内容）数据
			   		               		{
					   		             // 根据名字对应到相应的系列
					   		             name: '准点率（%）',
					   		             data: timeRate
			   		         		}
			   		        ]
			   		     });
			                
			         }
			         else {
			        	 //返回的数据为空时显示提示信息
			        	 alert("图表请求数据为空，可能服务器暂未录入相关数据，您可以稍后再试！");
			          	 myChart.hideLoading();
			         }
		         
				},
		     	error : function(errorMsg) {
		     		//请求失败时执行该函数
		         	alert("图表请求数据失败，可能是服务器开小差了");
		         	myChart.hideLoading();    	
		     	}
		    })
 
		    myChart.setOption(option);	//载入图表
			    </script>

Controller

	// 公交准点率
	@ResponseBody
	@RequestMapping(value = "queryBusTimeRate")
	public List<Map<String, String>> queryBusTimeRate() {
		List<Map<String, String>> list = busMonitorService.queryBusTimeRate();
		return list;
	}

service

	// 准点率
	public List<Map<String, String>> queryBusTimeRate() {
 
		ArrayList<Map<String, String>> list = new ArrayList<>();
		int timeRate;
		String line;
		for (int i = 0; i < 10; i++) {
			Map<String, String> timeRate1 = new HashMap<String, String>();
			timeRate = 90 + i;
			line = "线路" + (i + 1);
			timeRate1.put("timeRate", String.valueOf(timeRate));
			timeRate1.put("line", line);
			list.add(timeRate1);
		}
 
		return list;
	}