angular7中echarts关系图实战

Posted 2022-08-04 nihao94

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)

　　　　　　

　　　　　　　　//为这个变量赋值