echarts tree (树图) 实现自定义节点图标 自定义样式 点击节点后线条变色 自适应高度...
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.
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,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'
var svgD = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGcAAABnCAYAAAAdQVz5AAAACXBIWXMAABcRAAAXEQHKJvM/AAAI9klEQVR4nO2dwWsbRxTGR45JiUmwwCElwSaGFvdogU7JxYJcE+Je0mOUkyCXKPQPiEJ7LcinolPkay6VSa4B+ZKcBPIlEEPBIiGloQablJgGjMq3eitL8u7Om9nZ1a53fiDqGmt3st++N2/fzL6X6/f7Ii3kKp2SECIvhCjQkAv0/350hRAH9MHPe/1GcS81/96kipOrdHDhS/TBz9cNHn5bCNEmwdr9RvHA4LGNkRhxcpUOLGCdxMB/52M8/Y4QoimEaCXJsqYuTq7SWScx7k91ICe4QjWnbVFTEYespCyEqBp2V6bZFELU+41idxonj1UcEqVKnzjdVlgwR9X6jWI7zpPGJk6u0qmlUJRJIFI5rnkpcnFoTqkn3H2pskGWFOmcFJk45MIwsd6N5AQjrC5eEPm52eEvuu+/iMOj46hP24Mn6DeKrahOEIk4ZC1Nky5sbeWSKK1cFMsL34jly+dFYXFO5OfOSb8HoQ6OjkX73Wext/9VtHc/i97+V1PDEhQ0VKOwIuPi5CoduLBHYY8Da1gv5J1PYWnOzOAIR6R3nx2hWt0DE1YGK1o3HdUZE4fcGKKZVd1jXF84L8o3FkT55mWxvHDeyLg4QKDm632xtRPq5j8kC2qaGpcRcSjV0tZ1Y3BZ1VtXHCuZJrCo5ut/RP3VpzDWtNFvFKsm/hmhxQkzv0CU2p2rorRyKdQYTHPw5VjUX/0dRqTNfqNYDjusUOLkKh0M4Jnq9zCf1H9aSpwok0Ck2suPYuPVJ52vhxZIWxwdYeYvnHPcV+3ONa1zTgtEfOXmntj5cKQ6glACaYlDruwPle/AWloPv491ojdN7cVH8fTlX6pH1RZIWRydyf/RrSuifm9JZ3yJA1a0/vufqs9KWgIpiZOrdJZpgYolDNwYRCnfXFAdV6LBXFT67Z2qm3vcbxTrKl9gi6P6HANh2j+vGH+ATBKYhzbf7KuM6EeVdM+MwoHrVphxmuVlcf+GkldokvdhwRKHIjPWSmVWhHFRFAjTgTnLIaVZvjJrwrgoCrRKa1tSOJbDevrPqjAuigI9oag3kEBxyJ2tcQeXVWFcEJnieY6JNEHqKw5FZyx39uT21aknLZMA1pfwoA0vwmCVbn5fgiyHtd4/SF6mKx0TJciAwIswqZMReOIpDgUBT2THxx2iMJDMAC+CrAiDeTICvjhII3GODItJc64sSmq3rzmLhwyqftZzShyyGukzjbtAZvEG8w8zn+hrPV6Ww1rFq99btLJIgHtb461ZeVrPmDgj22QDQTyf9bCZC/Mmnqf94mNMWg5rd7+NzvjgJmY+nJ7yWJPiSF0aTmSDADWYc/PqZNZgKA4FAtKss7UadWA9zLlnbEoZtZxTPm8SnMBajR5M6xnTYFQcaSBQVlu7sIxe9UKek9a5PuraHHEoSgt0aTiwzZ+Fg7lcP7Semclf+IE9ZpyN4xZ/mJ6nNCmOdG3BWk14EBgwXNtwicYVp+T/twOsOGbgXEeqtzAUJ3C+GbycZF2aCZhbkB1PNuOqFETph2TvaU4ThSXWSulAHKwPSf9y0ebRTMHMSTqasMTBa34WczCyBWtscZL+qkba4GZZWOJYzMIRB5kC6b41ZsLOosDoa/kB5GejsBy8W7m3/1+m9FJx/cyITcxGUVkDL71qvGSUavqNovHhq7xlYImXvBUnucgDAsvUaFtxEswM1W2xJBCIk5pSvmcFFEXiIHVr27u8A1mMczBLr64HviCFV7tV1nNQ9ckuM/jTfS9/RR7lwWapWnnwwT58UXoCRu7IbqHyh5E9QXkwx61JC7hxlLbwYRSX6ApuQICSIhYzMK/lQBxO6cO2DQqM0d79l3Mox2DcaG076C97TpbZaNHSzMIMo53i4q44cuthxuYWyXWUe6FD15u54kjLwKNIqSUczEq8Qy0ccTiVjFA5Fs87Fn2YN/i4OO71l33LWo8+uLGZ129oKDNev/QDFWMtejBd2s5oEwslcfDwZMNqPVBll8FYPZyhOFSLX+raai+ytTfABAr9E8YMZDIrLa1khCy1tR41mDf09mRfnjFxKGqTLr5Z6+GDG5m57HKqQpfXeo61HoOgSCuDntfjjJc4dTdlHQTzpJkGvRCYc41nIahT4lBgIC2Ch5OiQrnFmz3+9en5tXXxW6ZmWQ92ddrlBG/gWZgdRHzLp3mKQ9bDqrmGQdi0zjhwZ8wgwNdqRNAGDyrtLo3c8GBaff6eM5BMAE/ymH89tGt8Sr/sgpLxaKuVdQY9Dna5V2FL1hQ2UBz68gbnTA829zKdGHWbTzDnmUPOjc/Zjlvj7grF/JPFAEGjK0iZ07pSKg4dhOXecNfArLMmEOZcBWG2uJ1AWBvZyb095fxtlgSCxRR+eavSpmWHe6MLjeZGLZV2xs/uL5+5xkYuGq4M80xJpdGr6isgZVKfBYKEs5hFgFco/PpWtfNUWbUDr07Ptjztq2L3bLu7mncqt5+F+jl4ZMAco9g/9IFO513dbofKTfVQyqr18LvUFpyAG0M0qtEiWbvjbpg+oVotj1FdF5XK02RFmtYiptIndPhlTYFgRaiym/Ry+1izwsKi5jtKoXtUm+hNXaC1b+V6BmjEgIYMSYvo3HS/YifDUbTmmElMdXUP1W7fbbVfvfXtVN0d0k8KGWUvjLbdNyLO8GCVTpPbFdEPzEkotRhX2UqExc03+44wil1zJ0GKa101XA7CqDjipM9bXacF/yiYlxDZQSTUijHV2AJRV5v2QBgQxGWLmy9Twbg44mQeauq6OS8gFgQqrVx0qi65xX1QRdHLFcIiDo6OHTHwM97Ow+t+Gp3Zg4Abq6m2NeYSiTgu1A+T1fsthWyTtUS20yVSccRJA4smt6VlCuiRtRiZ9IOIXBwXqsJbS7FIhzSX1k3PLX7EJo5LCkWKXRSX2MUZnnggErsh+RTo0U3UilsUl6mJMxzAYE5aJ6GMRXeaHFK2oynbfBEHUxdnlBGh8InL7fVIkDZ3+TguEiXOJOT6SlQ+ntW2TMIhvTnepXRTN8pQOCyJFscLesBFbgcfWWsZzBVOOiUJbkoJIcT/Jk39kPJ448gAAAAASUVORK5CYII='
以上代码中引用了三个js 提供链接,点击之后可以打开对应代码,可下载可复制
<script src="./js/jquery.js"></script>
echart tree中一些实现方式,官方并没有提供,可以通过一些奇妙的方式解决哈哈,希望能帮到大家。
实现 echarts tree label样式修改、symbol图标自定义、formatter添加样式、
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK