Как использовать amchart в nuxt?
Я хочу использовать amcharts в nuxt.
В компоненте svg-map.vue я добавил ниже код
head() {
return {
script: [
{ src: 'js/amcharts/core.js' }
]
};
},
но это дает мне следующую ошибку
Cannot read property 'bind' of undefined
(intermediate value)(intermediate value).push is not a function
Когда я увидел это в Chrome, он показывает ошибку функции push в строке ниже
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["pages_coutrypedia"],{
кто-нибудь знает, что вызывает эту ошибку?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Наконец, я нашел решение.
После долгих поисков я обнаружил, что nuxt и amcharts использовали разные версии webpack. Предыдущая версия webpack использует webpackJsonp как функцию, а более новая версия использует webpackJsonp как массив.
Сначала загружались js-файлы amcharts, поэтому он объявляет webpackJsonp как функцию. Затем nuxt использует его и вызывает к нему функцию push. Что давало ошибку.
Поэтому я указал настраиваемую строку jsonpFunction в конфигурации веб-пакета в файле nuxt.config, как показано ниже.
extend(config, ctx) {
config.output = {
jsonpFunction: 'webpackLoad'
};
}
Но это также не решает мою ошибку, когда я запускаю nuxt, он не загружает localhost, он просто показывает ожидание.
Затем я только что загрузил библиотеки amchart и во всех местах заменил webpackJsonp на webpackLoad. И это решает мою проблему.
Редактировать:
Я загрузил модули, используя 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);
}
использовать настраиваемый плагин 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();
}