2024年5月27日发(作者：)

echarts roundrect节点样式

ECharts是一个功能强大的图表库，可以帮助开发者创建各种类型的图表。在

ECharts中，可以使用nodeStyle属性来设置节点的样式。

在ECharts中，节点是图表中的一个元素，可以表示数据的一个点或者连接线

的一个端点。节点通常用来表示数据的关联性或者连接关系。节点的样式包括形

状、大小、颜色、边框等。其中，roundRect是一种常用的节点形状，表示圆

角矩形。

要设置节点的样式，需要使用ECharts提供的API。以下是一些常用的设置节点

样式的API：

1.设置节点的形状：

使用shape属性可以设置节点的形状，对应的值为字符串，可以是circle、rect、

roundRect等。要设置为roundRect形状，可以将shape的值设置为

"roundRect"。

例如：

series: [{

type: 'graph',

nodes: [{

shape: 'roundRect'

}]

}]

2.设置节点的大小：

使用symbolSize属性可以设置节点的大小，对应的值可以是一个数字或者一个

数组。如果是一个数字，则表示节点的宽度和高度相等；如果是一个数组，数组

的第一个元素表示节点的宽度，第二个元素表示节点的高度。默认情况下，节点

的大小是10。

例如：

series: [{

type: 'graph',

nodes: [{

shape: 'roundRect',

symbolSize: 20

}]

}]

3.设置节点的颜色：

使用itemStyle属性可以设置节点的颜色，对应的值是一个对象。可以通过该对

象的color属性来设置节点的颜色。颜色可以是一个字符串，表示节点的填充颜

色；也可以是一个数组，数组的每个元素表示节点的渐变颜色。

例如：

series: [{

type: 'graph',

nodes: [{

shape: 'roundRect',

itemStyle: {

color: 'rgba(128, 128, 128, 0.5)'

}

}]

}]

4.设置节点的边框：

使用itemStyle属性可以设置节点的边框样式，包括边框颜色、边框宽度、边框

类型等。可以通过该对象的borderColor属性来设置边框的颜色，通过

borderWidth属性来设置边框的宽度。

例如：

series: [{

type: 'graph',

nodes: [{

shape: 'roundRect',

itemStyle: {

borderColor: '#000',

borderWidth: 1

}

}]

}]

除了以上的设置节点样式的属性外，还可以使用其他属性来进一步定制节点样式。

例如，可以使用label属性设置节点的标签，使用emphasis属性设置节点的高

亮样式。

总结起来，可以通过设置shape、symbolSize、itemStyle等属性来定制节点

的样式。ECharts提供了丰富的API来满足开发者对节点样式的各种需求。通过

灵活运用这些API，可以创建出符合自己设计要求的图表。