echarts饼图钻取方案

1.渲染函数里增加参数URL，指定钻取使用的网址。

renderPie({ec:ec,id:'KD',text:'幼儿园设备分布',data:['无设备','DVR','NVR','DVR+NVR'],value:eval('${KDNum}'),unit:'所',url:"${ctx}/system/statistics/userpie/KD.do"});

2.渲染函数里，检查是否有URL参数，有则实现点击事件，为了区分点的部位，我们使用参数param里的name变量做URL的参数。

function renderPie(indexs){

 // 基于准备好的dom，初始化echarts图表

    var myChart = indexs.ec.init(document.getElementById(indexs.id)); 

    var option = getOption({text:indexs.text,data:indexs.data,value:indexs.value,unit:indexs.unit});

    // 为echarts对象加载数据 

    myChart.setOption(option); 

    if(indexs.url!=null && indexs.url!=''){

        var ecConfig = require('echarts/config');

        myChart.on(ecConfig.EVENT.CLICK, function(param){

        var url=indexs.url+"?name="+param.name;

        art.dialog.open(url,{title: param.name, width: 900, height: 450,lock:true});

        });

    }

}

3.服务器端根据name参数进行查询，得到不同的数据并在网页显示。

                String name = request.getParameter("name");

Page page = getPage(request);

 

String NVR="=",DVR="=";

if(name!=null){

if(name.contains("NVR")) NVR=">";

if(name.contains("DVR")) DVR=">";

}

 

Map index = new HashMap();

index.put("NVR", NVR);

index.put("DVR", DVR);

index.put("page", page);

List

page.setList(kindergartens);

model.addAttribute("page", page);

model.addAttribute("name", name);

 

return "system/statistics/userpie/KD";