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

【问题标题】：How to dynamically interact with an AmCharts Map using Nuxt.js?如何使用 Nuxt.js 与 AmCharts 地图动态交互？
【发布时间】：2021-04-23 20:51:01
【问题描述】：

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

// 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。有人知道我可以如何管理我的代码以达到我的目标吗？

【问题讨论】：

标签： nuxt.js amcharts amcharts4

【解决方案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;
}

【讨论】：

很高兴知道，谢谢！不幸的是，我的控制台日志中仍然出现 map is not defined 和 Cannot set property 'geodata' of undefined 相同的错误...
请您尝试在mounted() 中发起this.map，例如：this.map = am4core.create("chartdiv", am4maps.MapChart)。您的错误意味着 this.map 未定义。

【解决方案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>

感谢您的帮助，伊曼 ;)

【讨论】：