1、operationPortal 文件夹下 ApplicationResources.properties 加入improveSubPageUrl
2、处理类中 ReportFormAction.improvementInfoInit( ) 中提取链接
String improveSubPageUrl = ResourceUtil.getString("improveSubPageUrl", "sys-operationPortal").trim();
request.setAttribute("improveSubPageUrl",improveSubPageUrl); //改善二级页面URL
return mapping.findForward("improveDetail");
3、主页面 improvement.jsp 将二级页面链接加入 Echarts 链接并在链接后添加参数
<script>
//改善课题Echarts
$(function () {
var groupList = ${groupOutputRate}
var groupName = groupList[0];//组别名
var totalNum = groupList[1];//提报总数
var finishNum = groupList[2];//完成数
var personAverage = groupList[3];//人均产出
var maxTotalNum = array_max(totalNum);//取出提报总数中最大的
var maxPersonAverage = array_max(personAverage);//取出人均产出中最大的
var chart = {
dom: 'chart',
name:'(个) ',
xAxis: groupName,
yAxis1: { min: 0, max: maxTotalNum, interval: Math.ceil(maxTotalNum/3) },
yAxis2: { min: 0, max: maxPersonAverage, interval: Math.ceil(maxPersonAverage/3) },
legend: [ '累计课题','已完成', '人均产出率'],
total: totalNum,
comNum: finishNum,
comRate: personAverage,
subPageUrl:'${improveSubPageUrl}&groupName='
}
console.log(chart);
createRateChart(chart);
</script>
4、createCharts.js文件中增加跳转功能
function createRateChart(obj) {
var chart = echarts.init(document.getElementById(obj.dom));
……
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
//点击跳转二级页面
chart.on('click', function(params) {
console.log(params);
window.open(obj.subPageUrl+params.name);
});
}
完整的简单案例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EChartsTest</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//创建初始数组
var datas = [3500,3600,3880,3880,3880];
/*var datas = [
{value:3500,url:'https://www.baidu.com/'},
{value:3600,url:'https://www.baidu.com/'},
{value:3880,url:'https://www.baidu.com/'},
{value:3780,url:'https://www.baidu.com/'},
{value:3580,url:'https://www.baidu.com/'}
]; */
//创建柱状图显示时所用的数组,>50的截取50,<50的取真实值
var formatDatas = [];
datas.forEach(function(value){
if (value > 50) {
formatDatas.push(50);
} else {
formatDatas.push(value);
}
});
// 指定图表的配置项和数据
var option = {
title: {
text: "ECharts 入门示例"
},
//提示框取默认值,即鼠标移动到柱状图会显示内容
tooltip: {
trigger: 'axis', //触发类型;轴触发,axis则鼠标hover到一条柱状图显示全部数据,item则鼠标hover到折线点显示相应数据,
axisPointer: { //坐标轴指示器,坐标轴触发有效,
type: 'cross', //默认为line,line直线,cross十字准星,shadow阴影
crossStyle: {
color: '#fff'
}
}
},
//图例
legend: {
data:['销量']
},
//X轴内容
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
//Y轴坐标最大值和最小值
yAxis: [{
position:'left',
//min:0,
//max:120,
//interval:50
},{
position:'right',
min:0,
max:100
}],
//显示数据
series: [{
name: '销量',
type: 'bar',
data: datas,
yAxisIndex:0
}],
//鼠标移动到某一条柱状图,会显示对应数据
//formatter: function(param) {
//调试代码
//return typeof(param)=='string' ? param:datas[param.dataIndex];
//}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//点击事件
myChart.on('click', function(params) {
console.log(params);
var name = params.name;
window.open('https://www.baidu.com/s?ie=UTF-8&wd='+name);
//window.open(params.data.url);
});
</script>
</body>
</html>
点击“高跟鞋”的柱子,跳转到百度网页搜索“高跟鞋”,Echarts网页控制台打印数据如下:
将url写在datas里面并不实用,
参考文章