java利用ECHARTS.JS在前臺顯示圖表

時間 2019-11-19

標籤 java 利用 echarts.js echarts 前臺顯示圖表欄目 Java 简体版

原文原文鏈接

步驟1:javascript

(1)在java後臺,使用MSQL分組函數,列出全部線在對應的點的值,css

(2)組成的Map如圖所示:html

注意:java

key爲0的value表示X軸須要的數據;key爲其餘的值表示圖表線條的名字,value爲x軸的點對應的y軸的值,y軸的值和x軸是一一對應的,即便沒有值,也要放入0數組

爲了方便測試,這裏在Aciton中放入測試數據,如:echarts

public String searchChartData() {
	Map<String, List<String>> valueMap = new HashMap<>();
	List<String> list1 = new ArrayList<>();
	valueMap.put("0", list1);
	list1.add("2016年7月");
	list1.add("2016年12月");
	list1.add("2017年1月");
	list1 = new ArrayList<>();
	valueMap.put("A線條", list1);
	list1.add("2016年7月:11");
	list1.add("2016年12月:22");
	list1.add("2017年1月:33");
	list1 = new ArrayList<>();
	valueMap.put("B線條", list1);
	list1.add("2016年7月:66");
	list1.add("2016年12月:0");
	list1.add("2017年1月:77");
	parseValueMapToImageData(valueMap,xDataStr,chartDataStr);
	valueMap = new HashMap<>();
	list1 = new ArrayList<>();
	valueMap.put("0", list1);
	list1.add("aaa");
	list1.add("bbb");
	list1.add("ccc");
	list1 = new ArrayList<>();
	valueMap.put("C線條", list1);
	list1.add("aaa:1");
	list1.add("bbb:0");
	list1.add("ccc:3");
	list1 = new ArrayList<>();
	valueMap.put("D線條", list1);
	list1.add("aaa:5");
	list1.add("bbb:6");
	list1.add("ccc:7");
	parseValueMapToImageData(valueMap,xDataStr2,chartDataStr2);
	return SUCCESS;
}

由於前臺須要有兩個線,因此這裏放入了兩個圖表須要的數據,後臺debugg的數值以下圖:jsp

SERVICE:ide

//根據SQL組裝的map解析爲echarts想要的數據
public void parseValueMapToImageData(Map<String, List<String>> valueMap,List<String> xDataStr,List<String> chartDataStr) {
	if(valueMap.size()>0) {
		//圖表數據
		for (String key : valueMap.keySet()) {
			Map<String, String> map = new LinkedHashMap<String, String>();
			List<String> valueList = valueMap.get(key);
			if(key.equals("0")){
				xDataStr.addAll(valueList);
//					xDataStr = valueList;
				continue;
			}
			String valueStr = "";
			map.put("name", key);
			int i = 0;
			for (String value : valueList) {
				String[] splitValue = value.split(":");
				map.put(splitValue[0], splitValue[1]);
			}
			for (String keys : xDataStr) {
				if(valueStr.length()>0){
					valueStr+=";";
				}
				if(map.get(keys)==null) {
					valueStr+="0";
				}else {
					valueStr+=map.get(keys);
				}
			}
			chartDataStr.add(key+":"+valueStr);
		}
	}
}

前臺使用easyui的layout佈局:函數

jsp:佈局

<script type="text/javascript" src="echarts.js>"></script>
<body>
<s:hidden name="chartDataStr" id="chartDataStr" cssClass="container chartDataStr"/>
<s:hidden name="xDataStr" id = "xDataStr" cssClass="container xDataStr"/>
<s:hidden name="chartDataStr2" id="chartDataStr2" cssClass="container2 chartDataStr"/>
<s:hidden name="xDataStr2" id = "xDataStr2" cssClass="container2 xDataStr"/>
<div class="easyui-layout" data-options="fit: true" id="topLayout">
    <div data-options="region: 'center', border: true,fit: false,title: '',iconCls:''">
        <div id="container" style="min-width:0px;height: 0px" class="containerDiv"></div>
    </div>
    <div data-options="region: 'south', border: true,split: true" >
	    <div id="container2" style="min-width:0px;height: 0px" class="containerDiv"></div>
    </div>  
</body>

JS:

var yearCount = undefined;
var fontSize = 15;
var nameData = [];
var valueData = [];
var rotateNumber = 0;
var maxLength = 5;//每項顯示文字個數 
$(function(){
	initContainerHeightFun();
	var $containers = $('.containerDiv');
    //建立2個圖表
	$containers.each(function(){
		$container = $(this);
		var id = $container.attr("id");
		$xDataStr = $('.xDataStr.'+id);
		$chartDataStr = $('.chartDataStr.'+id);
		initEcharsFun($container,$xDataStr,$chartDataStr);
	});
});

//設置2個圖表分別和對應的layout的高度一致(若是不動態設置,那麼就要在jsp頁面寫好,不然會報錯)
function initContainerHeightFun(){
	var northHeight = getPanelHeight('#topLayout',"north");
	$('#container2').css('min-width',northHeight);
	$('#container2').css('height',northHeight);
	var centerHeight = getPanelHeight('#topLayout',"center");
	$('#container').css('min-width',centerHeight);
	$('#container').css('height',centerHeight);
}

//獲取layout指定面板的高度
function getPanelHeight(layoutId,p){
	 var layout = $(layoutId);
	 var panel = layout.layout('panel',p); 
	 var height = panel.panel('panel').outerHeight();
	 return height;
}

