как использовать amchart в nuxt? - PullRequest
Новая
       10

как использовать amchart в nuxt?

0 голосов
/ 17 декабря 2018

Я хочу использовать amcharts в nuxt.

В компоненте svg-map.vue я добавил ниже код 

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

, но это дает мне следующую ошибку

Невозможно прочитать свойство 'bind' из неопределенного

(промежуточное значение) (промежуточное значение) .push не является функцией

Когда я вижу это в chrome, оно показываетошибка при нажатии кнопки в нижней строке 

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

Кто-нибудь знает, что является причиной этой ошибки?

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

используйте пользовательский плагин 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();
}
0 голосов
/ 17 декабря 2018

Наконец-то я нашел решение.

После долгих поисков я обнаружил, что как nuxt, так и amcharts используют разные версии веб-пакетов.Предыдущая версия webpack использует webpackJsonp в качестве функции, а более новая версия использует webpackJsonp в качестве массива.

Первые amcharts js загружались, поэтому он объявляет webpackJsonp как функцию.Затем nuxt использует его и вызывает для него функцию push.Который выдавал ошибку.

Поэтому я дал пользовательскую строку jsonpFunction в конфигурации webpack в файле 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);
}
...