Невозможно добавить диаграмму в мой компонент VUE - PullRequest
Новая
       25

Невозможно добавить диаграмму в мой компонент VUE

0 голосов
/ 21 октября 2019

У меня есть приложение vue.js 2.0, и мне нужно опубликовать первый пример диаграммы вершины: https://apexcharts.com/docs/vue-charts/

На данный момент мое приложение не использует синтаксис IMPORT и работает нормально. Я не использую Babel или WebPack.

Это мой маршрутизатор: 

const routes = [
     { path: "/home", component: Home }
];
const router = new VueRouter({
  routes // short for `routes: routes`
});

const app = new Vue({
  router
}).$mount("#app");

Это мой домашний компонент: 

const Home = {
  data: function() {
    return {
      count: 0
    };
  },
  template:
    `<div>Lots of informations</div> <span>I need to place the chart there</span>`
};

Если вы посмотрите на 1-й пример ApexChart, я должен использовать IMPORT и шаблон balise:

  1. Импорт не работает (ошибка):

    SyntaxError: объявления импорта могут быть толькопоявляются на верхнем уровне модуля

    [Vue warn]: неизвестный пользовательский элемент: - правильно ли вы зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «name».

  2. Я не могу поместить шаблон в другой шаблон.

howя мог сделать?

Где я могу разместить этот код? 

<template>
<div>
  <apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
</div>
</template>

Я загружаю Apexcharts в index.html следующим образом: 

<script src="https://cdn.jsdelivr.net/npm/apexcharts" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts" type="module"></script>

РЕДАКТИРОВАТЬ 2:

Это мой обновленный компонент: 

const Home = {
  data: function() {
    return {
      options: {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
        }
      },
      series: [{
        name: 'series-1',
        data: [30, 40, 45, 50, 49, 60, 70, 91]
      }]
    }
  },
  template:
    '<div><apexchart width="500" type="bar" :options="options" :series="series"></apexchart></div>'
};

Я все еще получаю следующие ошибки: 

**SyntaxError: import declarations may only appear at top level of a module**

[Vue warn]: Unknown custom element: <apexchart> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Anonymous>
       <Root>

Я пытаюсь импортировать как это внутри INDEX.HTML: 

<script>
import VueApexCharts from 'vue-apexcharts'
Vue.component('apexchart', VueApexCharts)
</script>

Нужно ли использовать Babel или что-то еще для импорта на работу?

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

Да, вам нужно использовать Babel и какой-то пакет (например, веб-пакет) для переноса операторов импорта.

Vanilla JS в браузере пока не поддерживает модули.

То есть,или компонент, который вы используете, должен иметь версию браузера / CDN, которая определит и загрузит компонент глобально

0 голосов
/ 21 октября 2019

Вам необходимо импортировать компонент диаграммы внутри вашего домашнего компонента. 

import VueApexCharts from 'vue-apexcharts'
Vue.component('apexchart', VueApexCharts)

const Home = {
  data: function() {
    return {
      options: {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
        }
      },
      series: [{
        name: 'series-1',
        data: [30, 40, 45, 50, 49, 60, 70, 91]
      }]
    }
  },
  template:
    '<div><apexchart width="500" type="bar" :options="options" :series="series"></apexchart></div>'
};
...