单个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相关的,还有一些是导出功能需要用到的
附上效果图