echarts 点击事件_ECharts中FromLefttoRightTree树形图后台数据构造与节点点击事件

最近在做一个项目中涉及到了百度ECharts中From Left to Right Tree树形图的使用，。虽然ECharts使用有些年头了，但是在后台数据构造时还是浪费了一点时间。

现在记录一下，算是留做备份吧。同时也给需要的童鞋做个参考。

后端代码如下：

一：树节点对象：

class Node {    public String id;    public String name;    public String value;    public String parentId;    public Node(String id, String name, String parentId, String value) {        this.id = id;        this.name = name;        this.value = value;//可以用来保存节点记录的ID，以便后续操作；        this.parentId = parentId;    }    public String getValue() {        return value;    }    public void setValue(String value) {        this.value = value;    }    public String getId() {        return id;    }    public void setId(String id) {        this.id = id;    }    public String getName() {        return name;    }    public void setName(String name) {        this.name = name;    }    public String getParentId() {        return parentId;    }    public void setParentId(String parentId) {        this.parentId = parentId;    }}

二：指定节点所有子节点获取方法：

    /**     * 获取当前节点的所有子节点     *      * @param nodeId      *待获取子节点信息的节点ID     * @param nodes      * 所有节点集合；     * @return     */    public static List getChildNodes(String nodeId,            Map nodes) {        List list = new ArrayList();        for (String key : nodes.keySet()) {            if (nodes.get(key).getParentId().equals(nodeId)) {                list.add(nodes.get(key));            }        }        return list;    }}

三：通过递归方式，构造树形图json数据；

/** *  * 递归处理 数据库树结构数据->树形json *  * @param nodeId *  * @param nodes *  * @return */public static JSONArray getNodeJson(String nodeId, Map nodes) {// 当前层级当前node对象// 当前层级当前点下的所有子节点(实战中不要慢慢去查,一次加载到集合然后慢慢处理)List childList = getChildNodes(nodeId, nodes);JSONArray childTree = new JSONArray();for (Node node : childList) {JSONObject o = new JSONObject();o.put("name", node.getName());o.put("value", node.getValue());o.put("id", node.getId());JSONArray childs = getNodeJson(node.getId(), nodes); // 递归调用该方法if (!childs.isEmpty()) {o.put("children", childs);}childTree.fluentAdd(o);}return childTree;}

四：使用示例：

@SuppressWarnings("unchecked")@RequestMapping(value = "/getTreeData", method = { RequestMethod.POST,        RequestMethod.GET })public void getTreeData(HttpServletRequest request,            HttpServletResponse response) throws Exception {        Long id = Long.parseLong(request.getParameter("id"));        Temple tem = templeService.getByProerties("id", id);        Map nodes = new HashedMap();        nodes.put("1", new Node("1", tem.getTempName(), "0", "0"));        nodes.put("2", new Node("2", "活动", "1", "0"));        nodes.put("3", new Node("3", "人员", "1", "0"));        nodes.put("4", new Node("4", "场所", "1", "0"));        nodes.put("5", new Node("5", "文物", "1", "0"));        // 查询活动信息；        List relicList = relicService.queryByProerties("relicTempleId",                id.intValue());        for (Relic pl : relicList) {            nodes.put("5_" + pl.getId(), new Node("5_" + pl.getId(), pl                    .getRelicName(), "5", pl.getId() + ""));        }        // 查询活动信息；        List actionList = actiionService.queryByProerties(                "actionTempleId", id.intValue());        for (Action pl : actionList) {            nodes.put("2_" + pl.getId(), new Node("2_" + pl.getId(), pl                    .getActionName(), "2", pl.getId() + ""));        }        // 查询场所信息；        List pList = placeService.queryByProerties("placeTempleId", id                .intValue());        for (Place pl : pList) {            nodes.put("4_" + pl.getId(), new Node("4_" + pl.getId(), pl                    .getPlaceName(), "4", pl.getId() + ""));        }        // 人员信息；        List monksList = monksService.queryByProerties("monksTempleId",                id.intValue());        for (Monks pl : monksList) {            nodes.put("3_" + pl.getId(), new Node("3_" + pl.getId(), pl                    .getMonksLegalName(), "3", pl.getId() + ""));        }        writeJSON(response, JSON.toJSONString(getNodeJson("0", nodes)));}

前端代码如下：

一：树形图

MainElement.search = function() {url = "http://127.0.0.1/sms/mainElement/getTreeData?id=" + nodeId;data = MainElement.getData(url)var myChart = echarts.init(document.getElementById('treeChart'));myChart.on("click", MainElement.clickFun);myChart.showLoading();myChart.hideLoading();myChart.setOption(option = {tooltip : {trigger : 'item',triggerOn : 'mousemove'},legend : {orient : 'vertical',data : [ {name : 'tree2',icon : 'rectangle'} ],borderColor : '#c23531'},series : [ {type : 'tree',data : data,top : '15%',left : '15%',bottom : '15%',right : '15%',symbolSize : 15,label : {position : 'left',verticalAlign : 'middle',align : 'right'},leaves : {label : {position : 'right',verticalAlign : 'middle',align : 'left'}},expandAndCollapse : true,animationDuration : 550,animationDurationUpdate : 750} ]});};

二：节点点击事件处理

1：添加点击事件

var myChart = echarts.init(document.getElementById('treeChart'));//初始化echarts对象；myChart.on("click", MainElement.clickFun);//给节点添加点击事件；

2：点击操作逻辑

// 关键点！MainElement.clickFun = function(param) {if (typeof param.seriesIndex == 'undefined') {return;}console.log(param.data.id);if (param.type == 'click') {var nodeId = param.data.id;//添加自己的业务处理逻辑；}}

#ECharts #树形图 #点击事件 #Tree