如何为ECharts图例图标添加线条？v5.4.0版本配置疑问

想要实现带有水平线的圆形图例图标，但使用ECharts 5.4.0版本配置后，图例始终不显示线条。有网友表示这种带线的圆形是默认样式，但自己配置后就是出不来，当前配置代码如下：

dataVolumeOptions: {
        legend: {
          show: true,
          icon: 'circle',
          bottom: '0',
          width: "auto", 
          height: "auto",
          orient: "vertical",
          align: "auto",
          itemWidth: 20,
          itemHeight: 10,
          itemGap: 10,
          data: [{
            name: "data-size",
            itemStyle: {
              color: "#FFFFFF",
              borderColor: '#1088FF',
              borderWidth: 2,
            },
            textStyle: {
              color: "#000",
              fontSize: 14
            },
          }]
        },
        xAxis: {
          data: ['2023-4-25 9:46:00', '2023-4-25 9:46:00', '2023-4-25 9:46:00', '2023-4-25 9:46:00', '2023-4-25 9:46:00']
        },
        yAxis: {},
        series: [
          {
            name: "data-size",
            type: 'line',
            label: {
              show: true,
              position: 'top',
              fontSize: 14
            },
            data: [10, 22, 28, 23, 19],
          }
        ]
      }
    }

问题根源是你手动设置了icon: 'circle'，这直接覆盖了ECharts为折线图（series.type: 'line'）默认提供的带水平线的圆形图例样式。

两种简单解决办法：

• 移除icon: 'circle'配置：删掉这一行后，ECharts会自动匹配折线图对应的默认图例图标，带水平线的圆形就会显示出来。
• 自定义复合图标：如果想保留自定义的圆形样式同时显示线条，可以把icon设置为'circle|line'，同时调整itemWidth（比如设为30）来容纳线条和圆形，避免显示不全：

legend: {
  // 其他配置保持不变
  icon: 'circle|line',
  itemWidth: 30,
  itemHeight: 10
}

内容的提问来源于stack exchange，提问作者Anson