Echarts_echarts 花括号-CSDN博客

本文链接：https://blog.csdn.net/qq_39550368/article/details/114289315

文章目录

Echarts 可视化图标库

Echarts 可视化图标库

main

1、五分钟案例

1.1、引入资源

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/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 option = {
            title: {
                text: '五分钟案例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

效果如下💁

2、与后台交互

给个点击事件，此事件最好是查询事件，点击后，请求后台，传递Echars规定的数据结构。再用Js接收

// 默认引用 jquery 
$("#seach").click(funcation(){
	search();
})

// ajax 请求
funcation seach(){
	var code = $("#code").val();
    $.ajax({
        url: "/eachrs/seach",
        data: {code:code},
        type: "get",
        dataType: "json",
        success: function (data) {
            treeDiagram(data);
        }
    });
}

function treeDiagram(datas) {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    myChart.showLoading();
    myChart.hideLoading();
    datas.children.forEach(function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });
    myChart.setOption(option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',
                data:[datas],
                top: '1%',
                left: '45%',
                bottom: '1%',
                right: '45%',

                symbolSize: 17,
                label: {
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right',
                    fontSize: 17,
                    textStyle: {
                        color: '#000000'
                    }
                },
                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },
                emphasis: {
                    focus: 'descendant'
                },
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    });
    option && myChart.setOption(option);
}

treeDiagram 方法是 Echars 默认提供的大括号图形结构，可以根据自身要求在官网中查找所需

3、树形结构详解

最终返回的数据结构是（二级案例）

children：
1->
children：[]
code：“门诊次均药品费用增幅”
name：“住院次均费用”

2->
children：[]
code：“门诊次均药品费用增幅”
name：“去年同期住院次均费用”

name ：“门诊次均药品费用增幅”

展示浏览器后台单引数据如下：

展示浏览器最终效果如下：

3.1、后台组装数据详解

数据库中原始数据:

TAB	NODE	PARENT_NODE
1	住院次均费用	门诊次均药品费用增幅
2	去年同期住院次均费用	门诊次均药品费用增幅

实现代码如下：

1、查询数据

List<Dictionary> tree = indexDefineDao.findTree(code);

解析：查询条件为： 门诊次均药品费用增幅

以此为根节点，利用 START WITH 查询出所有数据，在后台进行组装

SELECT PARENT_NODE as CODE,NODE as NAME FROM TAB C
START WITH C.PARENT_NODE = '门诊次均药品费用增幅'
CONNECT BY  PRIOR  C.NODE = C.PARENT_NODE

Dictionary为自定义对象内有属性： CODE、NAME

可以查询出：

1 门诊次均药品费用增幅住院次均费用
2 门诊次均药品费用增幅去年同期住院次均费用

2、组装数据

将上述数据拼接成如下结构

name：'门诊次均药品费用增幅',
children: {[
   	{
       name: '住院次均费用',
       children:{}
    },{
       name: '去年同期住院次均费用',
       children:{}
    }
]}

TreeNodeMap 自定义类，请查看 TreeNodeMap.md 文件

private List<TreeNodeMap> compositeTree(List<Dictionary> treeMap,String parentId) {
    List<TreeNodeMap> l = new ArrayList<TreeNodeMap>();
    TreeNodeMap n;
    for (Dictionary k : treeMap) {
        if(parentId.equals(k.getCode())){
            n = new TreeNodeMap();
            n.setChildren(compositeTree(treeMap, k.getName()));
            n.attr("name",k.getName());
            n.attr("code",k.getCode());
            l.add(n);
        }
    }
    return l;
}

到这一步，就快成功了，到目前，我们的数据是 List

TreeNodeMap treeNodeMap = new TreeNodeMap();
treeNodeMap.attr("name",name);
treeNodeMap.setChildren(treeNodeMaps);

我们再拼接一个根 name 就可以了

最终返回到前端是类型是 TreeNodeMap

3、前端ajax获取

获取数据后，再次调用 treeDiagram();

最终能到动态查询展示

好了到这我们的分享也就结束了😉 希望以上方法可以帮到您，祝您工作愉快！💖 👇 对您有帮助的话记点赞得收藏哦！👍 我是 Xiang想从一个小白一步一步地变成工具人 😛

TreeNodeMap.java 源码附下：

package net.gbicc.core.util.ext;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import net.gbicc.core.Constant;
/**
 * 此方法可自定义传到前台的数据类型
 * ClassName:TreeNodeMap
 * @author   Leo D.J
 * @Date   2013-12-30 下午03:15:58
 */
public class TreeNodeMap extends HashMap<String, Object> {
   private static final long serialVersionUID = 787979937037454849L;
   public TreeNodeMap(){}
   public TreeNodeMap(String id,String text){
      attr("id",id);
      attr("text",text);
   }
   
