echarts如何给折线图节点设置为实心圆+圆环的样式
时间: 2023-07-26 14:36:22 浏览: 667
您可以通过 `symbol` 和 `symbolSize` 属性来设置折线图节点的样式,其中 `symbol` 可以设置节点的形状,`symbolSize` 可以设置节点的大小。
要实现实心圆+圆环的样式,可以使用 `symbol: 'emptyCircle'` 设置节点形状为空心圆,然后再使用 `symbolSize` 设置节点的大小,再通过 `itemStyle` 设置节点的填充颜色和边框颜色即可。
下面是一个示例代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
symbol: 'emptyCircle', // 设置节点形状为空心圆
symbolSize: 10, // 设置节点大小
itemStyle: { // 设置节点样式
color: '#fff', // 设置节点填充颜色
borderColor: '#333', // 设置节点边框颜色
borderWidth: 2 // 设置节点边框宽度
},
lineStyle: {
color: 'blue' // 设置折线颜色
}
}]
};
```
上述代码中,我们设置了节点形状为 `emptyCircle`,大小为 `10`,填充颜色为白色,边框颜色为黑色,边框宽度为 `2`。同时,我们还设置了折线的颜色为蓝色。
这样,折线图节点就被设置成了实心圆+圆环的样式。
阅读全文