如何通过下拉框切换amCharts的图表类型？初始饼图转折线图等

核心思路是：通过下拉框触发切换事件，每次切换时销毁当前图表实例，再根据选中的类型创建新的对应图表。以下是具体实现步骤：

1. 准备HTML结构 #

需要一个图表容器和切换用的下拉框：

<div id="chartContainer" style="width: 100%; height: 500px;"></div>
<select id="chartTypeSelector">
  <option value="pie">饼图</option>
  <option value="line">折线图</option>
  <option value="column">柱状图</option>
</select>

2. 编写JavaScript逻辑 #

核心注意点 #

• 用全局变量存储图表根实例和图表对象，方便切换时销毁旧实例
• 共用一套数据源，根据不同图表类型配置对应的字段映射
• 切换时必须调用dispose()销毁旧图表，避免内存泄漏和DOM冲突

完整代码示例 #

// 全局存储图表根实例和图表对象
let root;
let chart;

// 通用数据源
const chartData = [
  { category: "分类1", value: 40 },
  { category: "分类2", value: 30 },
  { category: "分类3", value: 20 },
  { category: "分类4", value: 10 }
];

// 初始化指定类型的图表
function initChart(type) {
  // 销毁旧图表
  if (root) {
    root.dispose();
  }

  // 创建新的根实例
  root = am5.Root.new("chartContainer");

  // 启用动画主题（可选）
  root.setThemes([
    am5themes_Animated.new(root)
  ]);

  // 根据类型创建对应图表
  switch(type) {
    case "pie":
      // 初始化饼图
      chart = root.container.children.push(am5pie.PieChart.new(root, {
        layout: root.verticalLayout
      }));
      const pieSeries = chart.series.push(am5pie.PieSeries.new(root, {
        valueField: "value",
        categoryField: "category"
      }));
      pieSeries.data.setAll(chartData);
      break;

    case "line":
      // 初始化折线图（基于XY图表）
      chart = root.container.children.push(am5xy.XYChart.new(root, {
        panX: true,
        wheelX: "panX"
      }));
      // X轴配置
      const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        categoryField: "category",
        renderer: am5xy.AxisRendererX.new(root, {})
      }));
      xAxis.data.setAll(chartData);
      // Y轴配置
      const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererY.new(root, {})
      }));
      // 折线系列配置
      const lineSeries = chart.series.push(am5xy.LineSeries.new(root, {
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: "value",
        categoryXField: "category"
      }));
      lineSeries.data.setAll(chartData);
      // 添加数据点标记
      lineSeries.bullets.push(() => {
        return am5.Bullet.new(root, {
          sprite: am5.Circle.new(root, {
            radius: 5,
            fill: lineSeries.get("fill")
          })
        });
      });
      break;

    case "column":
      // 初始化柱状图（基于XY图表）
      chart = root.container.children.push(am5xy.XYChart.new(root, {}));
      const colXAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        categoryField: "category",
        renderer: am5xy.AxisRendererX.new(root, {})
      }));
      colXAxis.data.setAll(chartData);
      const colYAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererY.new(root, {})
      }));
      const columnSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
        xAxis: colXAxis,
        yAxis: colYAxis,
        valueYField: "value",
        categoryXField: "category"
      }));
      columnSeries.data.setAll(chartData);
      break;
  }
}

// 页面加载完成后初始化默认饼图
document.addEventListener("DOMContentLoaded", () => {
  initChart("pie");
  // 绑定下拉框切换事件
  document.getElementById("chartTypeSelector").addEventListener("change", (e) => {
    initChart(e.target.value);
  });
});

3. 引入amCharts依赖 #

如果使用CDN，在HTML中添加以下脚本：

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/pie.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/animated.js"></script>

如果使用npm，先安装依赖：

npm install @amcharts/amcharts5

再导入所需模块：

import * as am5 from "@amcharts/amcharts5";
import * as am5pie from "@amcharts/amcharts5/pie";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/animated";

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