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