echarts 树图样式美化_echarts2 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;//最右侧节点,用于计算偏移量

//构建tree

function 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不至于完全充盈dom

var 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 i=0; 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目录下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/514247.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电商直播平台如何借助容器与中间件实现研发效率提升100%?

简介&#xff1a; 经过实际场景验证及用户的综合评估&#xff0c;电商直播平台借助全面的云原生容器化能力和中间件产品能力&#xff0c;大幅提升开发部署运维效率达50%~100%&#xff0c;极大地提升了用户体验&#xff0c;为业务持续发展打下了坚实的基础。 前言 直播带货是近…

在游戏运营行业,Serverless 如何解决数据采集分析痛点?

简介&#xff1a; 众所周知&#xff0c;游戏行业在当今的互联网行业中算是一棵常青树。在疫情之前的 2019 年&#xff0c;中国游戏市场营收规模约 2884.8 亿元&#xff0c;同比增长 17.1%。2020 年因为疫情&#xff0c;游戏行业更是突飞猛进。玩游戏本就是中国网民最普遍的娱乐…

字节大战腾讯元宇宙;Docker 自己定制镜像;VMware 云桌面助力秦皇岛市第一医院;微软开源 Cloud Katana;...

NEWS本周新闻回顾字节大战腾讯元宇宙&#xff1a;布局社交产品Pixsoul&#xff0c;上线游戏“重启世界”字节投资的代码乾坤&#xff0c;已于近日正式上线了元宇宙游戏《重启世界》。就在两个月前&#xff0c;被称为“元宇宙第一股”的Roblox登陆国内&#xff0c;由腾讯改名为《…

standard python venv module_python 在venv中报错 ModuleNotFoundError: No module named 'MySQLdb'

环境Win7&#xff0c;Python 3.6.5,情况脚本中有import MySQLdb 直接执行可以执行&#xff0c;但是在创建的venv 中执行&#xff0c;执行失败提示ModuleNotFoundError: No module named MySQLdb。运行pip install MySQLdb 报错提示&#xff1a;(prod) D:\mysite\crawler>pyt…

从 RxJS 到 Flink:如何处理数据流?

简介&#xff1a; 前端开发的本质是什么&#xff1f;响应式编程相对于 MVVM 或者 Redux 有什么优点&#xff1f;响应式编程的思想是否可以应用到后端开发中&#xff1f;本文以一个新闻网站为例&#xff0c;阐述在前端开发中如何使用响应式编程思想&#xff1b;再以计算电商平台…

Spring RSocket:基于服务注册发现的 RSocket 负载均衡

简介&#xff1a; RSocket 作为通讯协议的后起之秀&#xff0c;核心是二进制异步化消息通讯&#xff0c;是否也能和 Spring Cloud 技术栈结合&#xff0c;实现服务注册发现、客户端负载均衡&#xff0c;从而更高效地实现面向服务的架构&#xff1f;这篇文章我们就讨论一下 Spri…

双非院校计算机系毕业的学生能进大厂吗?

谈到大厂&#xff0c;我们常常会主动匹配与之对应的高学历。其实不论是大厂还是小公司&#xff0c;都是会筛简历的&#xff0c;这个毋庸置疑。从大厂招聘的结果上看&#xff0c;高学历人才的数量占据大头&#xff0c;而那些成功进入BAT、网易等大厂的专科生、二本三本学生&…

python如何提高程序可读性_提高Python的可读性?

我最近一直很喜欢Python编程.我来自对C语言编码的强烈热爱的背景,其中一切都可能比它应该更复杂(但至少把头发放在胸前).因此,从C转换到Python以获得不需要大量速度的更复杂的事情,这对于编写项目来说更是一种福音.然而,就肉眼可以看到的来自括号和圆括号和结构的土地,我遇到了…

Python - 深夜数据结构与算法之 Heap Binary Heap

目录 一.引言 二.堆与二叉堆介绍 1.Heap 堆 2.Binary Heap 二叉堆 3.HeapifyUp 添加节点 4.HeapifyDown 删除节点 5.Heap 时间复杂度 6.Insert & Delete 代码实现 三.经典算法实战 1.Smallest-K [M14] 2.Sliding-Window-Max [239] 3.Ugly-Number [264] 4.Top-…

如何 0 改造,让单体/微服务应用成为 Serverless Application

