如何使用 Nuxt.js 与 AmCharts Map 动态交互？

如何解决如何使用 Nuxt.js 与 AmCharts Map 动态交互？

我想向我的 Nuxt.js 网站添加交互式地图。我只是用 AmCharts 库创建了一个包含世界地图的组件。 如果单击按钮，我的目标是更改某些国家/地区（在我的示例中为法国）的颜色。这是我的文件的样子：

// components/Map.vue

<template>
  <div>
    <div id="chartdiv"/>
    <button @click="colorMe()">Click me!</button>
  </div>
</template>

<script>
import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldUltra from "@amcharts/amcharts4-geodata/worldUltra";

export default {
  methods: {
    colorMe() {
      worldpolygonSeries.getpolygonById("FR").fill = am4core.color("#f00");
    }
  },mounted() {
    // Create map instance
    let map = am4core.create("chartdiv",am4maps.MapChart);
        
    // Set map deFinition
    map.geodata = am4geodata_worldUltra;
        
    // Set projection
    map.projection = new am4maps.projections.Miller();
    
    // Zoom control
    map.zoomControl = new am4maps.ZoomControl();
        
    // The world
    let worldpolygonSeries = map.series.push(new am4maps.MappolygonSeries());    
    worldpolygonSeries.useGeodata = true;
  }      
}
</script>

<style scoped>
#chartdiv {
  width: 100%;
  height: 350px;
}
</style>

我点击按钮时得到的错误是 worldpolygonSeries is not defined。所以我尝试在数据部分直接创建 map 和 worldpolygonSeries 并将其作为参数传递，但这不起作用......

像这样：

export default {
  data() {
    return {
      map: am4core.create("chartdiv",am4maps.MapChart),worldpolygonSeries: map.series.push(new am4maps.MappolygonSeries())
    }
  },methods: {
    colorMe(worldpolygonSeries) {
      worldpolygonSeries.getpolygonById("FR").fill = am4core.color("#f00");
    }
  },mounted(map,worldpolygonSeries) {        
    // Set map deFinition
    map.geodata = am4geodata_worldUltra;
        
    // Set projection
    map.projection = new am4maps.projections.Miller();
    
    // Zoom control
    map.zoomControl = new am4maps.ZoomControl();
        
    // The world
    worldpolygonSeries.useGeodata = true;
  }
}

所以现在我得到的错误是 Cannot set property 'geodata' of undefined。有人知道我如何管理代码以实现目标吗？

解决方法

mounted() 不带参数，而是使用 this 访问 data：

 mounted() {        
     // Set map definition
    this.map.geodata = am4geodata_worldUltra;
    
    // Set projection
    this.map.projection = new am4maps.projections.Miller();

    // Zoom control
    this.map.zoomControl = new am4maps.ZoomControl();
    
    // The world
    this.worldPolygonSeries.useGeodata = true;
}

,

好的，我知道了！ 我只是将数据部分的变量更改为 undefined，然后我可以从 mounted 和 methods 访问它。

// components/Map.vue

<template>
  <div>
    <div id="chartdiv" class="h-96"/>
    <button @click="colorMe(worldPolygonSeries)">Click me!</button>
  </div>
</template>

<script>
import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodata_worldUltra from "@amcharts/amcharts4-geodata/worldUltra";

export default {
  data() {
    return {
      map: undefined,worldPolygonSeries: undefined
    }
  },methods: {
    colorMe(worldPolygonSeries) {
      worldPolygonSeries.getPolygonById("FR").fill = am4core.color("#f00");
    }
  },mounted() {
    // Create map instance
    this.map = am4core.create("chartdiv",am4maps.MapChart);
        
    // Set map definition
    this.map.geodata = am4geodata_worldUltra;
        
    // Set projection
    this.map.projection = new am4maps.projections.Miller();
    
    // Zoom control
    this.map.zoomControl = new am4maps.ZoomControl();
        
    // The world
    this.worldPolygonSeries = this.map.series.push(new am4maps.MapPolygonSeries());    
    this.worldPolygonSeries.useGeodata = true;
  }
}     
</script>

<style scoped>
#chartdiv {
  width: 100%;
  height: 350px;
}
</style>

感谢您的帮助伊曼 ;)