如何在Nuxt中配置并运行Amcharts5？

1. 安装依赖 #

首先安装 Amcharts5 核心包及所需的图表、主题包：

npm install @amcharts/amcharts5 @amcharts/amcharts5/xy @amcharts/amcharts5/themes/Animated

或使用 yarn：

yarn add @amcharts/amcharts5 @amcharts/amcharts5/xy @amcharts/amcharts5/themes/Animated

2. Nuxt 框架配置 #

Nuxt 3 配置 #

Amcharts5 是客户端渲染库，需确保 SSR 模式下正确处理依赖，在 nuxt.config.ts 中添加：

export default defineNuxtConfig({
  ssr: true,
  vite: {
    ssr: {
      noExternal: ['@amcharts/amcharts5'] // 确保 SSR 时正确打包依赖
    }
  }
})

Nuxt 2 配置 #

在 nuxt.config.js 中配置转译规则与客户端插件：

export default {
  ssr: true,
  build: {
    transpile: ['@amcharts/amcharts5']
  },
  plugins: [
    { src: '~/plugins/amcharts.js', mode: 'client' } // 仅客户端加载插件
  ]
}

创建 plugins/amcharts.js 注入全局实例：

import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

if (process.client) {
  // 可选：添加商业许可证密钥
  // am5.addLicense("YOUR_LICENSE_KEY");
}

export default ({ app }, inject) => {
  inject('am5', am5);
  inject('am5xy', am5xy);
  inject('am5themes_Animated', am5themes_Animated);
};

3. 创建图表组件（以 Nuxt 3 为例） #

创建 components/AmChart.vue 实现基础柱状图：

<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as am5 from '@amcharts/amcharts5';
import * as am5xy from '@amcharts/amcharts5/xy';
import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';

const chartContainer = ref(null);
let root = null;

onMounted(() => {
  if (process.client) {
    // 创建根实例
    root = am5.Root.new(chartContainer.value);
    // 应用动画主题
    root.setThemes([am5themes_Animated.new(root)]);

    // 初始化图表
    const chart = root.container.children.push(
      am5xy.XYChart.new(root, {
        panX: true,
        panY: true,
        wheelX: "panX",
        wheelY: "zoomX"
      })
    );

    // 添加滚动条
    chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
    chart.set("scrollbarY", am5.Scrollbar.new(root, { orientation: "vertical" }));

    // 创建 X/Y 轴
    const xAxis = chart.xAxes.push(
      am5xy.CategoryAxis.new(root, {
        categoryField: "category",
        renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 30 })
      })
    );
    const yAxis = chart.yAxes.push(
      am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererY.new(root, {})
      })
    );

    // 模拟数据
    const data = [
      { category: "A", value: 10 },
      { category: "B", value: 20 },
      { category: "C", value: 15 },
      { category: "D", value: 25 },
      { category: "E", value: 18 }
    ];
    xAxis.data.setAll(data);

    // 创建柱状系列
    const series = chart.series.push(
      am5xy.ColumnSeries.new(root, {
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: "value",
        categoryXField: "category"
      })
    );
    series.data.setAll(data);

    // 鼠标悬停提示
    series.columns.template.setAll({
      tooltipText: "{categoryX}: {valueY}",
      tooltipY: 0
    });

    // 启动动画
    series.appear(1000);
    chart.appear(1000, 100);
  }
});

onBeforeUnmount(() => {
  // 销毁实例，避免内存泄漏
  if (root) root.dispose();
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 500px;
}
</style>

4. 在页面中使用组件 #

在 pages/index.vue 中引入并使用图表组件：

<template>
  <div>
    <h1>Amcharts5 演示</h1>
    <AmChart />
  </div>
</template>

<script setup>
import AmChart from '~/components/AmChart.vue';
</script>

关键注意事项 #

• SSR 兼容：必须通过 process.client 判断环境，确保仅在客户端执行 Amcharts5 代码。
• 内存管理：组件销毁时务必调用 root.dispose()，防止内存泄漏。
• 商业许可证：商业使用需添加官方许可证密钥，在初始化时调用 am5.addLicense("KEY")。

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