如何在nuxt中使用amchart？答案

【问题标题】：how to use amchart in nuxt?如何在nuxt中使用amchart？
【发布时间】：2018-12-17 13:19:51
【问题描述】：

我想在 nuxt 中使用 amcharts。

在 svg-map.vue 组件中，我添加了以下代码

head() {
    return {
      script: [
        { src: 'js/amcharts/core.js' }
      ]
    };
  },

但这给了我以下错误

无法读取未定义的属性“绑定”

(中间值)(中间值).push不是函数

当我在 chrome 上看到这个时，它在下面的行中显示推送功能错误

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["pages_coutrypedia"],{

有谁知道这个错误是什么原因造成的？

【问题讨论】：

标签： javascript vue.js amcharts nuxt.js

【解决方案1】：

使用nuxt自定义插件，创建文件plugins/amcharts.js

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import am4themes_dark from "@amcharts/amcharts4/themes/dark";
import Vue from "vue";
Vue.prototype.$am4core = () => {
 return {
  am4core,
  am4charts,
  am4themes_animated,
  am4themes_dark
 }
}

然后添加到 nuxt.config.js

plugins: [
    {
        src: '~/plugins/amCharts.js',
        ssr: false
    }
],

在组件 .vue 文件中

mounted() {
 let {am4core, am4charts, am4themes_animated, am4themes_dark} = this.$am4core();
}

【讨论】：

【解决方案2】：

终于找到了解决办法。

经过大量搜索，我发现 nuxt 和 amcharts 都使用了不同版本的 webpack。以前版本的 webpack 使用 webpackJsonp 作为函数，新版本使用 webpackJsonp 作为数组。

首先加载 amcharts js，因此它将 webpackJsonp 声明为一个函数。然后 nuxt 使用它并向它调用 push 函数。这是一个错误。

所以我在 nuxt.config 文件中的 webpack 配置中给出了自定义 jsonpFunction 字符串，如下所示

extend(config, ctx) {
  config.output = {
    jsonpFunction: 'webpackLoad'
  };
}

但这也没有解决我的错误，当我运行 nuxt 时它没有加载 localhost，它只是显示等待。

然后我刚刚下载了amchart库并在所有地方用webpackLoad替换了webpackJsonp。这解决了我的问题。

编辑：

如here所述，我已经使用 npm 下载了模块

然后用下面的代码

if (process.browser) {
  var am4core = require('@amcharts/amcharts4/core'),
    am4maps = require('@amcharts/amcharts4/maps'),
    am4geodata_world = require('@amcharts/amcharts4-geodata/worldIndiaHigh').default,
    am4themes_animated = require('@amcharts/amcharts4/themes/animated').default;
}

然后在挂载中

mounted() {
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create(this.$el, am4maps.MapChart);
}

【讨论】：