echarts折线图,使用ajax动态加载数据

最新推荐文章于 2025-03-12 12:21:28 发布

大禹转晴

最新推荐文章于 2025-03-12 12:21:28 发布

阅读量3.8k

点赞数 2

本文链接：https://blog.csdn.net/qq_37430574/article/details/77182767

版权

本文介绍了如何利用ECharts结合AJAX动态加载折线图数据，强调了官方API的重要性，并展示了图表及提示框tooltip的效果。示例JS代码提供了数据加载的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方API地址:http://echarts.baidu.com/echarts2/doc/doc.html

最权威的API手册,自己有什么不确定的属性一定要查官方API,度娘搜出的属性,不一定正确

效果图:

图1: 整体

图2: 提示框tooltip,当鼠标停留在某一拐点时出现的提示框

js代码:

               //环境监测
function envir(){
	
	var envir_names_array = [];
    var envir_O2_array = [];
    var envir_wendu_array = [];
    var envir_shidu_array = [];
    
	 var envirChart = echarts.init(document.getElementById("envir_chart")); 
     
     var envirOption = {   
    		 grid:{
    			x:35,
 				y:30,
 				x2:40,
 				y2:40,
 				borderWidth:1,
 			},
                        //设置图2的提示框
 			tooltip : {
 				trigger : 'axis',//坐标轴触发 也可以item数据点触发
 				formatter: function (params) {//此处为我自定义的显示格式,可以按自己的需求修改
 					var res='<div><p>第'+params[0].name+'分区：</p></div>' 
 					for(var i=0;i<params.length;i++){
 						if(params[i].seriesName == '温度')
 					res+='<p>'+params[i].seriesName+':'+params[i].data.substring(0,4)+'℃</p>';
 						else{
 							res+='<p>'+params[i].seriesName+':'+params[i].data.substring(0,4)+'%</p>';
 						}
 					}
 					return res;
 					},
 			},
           //设置图例,图例的data name 要与series 的data name对应起来,若不同,图例为灰色而不与曲线颜色对应
     	    legend: {
     	        data:[
     	              {name : '温度',},
     	              {name : '湿度',},
     	              {name : '氧气',}
                     ]
     	    },
     	   
     	    calculable : true,//3.0新属性???不大了解,加上去掉没有什么明显效果区别
            //设置X轴属性
     	    xAxis : [
     	        {
     	        	name : "分区",
     	            type : 'category',//坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
     	            boundaryGap : false,//类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头
     	           splitNumber :2,
     	           axisLabel : {
						show : true,
						interval : 4,//X轴数据分段
						textStyle : {
							color : '#4169E1',
						}
					},
     	            data : envir_names_array
     	            //data : ['0','2','4','6','8','10','12','14','16','18','20','22','24','26','28','30']
     	            	
     	        }
     	    ],
           //设置Y轴属性
           yAxis : [
     	        {
     	        	type : 'value',
     	        	 axisLabel : {
 						show : true,
 						textStyle : {
 							color : '#4169E1',
 						}
 					},
     	            	
     	        }
     	    ],
            //要显示出来的折线数据
           series : [
     	        {
     	          name:'温度',
     	          type:'line',
     	          symbol: 'none',//拐点样式,
     	          itemStyle : {  
                      normal : {  
                          color:'#FF8C00',  
                          lineStyle:{  
                              color:'#FF8C00'  
                          }  
                      }  
                  },
     	            data:envir_wendu_array 
     	            //data:[0, 16, 22, 15, 20, 26, 30,24, 20, 18, 19, 23, 21, 28,21,24]
     	        },
     	        {
     	            name:'湿度',
     	            type:'line',
     	           symbol: 'none',
     	          itemStyle : {  
                      normal : {  
                          color:'#7FFF00',  
                          lineStyle:{  
                              color:'#7FFF00' , 
                          }
                      }
                  },
     	            data:envir_shidu_array
     	            //data:[20, 60, 80, 100, 82, 80, 94, 100, 92, 80, 84, 86, 102, 96, 84, 79]
     	        },
     	        {
     	            name:'氧气',
     	            type:'line',
     	           symbol: 'none',
     	          itemStyle : {  
                      normal : {  
                          color:'#40E0D0',  
                          lineStyle:{  
                              color:'#40E0D0'  
                          }  
                      }  
                  },
     	            data:envir_O2_array
     	            //data:[60, 40, 40, 63, 57, 65, 70,74, 80, 77, 69, 73, 76, 80,81, 75]
     	        },
     	        
     	    ]
     	};
     
     //ajax异步请求数据
     $.ajax({
 		async : true,
 		type: 'get',
 		url: 'http://localhost:8080/TaiHuaDemo/monitor/environmentalMonit.do',//请求数据的地址
 		//url: 'envir.json',//请求数据的地址
 		dataType: "json",        //返回数据形式为json
 		success: function (result) {
 			console.info(result);
 			//请求成功时执行该函数内容，result即为服务器返回的json对象
 			$.each(result.data[0], function (index, item) {//循环取出json中的数据,
                                                                       //index是检索到的json中的对象下标,item为json中的对象
 				var envir_code = index.substring(4);
 				console.info(envir_code);
            	                envir_names_array[0] = "";    //挨个取出类别并填入类别数组 
            	                envir_names_array[envir_code] = envir_code;    //挨个取出类别并填入类别数组 
            	                envir_O2_array[envir_code] = item.O2;
            	                envir_wendu_array[envir_code] = item.wenDu;
            	                envir_shidu_array[envir_code] = item.shiDu;
            	                console.info(envir_wendu_array[envir_code]);
 			});
 			envirChart.setOption(envirOption);//重新新加载数据
 		},
 		error: function (errorMsg) {
 			//请求失败时执行该函数
 			alert("图表请求数据失败!!");
 		}
 	});
}

json数据: 原数据过多,现只提供5条

{"data":[{"part1":{"shiDu":"45.60","O2":"19.80","wenDu":"19.80"},"part2":{"shiDu":"46.00","O2":"19.80","wenDu":"30.60"},"part3":{"shiDu":"48.00","O2":"19.70","wenDu":"22.20"},"part4":{"shiDu":"45.70","O2":"21.80","wenDu":"25.20"},"part5":{"shiDu":"63.60","O2":"20.50","wenDu":"21.40"}}]}

echarts的折线图,柱状图,饼图等的设置属性想通,熟悉一个之后,做其他的图都会更顺手~~