angular7中echarts关系图实战

Echarts关系图实战效果图

 

  第一步:

    下载echarts(4.1.0)和ngx-echarts(4.1.0)的依赖包,在angular.json中引入echarts.js,在公共模块中引入

      

  第二步:

    html页面:<div style="height: 450px" echarts [options]="option" class="bar-chart" (chartInit)="onChartInit($event)"></div>

    这里的onChartInit()函数是用来刷新拓扑图的

  第三步:

    在ts页面创建拓扑图,简单的配置api上可以找到,这个图一共有两个地方有点麻烦

      1.

        该图一个节点有3行数据,官方api可以找到使用方法

        rich{  //这里的rich可以写在公共的label对象里面

          zhong:{color:‘#000‘,fontWeight:800},  //样式

          img1:{backgroundColor:{image:‘/WebApi/asset/static/dist/portrait/assets/image/router.png‘},height:50}   //图片样式

        }

        使用方法:在data>label下有个formatter属性,后面的值可以使用拼接的方法

          

        这里写完后,可以通过定义label中position来设置数据位置,然后通过offset[,]把数据移动到理想的位置

      

      2.

        该图的关系线离节点两端都有距离

            红圈其实很好弄,在公共itemStyle中定义,borderwidth是定义边框的宽度,borderColor是定义边框的颜色,

              白色的边框不就刚好可以实现这个效果了吗?刷新页面后你会发现节点变小了,给边框设置能看见的透明色会发现边框会占大小,会把图片往

              中间挤压,这个时候只需要调整symbolSize的值就好了,边框宽度是多少我就加多少

            蓝圈的我想了很久,有想过加大borderWidth,但那样当前节点的左右空白会和其他节点不一样,最后一直在api上想找到解决方法,一直在想为什么

              不能给关系线一个属性length,后来想到一个办法,试了一下果然行了,方法就是在data>label中添加一个背景颜色backgroundColor:‘#fff‘,然后

              设置它的高度就可以实现效果了

              上图中我注释了symbol这个标签,symbol也是可以放图片的,也是可以实现难点1的效果,但是在难点2中,它没有办法让线实现断开的效果,因为它始终

              占据100%的位置,borderWidht的空间也被他覆盖了导致线始终和它相连,最后只有放弃symbol这个属性,转而使用rich属性

              

  第四步:如果节点数据是后台传递渲染的,并且会通过条件更新,就需要onChartInit这个函数

      public echartsInstance: any;  //声明一个变量

      if (this.echartsInstance) {   //添加完数据后,来刷新数据源

        this.echartsInstance.setOption(this.option)

      }

        //为这个变量赋值

原文地址:https://www.cnblogs.com/nihao94/p/11378177.html

时间: 2024-10-06 21:15:45

angular7中echarts关系图实战的相关文章

Echarts关系图-力引导布局

需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败 刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里放上前辈的代码 /** 这段代码来自 http://blog.csdn.net/r4NqiAn/article/details/48320487 Echarts-Force 力导向布局图树状结构实现节点可折叠效果 作者:Reese 日期:2015-09-09 版本:V0.1 功能:点击一次节点,展开

Echarts——关系图(人民的名义为例,简化)源码

参考博文:https://www.cnblogs.com/emrys5/p/echart-relationship-map.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width" /> 5 <title>ECharts 实现人民的名义关系图谱</title> 6 &

对照层关系图验证代码

  包括要在验证期间分析的特定程序集或项目在 “解决方案资源管理器”中,右击建模项目或 “层引用”文件夹,然后单击 “添加引用”.    在 “添加引用”对话框中,选择所需程序集或项目,然后单击 “确定”.    随时手动验证代码从打开的层关系图中验证代码 右击关系图图面,再单击 “验证体系结构”.     说明  默认情况下,层关系图 (.layerdiagram) 文件的 “生成操作”属性设置为 “验证”,以便在验证过程中包括关系图.       “错误列表”窗口会报告发生的任何错误. 有关

转:ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转

站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针对上述所提出的疑问,我琢磨了一下ECharts图表组件.找到官方这样的一个适合的简单关系图:http://echarts.baidu.com/doc/example/force1.html 通过观察ECharts图表组件的简单关系图的数据结构,得出我要实现一个站点地图需要做哪些工作: 1.引入ech

Echarts力导向图graph 关系图绘制Demo

近期因业务需求,给我司产品做了一个Echarts----力导向图&关系图 demo 其中分为两种关系图: 01.不同等级节点样式不同 02.不同公司的颜色样式不同 效果图献上: code如下: var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; myChart.showLoading(); var webkitD

Intellij IDEA 中如何查看maven项目中所有jar包的依赖关系图

Maven 组件界面介绍 如上图标注 1 所示,为常用的 Maven 工具栏,其中最常用的有: 第一个按钮:Reimport All Maven Projects 表示根据 pom.xml 重新载入项目.一般单我们在 pom.xml 添加了依赖包或是插件的时候,发现标注 4 的依赖区中没有看到最新写的依赖的话,可以尝试点击此按钮进行项目的重新载入. 第六个按钮:Execute Maven Goal 弹出可执行的 Maven 命令的输入框.有些情况下我们需要通过书写某些执行命令来构建项目,就可以通

类图及类图中的关系

1.类图和对象图  类图(Class Diagram)是显示出类.接口以及他们之间的静态结构与关系的图.其中最基本的单元是类或接口. 类图不但可以表示类(或者接口)之间的关系,也可以表示对象之间的关系.下面是一个典型的类图: 类图一般分为几个部分:类名.属性.方法.下面分别讲解. (1)类名 上面的Car就是类名,如果类名是正体字,则说明该类是一个具体的类,如果类名是斜体字,则说明类是一个抽象类abstract. (2)属性列表 属性可以是public.protected.private.pub

项目中遇到的问题:关系图组件兼容性问题解决

1.   问题背景 在开发“客户群成员关系图”功能时,用到了关系图组件MxClient库,在开发过程中,发现该组件在IE8及IE9下有兼容性问题:不能展示图形节点的背景图及样式.不能展示关系图之间的连接线.在IE8兼容模式下.在IE6及IE7下都能正常展示,在IE8标准模式及IE9标准模式下,都不能正常展示. 2.   问题现象 不能正常展示的现象如果下图所示: 3.   问题原因 在排查原因的过程中,发现同样的关系图展示代码,在另外的模块(客户族群管理),能够正常展示关系图数据,由此判断关系图

设计模式——UML中的类图及类图之间的关系

一丶统一建模语言简介 统一建模语言(Unified Modeling Language,UML)是用来设计软件蓝图的可视化建模语言,1997 年被国际对象管理组织(OMG)采纳为面向对象的建模语言的国际标准.它的特点是简单.统一.图形化.能表达软件设计中的动态与静态信息. 统一建模语言能为软件开发的所有阶段提供模型化和可视化支持.而且融入了软件工程领域的新思想.新方法和新技术,使软件设计人员沟通更简明,进一步缩短了设计时间,减少开发成本.它的应用领域很宽,不仅适合于一般系统的开发,而且适合于并行