响应式的网站建设一个多少钱,正规免费网站建设公司,WordPress显示插件,WordPress免费外贸企业主题看到网上关于echarts tree的资料有点少#xff0c;做项目恰巧遇到这个#xff0c;把一些获得分享给大家。从echarts、官方API中我们似乎只能定义根节点的位置#xff0c;并不能指定树图整体的大小以及其整体在dom显示的位置#xff0c;在tree生成过程中只是以根节点…看到网上关于echarts tree的资料有点少做项目恰巧遇到这个把一些获得分享给大家。从echarts、官方API中我们似乎只能定义根节点的位置并不能指定树图整体的大小以及其整体在dom显示的位置在tree生成过程中只是以根节点向下方左右两边扩展。从echarts官网提供的API我们可以知道var chart echarts.init(dom); chart.getZrender();获取其封装的canvas库ZRender实例通过调整这个实例来干预其基层模块自定义其显示。下面为大家分享我的实现自定义显示tree整体效果的过程由于中间测试数据占的行数太多我就不整个贴出来源码了进提供关键部分的代码及说明。想要完整代码的朋友可以下载附件。(由于是项目中的设计抽取出来经过修改来分享的有些实现部分可能看起来怪怪的大家见谅看关键部分就ok了)依旧是贴出关键点源码请至下方github地址下载var myGlobalTreeChart;var treeNodePadding 50; //节点间最小间隔var treeTopPadding 120; //tree距顶端的距离var rightNode;//最右侧节点,用于计算偏移量//构建treefunction doGlobalTreeChart(ec,data) {myGlobalTreeChart.setOption(getGlobalTreeOption());//生成图表后做调整adjustTreeView();}//调整tree显示function adjustTreeView() {var zr myGlobalTreeChart.getZrender();var domWidth zr.painter.getWidth();var treeWidth getTreeWidth(zr);if (treeWidth domWidth)return;var adjustSize domWidth / treeWidth * 0.95; //多缩小0.05不至于完全充盈domvar lastNodeX rightNode.style.x * adjustSize;var rightOffset (domWidth - lastNodeX) - (domWidth - treeWidth * adjustSize)/2; //尽可能的让其居中zr.painter._layers[1].scale [ adjustSize, adjustSize, 0, 0 ]; //前两个为缩放大小后两个为缩放原点zr.painter._layers[1].position [rightOffset, treeTopPadding ]; //偏移量myGlobalTreeChart.refresh();}//计算最左边节点和最右边节点(symbol为image或icon)的间隔即为树图宽度function getTreeWidth(zr) {var nodes zr.storage._roots;var max 0;var min 0;for(var i0; i nodes.length; i){if(nodes[i].type image || nodes[i].type icon){var nodeX nodes[i].style.x;if(nodeX max){max nodeX;rightNode nodes[i];continue;}if(nodeX min){min nodeX;}}}return max - min;}调整前由于tree过大显示以根节点为中心的部分(测试数据最底层节点显示不要在意)调整后根据最左侧和最右侧节点坐标调整至居中显示完整源码https://github.com/hzhqk/echarts.git下的dynamic echarts tree目录下
