Echarts柱状图点击跳转新页面

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 链接并在链接后添加参数

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);

    });

}

完整的简单案例如下：

点击“高跟鞋”的柱子，跳转到百度网页搜索“高跟鞋”，Echarts网页控制台打印数据如下：

将url写在datas里面并不实用，

参考文章

echarts 柱状图点击事件

echarts图表点击图表进行跳转链接