最近做项目接到新的需求，根据本身系统结构数据做一个图形化展示，要求好看易用，有交互，就说了这么多，然后就要求两天给一版瞅瞅，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. MyBatis model、xml、mapper 自动生成，附源码

    Mybatis 代码自动生成 model.xml.mapper 代码结构图 代码地址 https://github.com/shootercheng/codegen 需要修改的地方见 readme

  2. pytorch Model Linear实现线性回归CUDA版本

    实验代码 import torch import torch.nn as nn #y = wx + b class MyModel(nn.Module): def __init__(self): su ...

  3. Android | 教你如何快速集成机器学习能力

    背景   继上篇博文说了如何快速集成扫码以后 我又上官网去了解了一下其他的功能,其中机器学习服务是当下比较火的,而且还是免费的.就赶紧点进去学习一下.看看能够快速实现哪些功能. 链接在这里:https ...

  4. tp5.0--多个条件查询全部数据

    用where来查询的话(非主键): 查找:

  5. Python学习17之类3继承

    '''''''''继承:在继承原有类功能的基础上,增加新的功能(属性或者方法),形成新的类被继承的类:父类新的类:子类 格式:class 子类(父类) class 子类(父类1,父类2,父类3...) ...

  6. Window+Protobuf使用说明

    Window+Protobuf使用说明 C++WindowCmakeProtocbuf 介绍 起因 由于项目中要用到二进制存储数据,之前使用的方式是按照字节数依次将数据写入字节流中, 但是这样做起来做 ...

  7. java中ThreadPool的介绍和使用

    文章目录 Thread Pool简介 Executors, Executor 和 ExecutorService ThreadPoolExecutor ScheduledThreadPoolExecu ...

  8. C# 基础知识系列- 14 IO篇 文件的操作

    0. 前言 本章节是IO篇的第二集,我们在上一篇中介绍了C#中IO的基本概念和一些基本方法,接下来我们介绍一下操作文件的方法.在编程的世界中,操作文件是一个很重要的技能. 1. 文件.目录和路径 在开 ...

  9. mysql硬件优化

    导致宕机的原因: 1.      运行环境: 35%,运行环境可以看做是支持数据库服务器运行的系统和资源集合,包括操作系统,硬盘以及网络 2.      性能:35% 3.      复制 20% 4 ...

  10. P1516 青蛙的约会和P2421 [NOI2002]荒岛野人

    洛谷 P1516 青蛙的约会 . 算是手推了一次数论题,以前做的都是看题解,虽然这题很水而且还交了5次才过... 求解方程\(x+am\equiv y+an \pmod l\)中,\(a\)的最小整数 ...