这用的是echart的哪个类型?-灵析社区

中年复健狗

用的是关系图,布局选 `none`,然后设置 `x, y` 的位置相对容易实现 写了个简单例子: option = { title: { text: 'ECharts 关系图示例' }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series: [ { type: 'graph', layout: 'none', data: [ {name: 'ThinkYMF', symbolSize: 80, x: 105, y: 105}, {name: '化工', symbolSize: 80,x: 100, y: 100}, {name: '建材', symbolSize: 80,x: 110, y: 100}, {name: '化工2', symbolSize: 80,x: 110, y: 110}, {name: '建材2', symbolSize: 80,x: 100, y: 110}, ], // 在这里设置节点间的连线 links: [ {source: '化工', target: 'ThinkYMF'}, {source: '建材', target: 'ThinkYMF'}, {source: '化工2', target: 'ThinkYMF'}, {source: '建材2', target: 'ThinkYMF'}, ], // 设置节点的样式 itemStyle: { borderColor: '#fff', borderWidth: 1, shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.3)' }, // 设置线的样式 lineStyle: { color: 'source', // 根据source节点的颜色决定线的颜色 }, // 设置标签样式(节点上的文字) label: { show: true } } ] }; 效果: ![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241029/6bdc47fce32d061bfe5d4917287e4e45.png) 如果定位有规律也可以具体实现一个函数计算位置,上面只写了个简单的案例 > [官方文档 -> 关系图](https://link.segmentfault.com/?enc=Wr1G7gZtT9cj31t6RXowQQ%3D%3D.HlBcKRSesdCJD13INHbM%2FCuX%2FWRYU6xoSsa%2BwF%2BfLWhcv%2F%2FKelfCaiOImr08ClOHBHu0ldRQ%2F%2FQGCQxpp0jivSJNb1VI1%2FkjFCs%2Fip66XLA%3D)

阅读量:1

点赞量:0

问AI