设置echarts折线图的圆点空心圆带边框
时间: 2023-09-24 21:07:21 浏览: 329
要设置 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` 的值来达到所需的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)