最近做项目接到新的需求，根据本身系统结构数据做一个图形化展示，要求好看易用，有交互，就说了这么多，然后就要求两天给一版瞅瞅，MMP，真把前端当神了（你倒是把待遇提到神的地位啊...）

唉，吐槽归吐槽，还得做，主要是丢不起这个脸....

言归正传，准备echarts,jquery,ui用的layui。

初始页面效果图：

默认展开系统与子系统。

效果分析：系统与子系统有子数据时，图例渲染为实心圆，颜色不同区分，无子数据时为空心圆。

点击2级子系统空心圆时提示：

有数据时点击实心圆请求子系统下数据加载实例

然后点击某一个加载详情查看

，就是这样的一个效果。。

后续有时间再更新，其他小伙伴有需要用到的可以私信我要完整版代码！！！！

彩蛋：

一个为刷新还原按钮，一个为保存图例为图片的按钮：效果杠杠的...

Echarts关于tree树数据渲染图例最新实例的更多相关文章

  1. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

  2. vue项目echarts画布删除历史数据重新渲染数据

    vue用到echarts时,根据select多选下拉框进行echarts折线图渲染.发现折现只能增加不能减少,后来根据echarts API文档发现 调用方式: chart.setOption(opt ...

  3. 第二百二十六节，jQuery EasyUI，Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一．加 ...

  4. iview tree 绑定数据

    官方文档 :https://www.iviewui.com/components/tree 效果图 1 主体分析 <Tree ref="tree" :data="t ...

  5. Tree( 树) 组件[2]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一． 异步加载如果想从数据库里获取导航内容, 那么就必须 ...

  6. Tree( 树) 组件[1]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一． 加载方式//class 加载方式<ul c ...

  7. JQuery Easy Ui （Tree树）详解（转）

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

  8. 探索未知种族之osg类生物---状态树与渲染树以及节点树之间的关系

    节点树 首先我们来看一个场景构建的实例,并通过它来了解一下“状态节点”StateGraph 和“渲染叶”RenderLeaf 所构成的状态树,“渲染台”RenderStage 和“渲染元”Render ...

  9. jQuery EasyUI API 中文文档 - Tree树使用介绍

    用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppable 用法 Tree 能在 <ul> 元素里定义,此标记可以定义为叶节点和子节 ...

随机推荐

  1. LDA概率主题模型

    目录 LDA 主题模型 几个重要分布 模型 Unigram model Mixture of unigrams model PLSA模型 LDA 怎么确定LDA的topic个数? 如何用主题模型解决推 ...

  2. php获取远程文件内容的函数

    一个简单的php获取远程文件内容的函数代码,兼容性强.直接调用就可以轻松获取远程文件的内容,使用这个函数也可获取图片.代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  3. NC使用练习之通达OA-2017版本漏洞复现后续

    利用上一篇通达OA的漏洞环境,练习NC工具的使用. 步骤: 1.本机启动nc.exe监听端口: 确认端口是否成功监听成功: 2.用冰蝎将nc.exe上传至目标机: 3.用命令行在目标机启动nc.exe ...

  4. JDK 14的新特性:instanceof模式匹配

    JDK 14的新特性:instanceof模式匹配 JDK14在2020年的3月正式发布了.可惜的是正式特性只包含了最新的Switch表达式,而Records,patterns,text blocks ...

  5. Linux利用sed批量修改文件名

    初始文件名 # ls -lh total 5.5G -rw-r--r-- 1 root root 193K Sep 28 09:38 20180908.txt drwxr-xr-x 2 root ro ...

  6. Java Web：jstl处理字符串

    用法:${fn:methodName(args....)} 在使用这些函数之前必须在JSP中引入标准函数的声明<%@ taglib prefix="fn" uri=" ...

  7. SQL语句学习（二）

    为一张表添加外键: 这里我们希望再建一张订单的表为t_order,包含order_id,customer_id和price: ) NOT NULL auto_increment PRIMARY KEY ...

  8. 《高性能Linux服务器构建实战》——第1章轻量级HTTP服务器Nginx

    第1章 轻量级HTTP服务器Nginx本章主要介绍Nginx的配置管理和使用.作为一个轻量级的HTTP服务器,Nginx与Apache相比有以下优势:在性能上,它占用很少的系统资源,能支持更多的并发连 ...

  9. Python爬虫，抓取淘宝商品评论内容!

    作为一个资深吃货,网购各种零食是很频繁的,但是能否在浩瀚的商品库中找到合适的东西,就只能参考评论了!今天给大家分享用python做个抓取淘宝商品评论的小爬虫! 思路 我们就拿"德州扒鸡&qu ...

  10. 写给MongoDB开发者的50条建议Tip21

    本系列文章翻译自<50 Tips and Tricks for MongoDB Developers>,暂时没有找到中文版,反正自己最近也在深入学习mongodb,所以正好拿来翻译一下.一 ...