   public TreeNodeMap(String id,String text,boolean leaf){
      attr("id",id);
      attr("text",text);
      attr("leaf",leaf);
   }
   public void setChecked(boolean checked){
      attr("checked",checked);
   }
   public void setExpanded(boolean expanded){
      attr("expanded",expanded);
   }
   public void setChildren(List<TreeNodeMap> children){
      attr("children",children);
   }
   public TreeNodeMap addChildren(TreeNodeMap node){
      List<TreeNodeMap> children = getChildren();
      if(null == children) setChildren(new ArrayList<TreeNodeMap>());
      children = getChildren();
      children.add(node);
      return this;
   }
   @SuppressWarnings("unchecked")
   public List<TreeNodeMap> getChildren(){
      List<TreeNodeMap> children = (List<TreeNodeMap>) get("children");
      return children;
   }
   public Object attr(String k){
      return get(k);
   }
   public void attr(String k,Object v){
      put(k,v);
   }
   public void setLeaf(boolean leaf){
      attr("leaf",leaf);
   }
   
   public String getParentId(){
      return (String) get("parentId");
   }
   
   public void setParentId(String parentId){
      attr("parentId",parentId);
   }
   
   public String getId(){
      return (String) get("id");
   }
   public String getText() {
      return (String) get("text");
   }
   public static String NODE_ATTRI_NAMES = "id,text,checked,leaf,parentId,expanded,children,code";
   public static String[] attrArr = NODE_ATTRI_NAMES.split(",");
   private static String getTreeNodeAttrName(String key){
      for (int i = 0,l = attrArr.length; i <l; i++ ) {
         String attrName = attrArr[i];
         if(attrName.toLowerCase().equals(key.toLowerCase()))
            return attrName;
      }
      return null;
   }
   
   public static List<TreeNodeMap> createNodes(List<Map<String, Object>> list){
      return createCheckedNodes(list,false,null,new String[]{});
   }
   public static List<TreeNodeMap> createNodes(List<Map<String, Object>> list,String[] extraAttrNames){
      return createCheckedNodes(list,false,null,extraAttrNames);
   }
   /**
    * 转换，可转以下字段
    * id,text,checked,leaf,parentId,expanded,children
    * @param list
    * @param widthChecked 是否需要
    * @param checkedName
    * @return    
    * @throws 
    * @created 2013-12-30 下午04:55:35  
    */
   public static List<TreeNodeMap> createCheckedNodes(List<Map<String, Object>> list,boolean withChecked,String checkedColumnName){
      return createCheckedNodes(list, withChecked, checkedColumnName,new String[]{});
   }
   public static List<TreeNodeMap> createCheckedNodes(List<Map<String, Object>> list,boolean withChecked,String checkedColumnName,String[] extraAttrNames){
      List<TreeNodeMap> nodes = new ArrayList<TreeNodeMap>();
      for (Map<String, Object> map : list) {
         nodes.add(createNode(map, withChecked, checkedColumnName,extraAttrNames));
      }
      return nodes;
   }
   
   public static TreeNodeMap createNode(Map<String, Object> v,boolean widthChecked,String checkedName, String[] extraAttrNames){
      TreeNodeMap n = new TreeNodeMap();
      for(String key :v.keySet()){
         String attrName = getTreeNodeAttrName(key);
         if("parent_id".equals(key.toLowerCase()))attrName = "parentId";
         if(null != attrName)n.attr(attrName, v.get(key));
      }
      for (int i = 0 , l = extraAttrNames.length; i < l; i++) {
         String extraAttrName = extraAttrNames[i];
         Object extraAttrValue = v.get(extraAttrName.toUpperCase());
         if(extraAttrValue != null)n.attr(extraAttrName, extraAttrValue);
      }
      if(widthChecked){
         checkedName = checkedName == null ?"checked": checkedName;
         n.setChecked(v.get(checkedName.toUpperCase())!=null);
      }
      return n;
   }
   public TreeNodeMap copy(){
      TreeNodeMap m = new TreeNodeMap();
      for(String k : keySet())
         m.attr(k, get(k));
      return m;
   }
   private static List<TreeNodeMap> compositeTree(List<TreeNodeMap> unCompsityTreeMap,String parentId,boolean expaned) {
      List<TreeNodeMap> tree = new ArrayList<TreeNodeMap>();
      for (TreeNodeMap m : unCompsityTreeMap) {
         if(parentId.equals(m.getParentId())){
            m.setChildren(compositeTree(unCompsityTreeMap,m.getId(),expaned));
            m.setExpanded(expaned);
            tree.add(m.copy());
         }
      }
      return tree;
   }
   /**
    * 组装树节点，此仅适用于，从根节点开始完整的树节点 
    * @param unCompsityTreeMap
    * @return    
    * @throws 
    * @created 2014-1-3 上午10:17:27  
    */
   public static List<TreeNodeMap> compositeTree(List<TreeNodeMap> unCompsityTreeMap,boolean expaned) {
      return compositeTree(unCompsityTreeMap,Constant.TREE_ROOT_NODE_ID,expaned);
   }
}