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

    var startX = 0, startY = 0, x = 0, y = 0, minDragRang = 50; var targetContainer = angular.element(do ...

  2. web自动化中pytest框架的使用（二）---参数化

    1.pytest--参数化 在测试用例的前面加上@pytest.mark.parametrize("参数名",列表数据) 参数名:用来接收每一项数据,并作为测试用例的参数 列表数据 ...

  3. 关于go的init函数

    亲测,如果加载一个包,如果一个包里的每个文件,均含有init函数,那么均会执行. 目前来看,init的执行顺序,是文件名称的自然排序进行执行的. 并且只是所加载包里的go文件的init函数执行,对于包 ...

  4. C# 基础知识系列- 14 IO篇之入门IO

    0. 前言 在之前的章节中,大致介绍了C#中的一些基本概念.这篇我们将介绍一下C#的I/O操作,这将也是一个小连续剧.这是第一集,我们先来简单了解一下C#中的I/O框架. 1. 什么是I/O I/O ...

  5. LeetCode 面试题56 - I. 数组中数字出现的次数 | Python

    面试题56 - I. 数组中数字出现的次数 题目 一个整型数组 nums 里除两个数字之外,其他数字都出现了两次.请写程序找出这两个只出现一次的数字.要求时间复杂度是O(n),空间复杂度是O(1). ...

  6. Scrapy爬虫框架(1)--安装配置与常用命令

    安装与配置 Scrapy有几个安装依赖,一般来说可以直接pip install scrapy,这个过程会自动下载安装其他几个依赖. 上述安装方法不成功,则需要手动安装依赖包 步骤 安装 lxmlpip ...

  7. tp5--开启与关闭调试模式

    https://www.cnblogs.com/finalanddistance/p/8906000.html TP5 显示错误信息   在TP5中,我们运行的代码有错误无法执行时,只显示页面错误,而 ...

  8. Net core项目实战篇01---EFCore CodeFirs For Mysql 数据库初始化

    从今天开始我们用Net Core进行项目实战,采用微服务构架,因此你会看到我各模块开始都是用的web api.项目中的代码直接可以复制.费话不多说,现在就来跟我一起开始吧! 1.打开VS2017—&g ...

  9. Vue 结合 echarts 原生 html5 实现拖拽排版报表系统

    前言 不知道各位 coder 有没有碰到过许多重复的业务需求,比如排版相类似的报表,只不过是顺序稍微换了一下,就是一个新的页面,虽然基于模板思想来写的话也能减少不少代码,但是相对的不那么方便,笔者最近 ...

  10. WFP之位图效果

    首先看一个图片:   在"第一步"这个按钮周围,有一转红色,这个效果就是用WPF的位图效果实现的. 位图效果(BitmapEffect 对象)是简单的像素处理操作.位图效果将 Bi ...