Question

我想在nuxt中使用amcharts。

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

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

但这给了我以下错误

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

（中间值）（中间值）。push不是函数

当我看到它在chrome上时，它在下一行的push函数中显示错误

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

有人知道导致此错误的原因吗？

Answer 1

最后，我找到了解决方法。

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

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

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

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

但这也不能解决我的错误，当我运行nuxt时，它不会加载本地主机，而只是显示等待状态。

然后，我刚刚下载了amchart库，并在所有位置将webpackJsonp替换为webpackLoad。这就解决了我的问题。

编辑：

我已经使用here

使用npm下载了模块

然后在下面的代码中使用

mounted() {
    am4core.useTheme(am4themes_animated);

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

然后挂载

DLL_PROCESS_DETACH

Answer 2

使用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();
}

如何在nuxt中使用amchart？

2 个答案: