ECharts实现折现图的拐点为空心圆圈

最新推荐文章于 2025-05-19 11:38:42 发布

原创最新推荐文章于 2025-05-19 11:38:42 发布 · 3w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

ECharts 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在ECharts中实现空心圆图例，通过调整symbol、itemStyle等属性，使图表拐点处显示为空心圆，并保持legend图例清晰可见。详细介绍了color、borderColor及borderWidth参数的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看实现的效果

我们看官网提供的是拐点处都是实心的圆，而且圆内部填充的颜色与legend颜色一致，我背景是'#000',所以为了实现是空心的，我圆内部的填充色就是黑色，但是此时legend图例的颜色也是黑色，就导致我们看不到我们的图例了，所以图例我们可以看之前的一篇，设置自定义的icon,总体代码如下:

   series[{
      symbol: 'circle',
      itemStyle: {
        normal: {
            color: "#000",
            borderColor: '#f58f23',
            borderWidth: 1,
        }
      },    
   }]

color:是legend的颜色，也是圆的填充色，

borderColor：圆圈的border

borderWidth: 圆圈border的宽度