单击关闭系列时，Highcharts自定义图例SVG符号不会淡入淡出

Highcharts是一款功能强大的JavaScript图表库，用于在网页上创建交互式和可视化的图表。在Highcharts中，可以通过自定义图例来控制图表中的数据系列的显示和隐藏。当单击关闭系列时，Highcharts默认情况下会使用默认的SVG符号来表示图例项的状态变化，而不会进行淡入淡出效果。

要实现自定义图例SVG符号的淡入淡出效果，可以通过以下步骤来实现：

创建自定义的SVG符号：使用SVG语法创建自定义的符号，可以使用各种形状、颜色和样式来表示图例项的状态。可以使用在线SVG编辑器（如https://editor.method.ac/）来创建和编辑SVG符号。
定义图例项的状态变化：根据需要，定义图例项的不同状态，例如选中状态和非选中状态。可以使用CSS样式来定义不同状态下的SVG符号的样式。
监听图例项的点击事件：使用Highcharts提供的事件监听机制，监听图例项的点击事件。当图例项被点击时，触发相应的事件处理函数。
在事件处理函数中实现淡入淡出效果：在图例项点击事件的处理函数中，使用JavaScript或jQuery等工具库来实现SVG符号的淡入淡出效果。可以通过修改SVG符号的透明度或使用CSS过渡效果来实现淡入淡出效果。

以下是一个示例代码，演示了如何在Highcharts中实现自定义图例SVG符号的淡入淡出效果：

// 创建自定义的SVG符号
var customSymbol = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="8" fill="#ff0000" /></svg>';

// 定义图例项的状态样式
var legendStyles = {
  normal: {
    symbol: customSymbol,
    // 定义正常状态下的SVG符号样式
    // 可以设置填充颜色、边框颜色、边框宽度等
  },
  selected: {
    symbol: customSymbol,
    // 定义选中状态下的SVG符号样式
    // 可以设置填充颜色、边框颜色、边框宽度等
  }
};

// 监听图例项的点击事件
chart.legend.allItems.forEach(function(item) {
  item.legendSymbol.on('click', function() {
    // 切换图例项的状态
    item.setState(item.state === 'normal' ? 'selected' : 'normal');
    
    // 实现淡入淡出效果
    $(item.legendSymbol.element).fadeOut(300, function() {
      // 更新图例项的SVG符号样式
      item.legendSymbol.attr(legendStyles[item.state]);
      $(this).fadeIn(300);
    });
  });
});

在上述示例代码中，首先创建了一个自定义的SVG符号，并定义了图例项的正常状态和选中状态的样式。然后，通过监听图例项的点击事件，在事件处理函数中切换图例项的状态，并使用jQuery的fadeOut和fadeIn方法实现SVG符号的淡入淡出效果。最后，更新图例项的SVG符号样式，使其显示为对应状态的样式。

需要注意的是，上述示例代码中的chart对象表示Highcharts图表的实例，需要根据实际情况进行替换。另外，为了实现淡入淡出效果，需要引入jQuery库或其他支持动画效果的工具库。

推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）和腾讯云对象存储（https://cloud.tencent.com/product/cos）可以用于存储和部署Highcharts图表所需的数据和资源。