单个WEB页面展示多个Echarts图表

单个WEB页面展示多个Echarts图表

 

由于业务的需要，需要把多个数据报表放到同一个页面上，同时，对该页面添加一键导出EXCEL、WORD、PDF功能

 

Echarts初级上手比较简单，直接依葫芦画瓢照着DEMO修改，拉取数据展示即可，但如果同时需要把十几个、几十个展示出来且放到同一个页面上就稍微复杂些了，需要考虑到页面拉取数据并发问题，数据拉取速率、界面展示等等诸多问题

最开始尝试用原生javaweb来直接对多个div进行异步取值赋值操作，效果不太好，最开始设想的就是一个DIV，对应一个echarts的展示图表，想想对js这边函数有极大的压力，且有许多重复的js函数，所以就换了一种思路

 

核心思想就是，模块化地对需要展示的数据进行操作，不同的图表调不同的函数，求同存异

 

var daoShiTop;
var daoShiTimeSlot;

var $searchButton ;
var medianame;
var color = ['#00a6ba', '#E73278', '#8dc556', '#ffa704', '#a092f1', '#3cb371', '#ffaf51'];
var paramsMap ={
		USERCOUNT:"收视人数",
		VIEWCOUNT:"收视次数",
		PERVIEWSECOND:"平均收视时长",
		UV:"收视人数",
		PV: "收视次数"
}


function hideDiv() {
	console.log("隐藏方法");
	document.getElementById("main").style.display = "none";
}

function showDiv() {
	console.log("显示方法");
	document.getElementById("main").style.display = "";
}

function bulidRankingEchart(qdi,div,yName,fields,type,productname,ordertype,title){
	var param = {
			qdi: qdi,
			starttime: document.getElementById("datetimepicker").value,
			endtime: document.getElementById("datetimepicker2").value,
			productname:productname
	};
	param = param;
	$.ajax({
		async: true,
		data: param,
		url: '/DaoShi/' + qdi,
		dataType: 'json',
		success: function (res) {
			var resultDate = res;
			var echartsData = bulidRankingData(resultDate,yName,fields,type);
			if(type=="ranking"){
				echartsData.yData = echartsData.yData.slice(-20);
				echartsData.seriseData = echartsData.seriseData.map(function (currentValue) {
					var tempValue = currentValue;
					tempValue.data = tempValue.data.slice(-20);
					return tempValue;
				});
			}
			div.clear();	

			var option = buildRanking(echartsData.yData, echartsData.seriseData, echartsData.params,title);
			div.setOption(option);
			window.onresize = div.resize;
			$("#"+div._dom.id).html('<img src="' + div.getDataURL() + '"/>');
		}
	});
}

function bulidRankingData(data,yName,fields,type){
	var yData = [];
	var seriseData = new Map();
	for(var i = 0 ,len = fields.length;i<len;i++){
		seriseData.set(fields[i],{
			name:paramsMap[fields[i]],
			type:"bar",
			lineStyle : {
				normal : {
					width : 3,
					shadowColor : 'rgba(0,0,0,0.4)',
					shadowBlur : 10,
					shadowOffsetY : 10
				}
			},
			label:{
				normal:{
					show:true,
					position:type=="ranking"?"right":"top",
							formatter:function(params){
								return  getNumSeparator(params.value);
							}
				}
			},
			itemStyle: {
				normal: {
					color: color[i]
				}
			},
			data:[]
		});
	}

	for(var i = 0 ,len = data[yName].length;i<len;i++){
		yData.push(data[yName][i]);
		seriseData.forEach(function (value,key,map) {
			value.data.push(data[key][i]);
		});
	}
	var seriseTemp = [];
	var legendData = [];
	seriseData.forEach(function (value,key,map) {
		seriseTemp.push(value);
		legendData.push(value.name)
	});

	return {
		yData:yData,
		seriseData:seriseTemp,
		params:{
			legendData:legendData,
			type:type
		}
	};
}


function buildRanking(yData,seriesData,params,title){
	var option =  {
			title : {
				text : title,
				subtext : '',
				x : 'left'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				top:"4%",
				data:params.legendData||[""]
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '4%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				boundaryGap : [ 0, 0.01 ],
				splitLine:{
					show:false	
				}
			},
			yAxis: {
				type: 'category',
				data: yData,
				inverse:params.type == "ranking" && params.legendData.length > 1,
				axisLabel:{
					textStyle: {
						fontFamily: '微软雅黑',
						fontSize: 13,
						color: '#00a6ba'
					}
				},
				splitLine:{
					show:false	
				}
			},
			series: seriesData,
	};
	if(params.type=="bar"){
		var temp = option.xAxis;
		option.xAxis = option.yAxis;
		option.yAxis = temp;
		option.xAxis.type="category";
	}

	return option;
}

function myDate() {
	var mydate = new Date();
	var year = mydate.getFullYear();
	var month = mydate.getMonth() + 1;
	var day = mydate.getDate() ;
	if(day == "1")
	{
		if(month=="1")
		{year = year - 1;
		month = 12;}else
		{	month = month - 1 ;
		if(month=="1"||month=="3"||month=="5"||month=="7"||month=="8"||month=="10"||month=="12")
		{day = "31";}
		if(month=="4"||month=="6"||month=="9"||month=="11")
		{day = "30";}
		if(month=="2")
		{
			if (year % 400 == 0)
			{ day = 29;}else
			{if (year % 4==0&&(year % 100 != 0))
			{
				day =  29;
			}
			day =  28;
			}
		}
		}
	}else
	{
		day = day -1;
	}
	if (month < 10)
	{month = "0" + month;}
	if(day<10)
	{day = "0" + day;}
	document.getElementById("datetimepicker").value = year + "/"
	+ month + "/" + day;
	document.getElementById("datetimepicker2").value = year + "/"
	+ month + "/" + day;
}

function init() {
	$searchButton = $('#searchButton');
	//订购
	rhdbOrder_vip =  echarts.init(document.getElementById("rhdbOrder_vip"));
	rhdbOrder_tbyy =  echarts.init(document.getElementById("rhdbOrder_tbyy"));
	rhdbOrder_4k =  echarts.init(document.getElementById("rhdbOrder_4k"));
	rhdbOrder_cf =  echarts.init(document.getElementById("rhdbOrder_cf"));
}

function initView() {
	//订购
	bulidRankingEchart("RHDB4KTbyyServlet",rhdbOrder_vip,"pagename",["totle"],"bar","VIP","","PP订购情况");
	bulidRankingEchart("RHDB4KTbyyServlet",rhdbOrder_tbyy,"pagename",["totle"],"bar","productname","","YY订购情况");
	bulidRankingEchart("RHDB4KTbyyServlet",rhdbOrder_4k,"pagename",["totle"],"bar","4K","","XX订购情况");
	bulidRankingEchart("RHDBCFOrderChartServlet",rhdbOrder_cf,"mediacode",["totle"],"ranking","","","ZZ订购情况");
 
}

function initListener() {
	$searchButton.click(function () {
		initView();
	});
}
$(function () {
	
	myDate();
	init();
	initView();
	initListener();

});

 

JS主要都是ECHARTS和jQuery相关的，还有一些是导出功能需要用到的

附上效果图