//圖表echarts初始化
function initEcharsFun($container,$xDataStr,$chartDataStr){
	var myWidth = $container.css('width').slice(0,-2);
    var height_frm = $(document.body).height();  
	chartDataStr  = $chartDataStr.val();
    //由於從後臺傳過來的是數組,這裏把數組的中括號去除掉
	xDataStr = $xDataStr.val();
	xDataStr = xDataStr.replace("[","");
	xDataStr = xDataStr.replace("]","");
	xDataStr = xDataStr.replace(/ /g,"");
	categories = xDataStr.split(",");//獲取x軸數據
	if(categories.length>20){
		fontSize = 10;
	}else if(categories.length>15){
		fontSize = 12;
	}
	yearCount = [];//y軸數據
	
	if(categories.length>20){
		fontSize = 10;
	}else if(categories.length>15){
		fontSize = 12;
	}
	
	for(var i= 0;i< categories.length;i++){
		if(categories[i]){
			yearCount.push(categories[i]);
			if(categories[i].length>5){
			}else if(categories[i].length>10){
			}
		}else{
			yearCount.push(0);
		}
	}
	$container[0].style.width = myWidth-50;
	$container[0].style.height = height_frm-50;
	var myChart = echarts.init($container[0]);
	var posList = [
       'left', 'right', 'top', 'bottom',
       'inside',
       'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
       'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
	];

	myChart.configParameters = {
		   rotate: {
		       min: -90,
		       max: 90
		   },
		   align: {
		       options: {
		           left: 'left',
		   center: 'center',
		   right: 'right'
		       }
		   },
		   verticalAlign: {
		       options: {
		           top: 'top',
		   middle: 'middle',
		   bottom: 'bottom'
		       }
		   },
		   position: {
		       options: echarts.util.reduce(posList, function (map, pos) {
		           map[pos] = pos;
		           return map;
		       }, {})
		   },
		   distance: {
		       min: 0,
		       max: 100
		   }
    };

	myChart.config = {
	       rotate:35,
	       align: 'left',
	       position: 'top',
	       distance: 10,
	       verticalAlign:'bottom',
	     onChange: function () {
	    	   labelOption = {
	               normal: {
	                   rotate: myChart.config.rotate,
	                   align: myChart.config.align,
	                   verticalAlign: myChart.config.verticalAlign,
	                   position: myChart.config.position,
	                   distance: myChart.config.distance
	               }
	           };
	           myChart.setOption({
	               series: [{
	                   label: labelOption
	               }, {
	                   label: labelOption
	               }, {
	                   label: labelOption
	               }, {
	                   label: labelOption
	               }]
	           });
	       }
	   };

	 labelOption = {
	       normal: {
	           //show: true,
	           position: myChart.config.position,
	           distance: myChart.config.distance,
	           align: myChart.config.align,
	           verticalAlign: myChart.config.verticalAlign,
	           rotate: myChart.config.rotate,
	           formatter: '{c}',
	           fontSize: fontSize,
	           rich: {
	               name: {
	                   textBorderColor: '#fff'
	               }
	           }
	       }
	   };

	  valueData = getSeriesData(chartDataStr,categories);
	  var option = {
		   color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
		           '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
		           '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
		           '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'shadow'
		        }
		    },
		    legend: {
		        data: nameData
		    },
		    toolbox: {
		        show: true,
		        orient: 'vertical',
		        left: 'right',
		        top: 'center',
		        feature: {
		            mark: {show: true},
		            dataView: {show: true, readOnly: false},
		            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
		            restore: {show: true},
		            saveAsImage: {show: true}
		        }
		    },
		    calculable: true,
		    xAxis: [
		        {
		            type: 'category',
		            axisTick: {show: false},
		            data: yearCount,
		            axisLabel:{
		            	interval:0,
		            	rotate:rotateNumber,
		            	formatter:function(value,index)  
                        {  
		            		 var ret = "";//拼接加\n返回的類目項  
                             var valLength = value.length;//X軸類目項的文字個數  
                             var rowN = Math.ceil(valLength / maxLength); //類目項須要換行的行數  
                             if (rowN > 1)//若是類目項的文字大於3,  
                             {  
                                 for (var i = 0; i < rowN; i++) {  
                                     var temp = "";//每次截取的字符串  
                                     var start = i * maxLength;//開始截取的位置  
                                     var end = start + maxLength;//結束截取的位置  
                                     //這裏也能夠加一個是不是最後一行的判斷，可是不加也沒有影響，那就不加吧  
                                     temp = value.substring(start, end) + "\n";  
                                     ret += temp; //憑藉最終的字符串  
                                 }  
                                 return ret;  
                             }else{
                            	 return value;
                             }
                        }  
		            }
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            scale: true
		        }
		    ],
		    series: valueData
		};
	    myChart.setOption(option);
	    // 圖形報表
}

//數據解析
function getSeriesData(param,param1){
	var cType = "bar";//餅圖
	cType = "line"//這裏默認爲線圖
	var returnData = [];
	actionData = param.replace("[","").replace("]","").replace(" ","");
	if(actionData != null && actionData != ""){
		var data = actionData.split(",");
		for (var i = 0; i < data.length; i++) {
			var obj = {};
			var objct = data[i].split(":");
			obj.name = objct[0];
			nameData.push(objct[0]);
			obj.type = cType;
			obj.barGap = 0;
			obj.label = labelOption;
			var values = objct[1].split(";");
			obj.data = values;
			returnData.push(obj);
		}
	}
	return returnData;
}

2個圖表顯示效果圖: