无法将图表添加到我的 vue 组件

Posted 2023-02-19

【中文标题】无法将图表添加到我的 vue 组件

【英文标题】：Unable to add a chart to my vue component

【发布时间】：2020-02-17 21:33:14

【问题描述】：

我有一个 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");

这是我的 Home 组件：

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

如果您查看 ApexChart 第一个示例，我必须使用 IMPORT 和模板应答器：

导入不起作用（错误）：

语法错误：导入声明只能出现在模块的顶层

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我不能将一个模板放在另一个模板中。

我该怎么办？

我可以在哪里放置此代码？

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

我正在像这样在 index.html 中加载 Apexcharts：

<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  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 或其他东西才能导入工作？

【问题讨论】：

你的 html 是什么样的？你应该可以在你的 home 组件中加入类似<apex-chart></apex-chart> 的东西。

谢谢，我的 html 是写在 JS 文件中的文字模板字符串 ...

[Vue 警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

【参考方案1】：

您需要在 homecomponent 中导入图表组件。

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  type="bar" :options="options" :series="series"></apexchart></div>'
;

【讨论】：

谢谢，尝试在模板中复制此插入，但出现 2 个错误：

语法错误：导入声明只能出现在模块的顶层

[Vue 警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

在您的问题中发布您的整个HomeComponent。

将导入移动到您的主组件。

【参考方案2】：

是的，您需要使用 Babel 和某种捆绑器（如 webpack）来转译导入语句。

浏览器中的 Vanilla JS 尚不支持模块。

那个，或者您正在使用的组件需要公开一个浏览器/CDN 版本，该版本将全局定义和引导该组件

【讨论】：

如果他不使用捆绑器，他如何获得 Vue 警告？

哦，说得好。 INDEX.HTML 位让我相信带有 import 语句的 <script> 标签没有通过 webpack 运行（它可能不是）

好的，但是这家伙似乎可以在没有 Web 包的情况下工作； medium.com/@steveolensky/…

他正在使用浏览器/CDN <script> 标签来导入组件。您正在尝试在没有 webpack 的情况下使用模块加载。

不，您需要完全删除import 语句。如果您使用的是<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>，则不需要import 任何东西