最近做项目接到新的需求，根据本身系统结构数据做一个图形化展示，要求好看易用，有交互，就说了这么多，然后就要求两天给一版瞅瞅，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. .NET Core 3 WPF MVVM框架 Prism系列文章索引

    .NET Core 3 WPF MVVM框架 Prism系列之数据绑定 .NET Core 3 WPF MVVM框架 Prism系列之命令 .NET Core 3 WPF MVVM框架 Prism系列 ...

  2. tp5中“前置操作”和“钩子函数”的区别

    1.实行顺序: 以下都是标为删除前的操作: 点击删除  ->  前置操作  ->  删除方法(用模型删除)  ->  触发钩子函数(删除)  ->  删除成功 2.传入的参数: ...

  3. htaccess 一般配置

    一.Apache服务器 <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine on Rewr ...

  4. 2019-2020-1 20199325《Linux内核原理与分析》第一周作业

    1.显示一句话welcome !/bin/bash script4-1.sht var1="welcome to use Shell script" echo $var1 pwd ...

  5. 设置共享内存大小 【windows】

    hMapFile = CreateFileMapping( INVALID_HANDLE_VALUE, // use paging file NULL, // default security PAG ...

  6. [Qt]执行cmd命令

    要加 /c 参数 QProcess p; p.start("cmd", QStringList()<<"/c"<<"ping ...

  7. Prometheus+Grafana 监控 Docker

    cAdvisor (Container Advisor) :用于收集正在运行的容器资源使用和性能信息. https://github.com/google/cadvisor Prometheus(普罗 ...

  8. CSS开发技巧（一）：button样式设置

    button样式需要注意的有几点: 1.建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调: 2.建议有一个padding,以免内部文本显得过于拥挤: 2.hover时需要有颜色变化,以告 ...

  9. js数组排序和打乱

    js数组根据不同的业务需求,会要求数组有序或者无序,记录一下流传较广,通用性较强的排序和乱序方法. 数组排序: arr.sort(function(a,b){//从小到大 return a-b;[re ...

  10. Centos7下查询jdk安装路径

    今天一个小实验需要安装jdk,用命令java -version查询了一下,原来Centos7自带OpenJDK的环境,但是需要手动配置/etc/profile文件,于是开始找java的安装路径.... ...