设置echarts折线图的圆点空心圆带边框
时间: 2023-09-24 21:07:21 浏览: 668
echarts制作折线图
4星 · 用户满意度95%
要设置 Echarts 折线图的圆点为空心圆带边框,您可以使用 Echarts 提供的 `symbol` 和 `symbolSize` 属性来实现。下面是一个示例代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70],
type: 'line',
symbol: 'emptyCircle', // 设置为圆点空心圆
symbolSize: 8, // 设置圆点的大小
itemStyle: {
borderColor: '#fff', // 设置圆点边框颜色
borderWidth: 2 // 设置圆点边框宽度
}
}]
};
```
在上面的示例中,我们将 `symbol` 属性设置为 `'emptyCircle'`,这表示使用空心圆作为圆点的符号。然后,通过 `symbolSize` 属性设置圆点的大小。最后,通过 `itemStyle` 属性设置圆点的边框颜色和宽度。
您可以根据自己的需求调整 `symbolSize`、`borderColor` 和 `borderWidth` 的值来达到所需的效果。
阅读全文