EChars时间轴分享

最新推荐文章于 2023-12-01 11:09:01 发布

攒钱买大车

最新推荐文章于 2023-12-01 11:09:01 发布

阅读量221

点赞数

分类专栏： echars 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_53123094/article/details/113247857

版权

echars 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

定义dom

 <div id="chart"></div>

后台控制，注意格式

 @RequiresPermissions("tool:echart:list")
 @GetMapping("/list")
 @ResponseBody
public Map getlist(HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException
     {
    
     String[] categories ={"2016/2/18","2016/2/19","2016/2/20","2016/2/21","2016/2/22","2016/2/23","2016/2/24",
    			 "2016/2/25","2016/2/26","2016/2/27","2016/2/28","2016/2/29","2016/3/01","2016/3/02",
    			 "2016/3/03","2016/3/04","2016/3/05","2016/3/06","2016/3/07","2016/3/08","2016/3/09",
    			 "2016/3/10","2016/3/11","2016/3/12","2016/3/13"};
	  Double[] value ={2.7,-2.0,1.8,1.3,1.2,1.6,1.0,1.2,0.86,0.94,1.94,0.58,0.64,2.94,1.84,1.67,-0.21,-0.33,0.35,-0.65,
		    			 1.65,0.32,-1.32,0.98,1.94}; 
	  Map<String, Object> json = new HashMap<String, Object>();  	
	  json.put("categories", categories); 
	  json.put("values", value);  	
	  System.out.println(json);
	  return json;
    }

前台代码

 //数据格式化
function changeData(datain,values) { 
	 var liuru = []; 
	 for (var i = 0; i < datain.length; i++) { 
		 liuru.push(chartData(datain[i],values[i]));
	   } 
	 return liuru;   
	 }	

$(function() { 
    	  var categories2 =['2016/2/18','2016/2/19','2016/2/20','2016/2/21','2016/2/22','2016/2/23','2016/2/24',
    			 '2016/2/25','2016/2/26','2016/2/27','2016/2/28','2016/2/29','2016/3/01','2016/3/02',
    			 '2016/3/03','2016/3/04','2016/3/05','2016/3/06','2016/3/07','2016/3/08','2016/3/09',
    			 '2016/3/10','2016/3/11','2016/3/12','2016/3/13'];
    	 var value2 =[0.7,-1.0,1.6,1.0,1.1,1.2,1.3,-1.2,-0.86,-0.94,1.24,0.68,0.14,1.94,0.84,1.67,-0.21,-0.33,0.35,-0.65,
    			 1.65,0.32,-1.32,0.98,1.94];  
          var liuru2 = changeData(categories2,value2); 
        
          var chart = echarts.init(document.getElementById("chart"));  
          var categories=[];
   		  var values=[];
   			 $.ajax({
   				   url: "http://localhost/tool/echart/list",
   				   type: 'get',
   				   dataType: 'json',
   				   error: function (request, error) {
   				         console.log(" Can't do because: " + error);
   				     },
   				    success: function (res) { 
   				    if (res) {
				         categories = res.categories;  
				    	 values = res.values;
				    var liuru = changeData(categories,values);     
     var option = { 
    	xAxis:{
    	   type: 'category',
  		   boundaryGap: false,
  		   axisTick:{
  		     show:false
  		   }
    		 }, 
    	yAxis:{
    	   type:'value', 
    	   axisTick:{
  		      show:false
  		    },
    	   axisLabel:{ 
    		 formatter:'{value} %'    //给Y轴上的刻度加上单位 
    		  },
    		 },
    	dataZoom: [{  
    	    type: 'slider',//数据滑块     
    		start:0,  
    	    minSpan:8,    
    		dataBackground:{ 
    			lineStyle:{
    				    color:'#95BC2F'
    				}, 
    	     areaStyle:{ 
    			     color:'#95BC2F',
    				 opacity:1,
    			   }    
    			},      
    		},    
    		{  
    		type:'inside' //使鼠标在图表中时滚轮可用 
    		} ],
     tooltip:{ 
    	trigger: 'axis',   
    	formatter : function(params) {  
    		var result = params[0].value[0];   
    		params.forEach(function(item) { 
    		result += '<br/>'; 
    	    result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';  
    		result += item.seriesName + "：";  
    		result += isNaN(item.value[1]) ? 0 : (item.value[1]).toFixed(2) + "元";      
    		});     
    		return result;   
    				    },
    				      	}, 
    	series:[ {
    		name: '流入', 
    		type: 'line',
    	    data: liuru,
    	    showSymbol: false
    	    } ,   
    	    {
	         name: '流出', 
	    	 type: 'line',
	    	 data: liuru2,
	    	 showSymbol: false
	         } ],
        markArea:{
   			 data: [
   		  			 [{
   		   				yAxis: '-99999999',//y轴坐标控制
   		   				itemStyle:{
   		       					 color:'#BFEFFF'
   		   						  }
   						 }, {
   		    				yAxis: '0'
   		  				 }]
   							]
   		              		 } 
    				            };  
       chart.setOption(option); 
   				     }
   				            }
   				            });
     window.onresize = function () { 
         chart.resize();
                  }; 
           }());