Amcharts5：图表加载完成后修改Bullet半径的实现方法

核心思路 #

要实现动态修改Bullet半径，关键是保存所有Bullet里Circle实例的引用，之后通过下拉菜单的选择事件批量更新这些实例的radius属性。

步骤1：修改Bullet创建逻辑，保存Circle引用 #

在合适的作用域里定义数组存储Circle实例，创建Bullet时把Circle对象存入数组：

// 定义数组保存所有Bullet的Circle实例
let bulletCircles = [];

series.bullets.push(function(root) {
  const circle = am5.Circle.new(root, {
    radius: 2,
    fill: series.get("fill")
  });
  
  // 将Circle实例存入数组
  bulletCircles.push(circle);
  
  return am5.Bullet.new(root, {
    sprite: circle
  });
});

步骤2：添加下拉菜单HTML #

在页面中添加提供半径选项的下拉框：

<select id="radiusSelector">
  <option value="2">2px</option>
  <option value="5">5px</option>
  <option value="8">8px</option>
  <option value="10">10px</option>
</select>

步骤3：监听下拉菜单事件，动态更新半径 #

给下拉框绑定change事件，选中新值后遍历数组修改所有Circle的半径：

const radiusSelector = document.getElementById("radiusSelector");

radiusSelector.addEventListener("change", function() {
  const newRadius = parseInt(this.value);
  // 遍历所有Circle实例，更新半径属性
  bulletCircles.forEach(circle => {
    circle.set("radius", newRadius);
  });
});

关键点说明 #

• 必须保存Circle实例：AM5中通过am5.Circle.new()创建的元素，只有持有引用才能后续修改属性，因此需要统一存储。
• 使用set()方法修改属性：AM5元素的属性不能直接赋值，必须调用set(key, value)方法触发图表重绘，确保修改生效。

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