如何使用 Nuxt.js 与 AmCharts 地图进行动态交互？

Question

我想在我的 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。有人知道如何管理我的代码以实现我的目标吗？

Answer 1

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;
}

Answer 2

好的，我知道了！我只是在数据部分将我的变量更改为未定义，然后我可以从 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>

感谢伊曼的帮助 ;)

如何使用 Nuxt.js 与 AmCharts 地图进行动态交互？

How to dynamically interact with an AmCharts Map using Nuxt.js?

amcharts

nuxt.js

amcharts4