devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts tree (树图) 实现自定义节点图标 自定义样式 点击节点后线条变色 自适应高度 搜索后节点关键字标红 写的很详细，建议收藏！_echarts树图自定义图标

作者：Monodyee | 2024-04-15 11:24:22

赞

踩

echarts树图自定义图标

前言

网上找了好久资料，没有一个完整实例，所以研究出来立马发布，共享下，希望能帮助到大家。

 

一、实现效果

方式1：提供视频方式大家看下符不符合要求

 

方式2：Demo演示地址

点击此处，可查看演示地址 https://it__distant_branch.gitee.io/echarts-tree/

二、源码提供

      免费下载源码地址，点击下载 https://download.csdn.net/download/Qin_HongKun/14935641

 

三、代码分享

 

HTML代码如下：

  1. <title>Tree</title>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <style>
  4.     #echart-id {
  5.         width: 100%;
  6.         height: calc(100% - 85px);
  7.         padding: 20px;
  8.         background-color: #fbfbfb;
  9.         overflow: auto;
  10.     }
  11.     
  12.     .search-con {
  13.         width: 70%;
  14.         margin: 0 auto;
  15.         text-align: center;
  16.     }
  17.     
  18.     #tip-botton {
  19.         display: black;
  20.         position: absolute;
  21.         z-index: 999999999;
  22.         pointer-events: none;
  23.     }
  24.     
  25.     .height-auto {
  26.         height: 100%;
  27.     }
  28.     
  29.     .overflow-auto {
  30.         height: calc(100% - 45px);
  31.         overflow: auto;
  32.         overflow-x: hidden;
  33.     }
  34. </style>
  35.  
  36. <body>
  37.     <div>
  38.         <input class="gxtb-echart-search-input" type="text" id="search-canves-input" name="title" required lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input" style="width:calc(100% - 120px);display: inline-block;height:45px;border: 2px solid #06c;padding-left: 2px;">
  39.         <button onclick="searchCanves()" class="layui-btn" style="width:80px;height: 42px;">搜索</button>
  40.  
  41.     </div>
  42.     <div class="overflow-auto">
  43.  
  44.         <div id="echart-id">
  45.         </div>
  46.     </div>
  47. </body>
  48. <script src="./js/jquery.js"></script>
  49. <script src="./echarts/echarts.js"></script>
  50. <script src="./data/data.js"></script>

