echarts关系图不同系列的圆球不同颜色尝试（html版本）

最新推荐文章于 2024-09-02 23:33:47 发布

星辰啊大海7857

最新推荐文章于 2024-09-02 23:33:47 发布

阅读量1.6k

点赞数 2

分类专栏： vue echarts开发文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_39107711/article/details/120988528

版权

本文介绍了如何在Echarts的关系图中实现不同系列的圆球显示不同颜色，通过修改官方Demo，设置圆球为渐变色并增大，同时缩短连接线。为使每个圆球颜色独特，需要预先准备足够颜色或根据接口返回颜色动态设置series-graph.itemStyle.color。

摘要由CSDN通过智能技术生成

1、首先弄个关系图demo（官网）代码看这里，注意：下面的代码都只有需要改动的地方，在官方的例子基础上改动

2、接下来我想要将圆球变成渐变色的，并且圆球变大，连接线变短。

option = {
  series: [
    {
      type: 'graph',
      layout: 'force',
	  force: {
		  // initLayout: 'circular',
		  // gravity: 0, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
		  repulsion: 200, // 节点之间的斥力因子。
		  edgeLength: 150 // 边的两个节点之间的距离，这个距离也会受 repulsion。
		},
      symbolSize: 80,
	  itemStyle: {
		  color: { // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
			  type: 'radial',
			  x: 0.5,
			  y: 0.5,
			  r: 0.5,
			  colorStops: [{
				  offset: 0, color: '#b5bcf9' // 0% 处的颜色
			  }, {
				  offset: 1, color: '#3e45c6' //