使用vue js动态更新Amcharts4图表

<template>
  <div id="chart"></div>
</template>

<script>
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

export default {
  mounted() {
    // 初始化图表
    am4core.useTheme(am4themes_animated);
    let chart = am4core.create("chart", am4charts.XYChart);
    
    // 设置图表数据
    chart.data = [
      { category: "Category 1", value: 10 },
      { category: "Category 2", value: 20 },
      { category: "Category 3", value: 15 }
    ];
    
    // 创建图表系列
    let series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "value";
    series.dataFields.categoryX = "category";
    
    // 更新图表数据
    this.$watch('chartData', (newData) => {
      chart.data = newData;
    });
  },
  data() {
    return {
      chartData: [
        { category: "Category 1", value: 10 },
        { category: "Category 2", value: 20 },
        { category: "Category 3", value: 15 }
      ]
    };
  }
};
</script>

<style>
#chart {
  width: 100%;
  height: 400px;
}
</style>