JS代码如下：

  1. <script>
  2.     //存储echart对象
  3.     $chart = ''
  4.         /**
  5.          * 判断是否存在值
  6.          * @param {Object} data
  7.          * @param {Object} value
  8.          */
  9.     var is_exit_value = function(data, value) {
  10.             var is_exit = false
  11.             if ($.isArray(data)) {
  12.  
  13.                 $.each(data, function(index, item) {
  14.                     if (item == value) {
  15.                         is_exit = true
  16.                     }
  17.                 })
  18.             }
  19.             return is_exit
  20.         }
  21.         //获取子节点数量
  22.     var getEchartNotExpandCount = function(list, options, isjs) {
  23.             $.each(list, function(i, k) {
  24.                 var flag = true;
  25.                 $.each(options.data, function(i, kk) {
  26.                     if (kk === k) {
  27.                         flag = false;
  28.                     }
  29.                 })
  30.                 if (flag && !isjs) {
  31.                     options.lengthH++;
  32.                     options.data.push(k)
  33.                 }
  34.                 if (k.children.length) {
  35.                     getEchartNotExpandCount(k.children, options)
  36.                 }
  37.             })
  38.         }
  39.         //获取某个节点父节点，一直递归获取
  40.     var getEchartParentNode = function(item, options) {
  41.             var flag = false;
  42.             options[item.dataIndex] = item
  43.             if (item.parentNode) {
  44.                 getEchartParentNode(item.parentNode, options)
  45.             }
  46.  
  47.         }
  48.         //根据某个echart节点中所唯一索引来获取某个节点
  49.     var getEchartNode = function(list, dataIndex, options) {
  50.             var flag = false;
  51.             $.each(list, function(i, k) {
  52.                 if (flag)
  53.                     return;
  54.                 if (k.dataIndex == dataIndex) {
  55.                     console.log(dataIndex, k)
  56.                     options.data = k
  57.                     flag = true;
  58.                     return
  59.                 } else if (k.children.length) {
  60.                     getEchartNode(k.children, dataIndex, options)
  61.                 }
  62.  
  63.             })
  64.         }
  65.         //设置点击某个节点之后选中线条变色，其他节点线条变成未选中颜色
  66.     var setLineStyle = function(node) {
  67.             //获取当前点击的节点,用来获取当前节点下是否存在点击的索引  存在说明是父级，则更换颜色 否则正常颜色
  68.             var currentParentNode = {}
  69.             getEchartParentNode(currentNode, currentParentNode)
  70.             if (node.dataIndex in currentParentNode) {
  71.                 node.data.lineStyle = {
  72.                     color: '#ED143D',
  73.                     borderColor: '#ED143D'
  74.                 }
  75.             } else {
  76.                 node.data.lineStyle = {
  77.                     color: '#2979ff',
  78.                     borderColor: '#2979ff'
  79.                 }
  80.             }
  81.         }
  82.         /**
  83.          * 节点点击收缩或者放大之后，获取隐藏的节点数量跟所有节点的数量，从而实现自适应高度
  84.          * */
  85.     var resize = function() {
  86.             var id = document.getElementById('echart-id')
  87.             var elesArr = $chart._chartsViews[0]._data.tree._nodes
  88.             var options = {
  89.                 lengthH: 0,
  90.                 lengthZh: 0,
  91.                 data: []
  92.             }
  93.             var lengthH = elesArr.length
  94.             var isTowExpand = false;
  95.  
  96.             $.each(elesArr, function(i, i1) {
  97.                     //获取点击的节点
  98.                     if (i1.dataIndex == currentIndex) {
  99.                         currentNode = i1
  100.                     }
  101.                     //获取未展开节点下的子节点数量
  102.                     if (!i1.isExpand && i1.children.length) {
  103.  
  104.                         getEchartNotExpandCount([i1], options, true)
  105.                     }
  106.                     //获取所有二级节点，如果都未展示，指定固定宽度
  107.                     if (i1.depth === 2 && i1.isExpand) {
  108.                         console.log(i1)
  109.                         isTowExpand = true;
  110.                     }
  111.                     if (i1.isExpand) {
  112.  
  113.                     }
  114.                 })
  115.                 //减去为展开节点数量
  116.             lengthH = lengthH - options.lengthH
  117.             var height = $(".overflow-auto").height(); // 这里限制最小高
  118.             var currentHeight = 35 * (lengthH - 1) || 200;
  119.             var newHeight = Math.max(currentHeight, height);
  120.             id.style.height = newHeight + 'px';
  121.             var paramOptions = {
  122.                 width: $("#echart-id").width()
  123.             }
  124.             if (!isTowExpand) paramOptions = {
  125.                 width: $("#echart-id").width() / 2 + "px"
  126.             }
  127.             $chart.resize(paramOptions);
  128.         }
  129.         //保存点击后的节点值
  130.     var currentIndex = ''
  131.     var currentNode = {}
  132.         //搜索后重新渲染echart 
  133.     searchCanves = function() {
  134.         currentIndex = ''
  135.         $chart && $chart.showLoading();
  136.         //dataJson 从./data/data.js定义的
  137.         setChart(dataJson, [$(".gxtb-echart-search-input").val()])
  138.  
  139.     }
  140.     var setChart = function(data, keywords) {
  141.             //echart对象存在则销毁，目的当请求后台之后，树的数据发生该百年，重新渲染树，否则会导致树的数据不正确
  142.             if ($chart) {
  143.                 $chart.dispose();
  144.             }
  145.             $chart = echarts.init(document.getElementById('echart-id'));
  146.             //树的节点点击事件
  147.             $chart.on('click', function(params, params1) {
  148.                 //获取当前节点唯一索引值
  149.                 currentIndex = params.dataIndex
  150.                 if (params.componentType === 'series') {
  151.                     // 点击到了 series 上
  152.                     if (!params.value) {
  153.                         // 点击节点收缩放大之后，重新计算高度，实现自适应高度
  154.                         resize()
  155.                     }
  156.                 }
  157.                 //如果点击的是最后一级执行
  158.                 if (!params.data.children) {
  159.                     location.href = 'https://blog.csdn.net/Qin_HongKun?spm=1011.2124.3001.5343'
  160.                 }
  161.  
  162.             });
  163.             //初始化echart 参数
  164.             $chart.setOption(option = {
  165.                 height: "100%",
  166.                 backgroundColor: "#fbfbfb",
  167.                 series: [{
  168.                     //默认只展开两级，当有检索条件时全部展开
  169.                     initialTreeDepth: $("#search-canves-input").val().trim() ? 4 : 1,
  170.                     // 当此节点下还有子节点时候，设置的节点样式，用于区别 没有子节点的节点的样式
  171.                     itemStyle: {
  172.                         normal: {
  173.                             color: '#06c',
  174.                             borderColor: '#06c',
  175.                         },
  176.                         emphasis: {
  177.                             borderColor: '#06c',
  178.                             color: '#06c'
  179.                         }
  180.                     },
  181.                     lineStyle: {
  182.                         color: '#2979ff',
  183.                     },
  184.                     type: 'tree',
  185.                     data: [data],
  186.                     top: '1%',
  187.                     left: '200px',
  188.                     bottom: '1%',
  189.                     right: '250px',
  190.                     symbolSize: 18,
  191.                     symbol: function(params, params1, params2) {
  192.                         //点击之后 实现连接线变色
  193.                         setLineStyle(params1)
  194.                             //加号svg 
  195.                         var svgAdd = 'image://data:image/png;base64,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'
  196.                             //减号svg
  197.                         var svgD = 'image://data:image/png;base64,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'
  198.                             //最后一级展示圆圈图标
  199.                         if (!params1.data.children) {
  200.                             return 'emptyCircle'
  201.                         } else
  202.                         if ($chart._chartsViews[0]._data) {
  203.                             //此列表中可以获取节点是否展开
  204.                             var treeList = $chart._chartsViews[0]._data.tree._nodes
  205.                                 //获取唯一索引
  206.                             var dataIndex = params1.dataIndex;
  207.                             //获取节点
  208.                             var currentTreeNode = {}
  209.                             getEchartNode(treeList, dataIndex, currentTreeNode)
  210.                             console.log("currentTreeNode=>", currentTreeNode)
  211.                             if (!currentTreeNode.data.isExpand && params1.data.children.length) {
  212.                                 return svgAdd
  213.                             }
  214.                         } else {
  215.                             //节点没有展开，显示+号图标
  216.                             if (params1.data.children.length) {
  217.                                 return svgAdd
  218.                             }
  219.                         }
  220.                         return svgD
  221.                     },
  222.                     label: {
  223.                         position: 'left',
  224.                         verticalAlign: 'middle',
  225.                         align: 'right',
  226.                         color: '#293c55',
  227.                         margin: [2, 4],
  228.                         borderWidth: 1,
  229.                         borderColor: '#aaa',
  230.                         backgroundColor: 'white',
  231.                         borderRadius: 2,
  232.                         padding: [5, 4],
  233.                         rich: {
  234.                             keywords: {
  235.                                 color: "red",
  236.                                 fontSize: '12'
  237.                             },
  238.                             index: {
  239.                                 fontSize: 12,
  240.                                 color: '#2979ff',
  241.                                 position: '10%'
  242.                             },
  243.  
  244.                         },
  245.                         formatter: function(data, data1) {
  246.                             var newName = data.data.name
  247.                                 //默认样式
  248.                             data.data.label = {
  249.                                     fontSize: 12,
  250.                                     padding: [5, 4],
  251.                                     backgroundColor: 'rgb(238, 243, 246)',
  252.                                     borderColor: 'rgb(115, 161, 191)',
  253.                                     color: '#000000',
  254.                                 }
  255.                                 //如果是最后一级，设置样式不带框
  256.                             if (!data.data.children) {
  257.                                 // debugger
  258.                                 data.data.label.borderWidth = 0
  259.                                 data.data.label.fontSize = 12
  260.                                 data.data.label.padding = [5, 4]
  261.                                 data.data.label.backgroundColor = 'transparent'
  262.                                 data.data.symbolSize = 12
  263.                                 data.data.label.color = '#2979ff'
  264.                             } else
  265.                                 newName = data.data.children.length >= 0 ? newName + '(' + data.data.children.length + '类)' : newName;
  266.                             var arr = []
  267.                                 //关键字标红
  268.                             if (keywords.length) {
  269.                                 var splitName = newName
  270.                                 $.each(keywords, function(index, item) {
  271.                                     splitName = splitName.replace(item, '`' + item + '`')
  272.                                 })
  273.                                 $.each(splitName.split('`'), function(i, item) {
  274.                                     if (is_exit_value(keywords, item))
  275.                                         arr.push('{keywords|' + item + '}');
  276.                                     else
  277.                                         arr.push(item);
  278.                                 })
  279.                             } else {
  280.                                 arr.push(newName);
  281.                             }
  282.                             return arr.join('');
  283.                         },
  284.                     },
  285.                     leaves: {
  286.                         label: {
  287.                             position: 'right',
  288.                             verticalAlign: 'middle',
  289.                             align: 'left',
  290.                         }
  291.                     },
  292.  
  293.                     expandAndCollapse: true,
  294.                     animationDuration: 550,
  295.                     animationDurationUpdate: 750
  296.                 }]
  297.             }, true);
  298.             $chart.hideLoading();
  299.             resize()
  300.         }
  301.         /**
  302.          * 初始化echarts数据
  303.          * */
  304.     searchCanves()
  305. </script>

以上代码中引用了三个js 提供链接，点击之后可以打开对应代码，可下载可复制

<script src="./js/jquery.js"></script>

<script src="./echarts/echarts.js"></script>

<script src="./data/data.js"></script>

总结

echart tree中一些实现方式，官方并没有提供，可以通过一些奇妙的方式解决哈哈，希望能帮到大家。

实现 echarts tree  label样式修改、symbol图标自定义、formatter添加样式、​​​​​​

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/427587
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号