42

echarts tree (树图) 实现自定义节点图标 自定义样式 点击节点后线条变色 自适应高度...

 3 years ago
source link: https://blog.csdn.net/Qin_HongKun/article/details/113196204
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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


一、实现效果

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

方式2:Demo演示地址

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

二、源码提供

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

三、代码分享

HTML代码如下:

<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;">

JS代码如下:

var svgAdd = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAABtCAYAAABJJPQvAAAACXBIWXMAABcRAAAXEQHKJvM/AAAJP0lEQVR4nO2dTWgbRxTHR01IcWiwwKWlIcaGQHK0wKf0YoVcU6JTeox6Eu2lKrn1EgV6DVEuKT5VPraXyqTXgHxJTgKbQiGmAYmEhpYaLFJsGhpU/uu3G33s7ryZnf2S5gciIVntrva/782bNzNvCsPhUFiyz3tWo3xwelZ+SKHWLQkhij7/tTvcXD9M4ZaMkhvXV6h1V4UQpZFPkf6+qHCaPSEEROsIIXok4m6Mt22MzApFwpRHPisxXm6HxGtnVbhMCUXiVIQQVSHEWkq3MYBgQojWcHO9k9I9TJEJoQq1rivOjdRvZpw+BCPRemneSGpCFWrdIllPI2a3Zoot3GtagqUiVKHWrZNAKoFAVkhFsESFIhfXzIkFyYBg9aRC/0SEoiABvn4j9osly4Csqxn3VWMXKi43t7hwSpSWz4qi8+dC6LGHx2/F7otjcXj0n9h7eWzyNlwQ3lfjdIexCUXBQtuUFa1dWBCVUtERB5/VpTPa5+rsv3aE231xJNq7h2Jw/NbELQ7IFbZMnGySWIQq1LplEimSFd1YKzri4FM8e8rcDU4AwVpPDxzR+gdvop5ua7i5XjV9j8aFIld3X/f7K0tnRP3ax6J6ZSlWcYKAtbWeHIitpwdRToNUVdlkoGFUqEKtC7O/pfPdjUvnRP3aR471ZIHDo7ei+fhP0Xz8l65rRGe5YiolZUwoXZHQ9jQ/XxblS+eM3IdpXMHu/vJK58wDsqzIYhkRSkckRG2Nz847VpQHegdvRLXVEzv7r1Xv1ohYkYXSEQlBQqu6mkobFBUEHBBM0R1GFiuSUKoiwYqaN5dF9dMl7WtmAbjDyvfPVa0rkljaQhVqXfTGv+Yej7YIVoQ+0KzQePSHatsFsVZ1okEtoQq1LvoJP3CPR0TX/vJiLl2dDITy9Z9eqLhCrdBdeXILzU1gi3TrypLo3L40kyIBuHH8Prh1JmuUmFZCSaiRtBALiAR3N+vAnSuKdYsSA2xULarFHaKYF5FcNMRqkHdiwRaKxpJYQ+XzJpKLoliL9OKzYAlFLo91Uje6m1cglsLvXyvUug1jQlHjJ82EI6HauX2ZecrZBfnK+zeXub+vTgOroUiFoiELVqd2VkNwHZAaQwaGwSInCpT2owq1bocz+Ic3KK28HfoyLcmwBNqOpEEGY/XbX7l9rKth8whD556TNUlFcoco0qJ38K9OsjR24F3aX10UV+/tcy7VoFnBvshcH6uhm+fgQQaGb5gucIMMw5dAobjWdOf6J5HmL8wDeJGZIXugYYRZlNSacHEMm1vCgQtkNg0bQZ1gX6EoXJRaE4YsbJTHAy/0Cs/z+KaWgixKmofCRfM+rpQkeKEb189zrlihBMMYQUJJpztZl6cOOsKMtmqRFk+MMSUU5fRCsxC4GKZzWdRQaKvkQvkdNHVAzBMiZ5nqpx9yft2NSffnJ1RgLO+Sl5lDWQRdmQ3e1LgxgxkTikLD0PEmBBGzNO8hDZjNxpjBTFqU1JqyMpM1zzCfoRUqbdC+Y9xOwsro8MekUNKh4axOPc4bzBfe08MTiqKM0PaJ2QhaGJQvs57ltFA8a/rAamCI0gVWQOY1RUpC2WjPHGinGLk/3zZK6jTtcIZZVpfel53Pa4qsRaUIpylxIz+2RSlMLLSYZUqoUKw1mYcZ+TmMTm5hT6/lwpkdZAJMbpFR5k0wiUxcs51GhTJelyhLs4OyOEuJiZrrs6SGFSpPWKGyj1NfaVSowbw/kYwyJVQuqhXPEpibzoXt+lDYyWIWlWc6Gp6HrtLWqQeEXFYSQyPoBsiqguV4iMbxdKcn/iF06SfeAJUMBSZoJjFJk1PvIY1lNzI6+/9Ij3HLHIy6Pmndg170WnaWsecpzaj03b8oBRO2nTIHAglGEUev9KmSUBxTtfDo8FJa3gpETyjyhf3Ar+Q7X5Y5mEJ5xjMZnjOsyoplgs6zaEJJNw1BvTpLNBCUMcp690fLc08KJa1zZIWKDvMZjhnNmFCkYGg7hUjFRn/RaD35m/P9MaPxSyFJrQqViy16MN2eCLUoQlrzCKarklC0vAMVnxlsTxZenBKKap6Guj/k/ZgXtIyAlxvzSBhMebWg7LnUqpKYtDJr4OVmJLcHfvt7aAuFoMK2VXxOCt2znpfvs/cViqK/bdkZkbW2bRUPpjWJoEpjYQOH0tJktq3i0eN7n+2gPagChaKSZDuyM2McyParwqn/yC63HWgcRqqLYQsEiz/oymzvsTIRO2H1+kKF4loVOnBoryzjoP1WeIlDyxpxJrew6nNbFzgN9u9gurwt2Z4dUqHoBA84V8NEfBsFnoBtIJjjdwOOMYSWKh2hQYWsQhcS4O0p33vmVGpOsgRPUrOduCD78IDfx2xw9ulgb6JCxax+5hw7rwXqBQ2sMmvICgogpLU9hMoEzOHmept2c5aCjRznMRJEG115+Jx7+IBTbs9FdZFAnbbVkTJvYkEktNEKE1WVNlhWEop8aZW7oGBexEJfSVGkB+Sh2CSy0Rfq/iQdYCQFAocvtpRexr3h5rryMlyt9VGUhv+Gezw6xKXvfpu5fha8hapInMJgfiS6GaVIeWsIUyDJWnn4O3dI3SWdzSi9E2iIhT4Pwvc8VoJBFhzpslxt7+qdRHPDZFgWNk3OA+gfNR69yu+Gyd6JNLcgR+Em1APPag11uDlYkOYm/9nagtw72cnuYnd0vps1wSIKJChwqKj0lcIwKpR4F7qzdnDzw9mh4MqSU3Y6jTYMfSK0QxEXROyQSMamFRsXSryr9tzm7jAaBPpfEAxlPeMUDeK4H50lsBPcHW6uswZcVYhFKDG+gSVrp1EZsDTUs8WntLygXUQLwzC7L4+c1RRY72VwKdGArEi60EKH2IRyoax7K45aS7C44tnTjrWFWZy7AC/G9V3blLuLbQVF7EKJGKwrQ2BGcV01b6dDIkK50C5vTdovPc8M6Hc047SisWeXpFDeRU8iw0bUYCMltmhUNtFhgVSE8i5+Ilg9BxY2INfdTFogl1SF8m7ixCVWaYcX40FHBPbIxbWTcnFBZEIoFwo6KvRJK/DoUx+wZSL1Y4pMCTUJhfawtnKM7nFAq/s6ZDmZHJLOtFCTkIssUelvdwBOursp0adKKO4HwvSyKswkuRJqnrGlSnOCFSonWKHygBDif9o1JBjHQj7SAAAAAElFTkSuQmCC'
var svgD = 'image://data:image/png;base64,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'

以上代码中引用了三个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添加样式、​​​​​​


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK