最近做项目接到新的需求，根据本身系统结构数据做一个图形化展示，要求好看易用，有交互，就说了这么多，然后就要求两天给一版瞅瞅，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. java 方法的重载、重写与重构

    首先我们要知道重载.重写.重构的区别 重载:指的是在同一个类中,方法名相同,但是参数数量.参数类型或者返回类型不同的方法就叫做重载. 重写: 重写分两种.第一种的是在子类继承父类的情况下,通过@Ove ...

  2. Zookeepe的安装和集群的配置

    Zookeepe的安装和集群的配置 一.Zookeeper的简介 Zookeeper是个框架 二.Zookeeper在Linux上安装 官方提供的下载服务器 地址1:http://mirror.bit ...

  3. linux--配置开发环境 --Apache篇

    现在我的的linux服务器上一般都是使用:Apache 和  Nginx 这两种配置. 你现在安装好了,启动了,也无法通过你服务器绑定的网址访问你的网站. 这是你可以通过这个命令查看一下你的80端口: ...

  4. phpcms 后台分页

    php 代码public function init() { $where='';//条件 $page = $_GET['page'] ? intval($_GET['page']) : '1'; $ ...

  5. c++中set 的用法

    1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...

  6. js 实现文字滚动功能，可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  7. cmd命令行中无pip命令的解决办法

    cmd命令行中无pip命令的解决办法 只需简单的两步即可,按顺序执行以下命令(在cmd中): python -m ensurepip python -m pip install --upgrade p ...

  8. 【BUG之group_concat默认长度限制】

    2019独角兽企业重金招聘Python工程师标准>>> 问题:mysql数据库使用group_concat将多个id组成字符串数组,一共200个,到160个被截断: 原因:mysql ...

  9. 谈谈JavaScript中的变量、指针和引用

    1.变量 我们可能产生这样一个疑问:编程语言中的变量到底是什么意思呢? 事实上,当我们定义了一个变量a时,就是在存储器中指定了一组存储单元,并将这组存储单元命名为a.变量a的值实际上描述的是这组存储单 ...

  10. 自动安装带nginx_upstream_check_module模块的Nginx脚本

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 #!/bin/bash    useradd -s /sbin/no ...