简介&#xff1a; 随着 2013 年以 Docker 为代表的容器技术、CNCF 基金会以及 K8s 的发展等&#xff0c;云原生开始被广大开发者所熟知。云原生时代之前还有两个阶段&#xff1a;一是自建 IDC 机房&#xff0c;二是简单地把原有的应用搬迁到云上。自建 IDC 机房很难获得高可用、…

一文了解阿里一站式图计算平台GraphScope

简介&#xff1a; 随着大数据的爆发&#xff0c;图数据的应用规模不断增长&#xff0c;现有的图计算系统仍然存在一定的局限。阿里巴巴拥有全球最大的商品知识图谱&#xff0c;在丰富的图场景和真实应用的驱动下&#xff0c;阿里巴巴达摩院智能计算实验室研发并开源了全球首个一…

c++如何禁用指定的键盘布局_Karabiner Elements for Mac 键盘键位自定义改键工具

文章来源于&#xff1a;风云社区Karabiner Elements for Mac 12.5Karabiner Elements&#xff08;早期是Karabiner&#xff0c;更早是KeyRemap4MacBook&#xff09;是功能强大且稳定的macOS键盘定制器。上【风云社区】&#xff0c;搜索软件名字&#xff0c;即可查看下载特征&am…

Docker Desktop 向大公司宣告收费,网友大呼:是时候弃用了!

作者 | 苏宓 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 在容器引擎 Docker 诞生的 8 年间&#xff0c;其与开源的容器编排 Kubernetes 共同推动容器技术在云计算领域的应用&#xff0c;也让自身在全球范围内受到了广泛的关注。可以说&#xff0c;做过云计算开…

如何接地气地接入微前端?

简介&#xff1a; 微前端带来明显好处的同时&#xff0c;也面临着痛点。对于已有站点&#xff0c;如何在老的技术栈基础上接入一个微前端&#xff1f;需要哪些通 一 、前言 微前端&#xff0c;这个概念已经在国内不止一次的登上各大热门话题&#xff0c;它所解决的问题也很明显…

hasp运行不成功_提问:程序无报错或警告,但总是运行不成功,会卡住没反应...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼// test8.cpp : 定义控制台应用程序的入口点。//以下是一个将一个含12个元素的无序数组排列后再用二分法找到数字在第几位的程序#include "stdafx.h"#include "iostream"using namespace std;void go(int [],i…

东南亚再造天猫 Lazada品牌商城LazMall举办第二届品牌未来论坛

9月1日&#xff0c;东南亚领先的旗舰电商平台Lazada在新加坡滨海湾金沙会展中心举办了2021 LazMall Brands Future Forum年度品牌未来论坛&#xff08;以下简称“BFF”&#xff09;。该论坛以“奔向未来&#xff1a;东南亚的数字商务时代”为主题&#xff0c;在庆祝Lazada品牌商…

高可用的本质

简介&#xff1a; 无论是一个域&#xff0c;一个BG&#xff0c;还是一个站点&#xff0c;虽然范围有大有小&#xff0c;对象有所不同&#xff0c;但其高可用的理念都是相通的&#xff0c;今天将自己对高可用的一点点思考以及总结的【nPRT公式】分享给大家。 我是乐羊&#xff0…

技术干货 | 深度解构 Android 应用面临紧急发版时的救星方案:mPaaS 热修复——DexPatch

简介&#xff1a; 关于 Android 热修复方案——DexPatch 的介绍与使用说明 方案介绍 为了解决 Native 模块上线后的问题&#xff0c;mPaaS 提供了热修复功能&#xff0c;实现不发布客户端 apk 场景下的热修复。目前 Android 端热修复主要包括 andfix 和 dexpatch&#xff0c;考…

李飞飞:阿里云数据库已做好全面服务政企市场的准备

“政企市场是检验云数据库产品竞争力的黄金标准。”9月3日&#xff0c;阿里云智能数据库事业部总负责人李飞飞在北京举办的媒体沟通会上表示&#xff0c;阿里云已经做好全面服务政企数据库市场的准备&#xff0c;并已成功助力多家大型组织实现核心系统对传统商业数据库的替换。…

技术改变生活 浅谈阿里云混合云的探索与实践

简介&#xff1a; 也许你并不了解“阿里云混合云”&#xff0c;甚至没有听说过“混合云”&#xff0c;然而它却在幕后“默默”改变着人们的生活。 也许你并不了解“阿里云混合云”&#xff0c;甚至没有听说过“混合云”&#xff0c;然而它却在幕后“默默”改变着人们的生活。大…