解读ECharts数据封装与前端动态更新-优快云博客

本文详细解析了ECharts数据封装类EChartData及其系列类Series的使用方法，并展示了如何通过AJAX动态更新图表数据，实现热点实时监控功能。

后端代码：

package com.dataManager.utility.vo;

import java.util.ArrayList;
import java.util.List;


/** 
* @文件名: EchartData.java
* @功能描述: ECharts数据封装类 
* @author SunF
* @date 2015-6-2 下午08:26:28 
*  
*/
public class EChartData {
	//数据分组 
	private List<String> legend = new ArrayList<String>(); 
	//横坐标  
	private List<String> category = new ArrayList<String>();
	//纵坐标  
	private List<Series> series = new ArrayList<Series>();
	  
	public EChartData(List<String> legendList, 
                List<String> categoryList, List<Series> seriesList) {  
	    this.legend = legendList;  
	    this.category = categoryList;  
	    this.series = seriesList;  
	}

	@Override
	public String toString() {
	    return "EChartData [legend=" + legend + ", category=" + category
			+ ", series=" + series + "]";
	}
	
	//get、set略...	
}

package com.dataManager.utility.vo;

import java.util.List;

/** 
* @文件名: Series.java
* @功能描述:  Echarts封装数据类
* @author SunF
* @date 2015-6-2 下午08:27:16 
*  
*/
public class Series {
	private String name;    
	private String type;  
        //这里不能用String，不然前台显示不正常（特别是在做数学运算的时候）  
	private List<Double> data;
  
    public Series( String name, String type, List<Double> data) {  
    	this.name = name;
        this.type = type;
        this.data = data;
    }

	@Override
	public String toString() {
		return "Series [name=" + name + ", type=" + type + ", data=" + data
				+ "]";
	}

    //get、set略...	
	
}

前端代码：

<div id="echarts" style="width:860px;height:250px"></div>
<!-- 其他略 -->
<script src="<%=path%>/js/echarts/echarts-all.js" type="text/javascript"></script>
<script type="text/javascript">
//绑定
var myChart = echarts.init(document.getElementById('echarts'));
myChart.showLoading({  
    text : "图表数据正在努力加载..."  
});
var option = {
                title : {
		        text: '热点实时监控',
		        subtext: ''
		    },
		tooltip : {
		    	show : true,
		        trigger: 'axis'
		    },
		legend: {
		        data:['空']
		    },
	        toolbox: {
		        show : true,
		        feature : {
		            mark : {show: false},
		            dataView : {show: true, readOnly: true},
		            magicType : {show: true, type: ['line', 'bar']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		calculable : true,
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : false,
		            data : ['00:00','1:00','2:00','3:00','4:00','5:00','6:00']
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            axisLabel : {
		                formatter: '{value}'
		            }
		        }
		    ],
		series : [
		        {
		            name:'数值',
		            type:'line',
		            itemStyle: {
		                normal: {
		                	areaStyle: {type: 'default'}, //面积区域颜色
		                    lineStyle: {
		                    	color : '#E8514E',  //折线颜色
		                        shadowColor:'rgba(0,0,0,0.4)'  
		                    }  
		                }  
		            },
		            data:[1, 2, 3, 4, 5, 2, 1],
		            markPoint : {
		                data : [
							{type : 'min', name: '最小值'},
							{type : 'max', name: '最大值'}
		                ]
		            }
/*		            ,
		            markLine : {
		                itemStyle: {
			                normal: {
			                    lineStyle: {
			                    	color : '#336699',  //平均线颜色
			                        shadowColor:'rgba(0,0,0,0.4)'  
			                    }  
			                }  
			            },
		                data : [
		                    {type : 'average', name: '平均值'}
		                ]
		            } */
		        }
		    ]
		}; 	
  	myChart.setOption(option);  
  	myChart.hideLoading();   //隐藏加载等待
    //以上为一个数据为零的空图，仅做初始化使用。
</script>
<script type="text/javascript">
/*AJAX更新图标信息*/
function ajaxGetChartData(monitorNo) {
    //判断热点id
    if(undefined != monitorNo || "" != monitorNo){
        monitorNo = 'id='+monitorNo;
    }else{
        monitorNo = {};
    }
    //获得图表的options对象  
    var options = myChart.getOption();  
    
    //Ajax获取封装ECharts的数据  
    $.ajax({  
        type : "post",  
        async : false, //同步执行  
        url : "<%=path%>/monitorAjax/createChart.v",  
        data : monitorNo,  
        dataType : "json", //返回数据形式为json  
        success : function(result) {  
            if (result) {  
                options.legend.data = result.legend;  
                options.xAxis[0].data = result.category;  
                options.series[0].data = result.series[0].data;  
  		    //更新图表信息
                    myChart.hideLoading();
                    //加载数据项  
                    myChart.setOption(options);  
             }  
         },  
         error : function(errorMsg) {  
             /* alert("图表请求数据失败!");   */
             myChart.hideLoading();  
          }  
        });  
    }
</script>

//其他

package com.dataManager.utility.util;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import net.sf.json.JSONObject;

import com.dataManager.entity.MonitorOutput;
import com.dataManager.utility.vo.EChartData;
import com.dataManager.utility.vo.Series;

public class EchartsUtils {
	
	/** 
	* @功能描述: 创建图表
	* @param DataList
	* @return       
	*/
	public static EChartData createMonitorChart(List<MonitorOutput> DataList){
		if(null == DataList || DataList.size() < 1){
			return emptyLineData();
		}
		EChartData date = createEChartData(DataList);
		
		return date;
			
	}

	/** 
	* @功能描述: 根据监测点数据列表创建EChartData数据模型
	* @param dataList 数据集合  (最新10个数据，倒序) 
	*/
	private static EChartData createEChartData(List<MonitorOutput> dataList) {
		//横坐标  
		List<String> category = new ArrayList<String>();
		//纵坐标
		List<Series> series = new ArrayList<Series>(); 
		List<Double> valueList = new ArrayList<Double>();
		for(int i=dataList.size()-1; i>=0; i--){
			String date = dataList.get(i).getStamp().toString();
			String xNum = date.substring(11, 19);
			Double value = dataList.get(i).getValue();
			category.add(xNum);
			valueList.add(value);
		}
		
		String lineName = dataList.get(0).getMonitor().getNumber();
		series.add(new Series(lineName, "line",  valueList ));
		
		//数据分组  
        List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{lineName}));
        
		EChartData data = new EChartData(legend, category, series);  
		
		return data;  
	}


	/** 
	* @功能描述: 返回空图表
	* @return       
	*/
	private static EChartData emptyLineData() {  
		//数据分组  
        List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"无"}));
        //横坐标  
        List<String> category = new ArrayList<String>(
            Arrays.asList(new String []{"0","1","2","3","4","5","6"}));
        //纵坐标 
        List<Series> series = new ArrayList<Series>(); 
          
        series.add(new Series("无", "line",   
                        new ArrayList<Double>(Arrays.asList(  
                                0d,0d,0d,0d,0d,0d,0d))));  
          
        EChartData data=new EChartData(legend, category, series);  
        
        return data;  
    }  
	
	public static void main(String[] args){
		EChartData  ee = createMonitorChart(null);
		System.out.println(ee.toString());
		String jsessionid = JSONObject.fromObject(ee).toString();
		System.out.println(jsessionid);
		
	}
}

转载于:https://my.oschina.net/dlam/blog/464289

ECharts简单使用