Question

我通过以下方式安装了ApexChart

elif mask[i] ==1 and var[i] - mu[i] > 5:

在我的npm install vue-apexcharts文件上，我将其导入为

bootstrap.js

然后在我的import VueApexCharts from 'vue-apexcharts' Vue.use(VueApexCharts)上导入bootstrap.js文件

app.js file

在我尝试过的vue文件中

require('./bootstrap');
Vue.component('products', require('./components/ProductComponent.vue'));
Vue.component('employees', require('./components/EmployeesComponent.vue'));
Vue.component('orders', require('./components/OrdersComponent.vue'));
Vue.component('display-products', require('./components/DisplayProducts.vue'));
Vue.component('order-products', require('./components/OrderProductComponent.vue'));
Vue.component('dashboard', require('./components/DashboardComponent.vue'));

const app = new Vue({
    el: '#app'
});

但是我得到<apexcharts width="500" type="bar" :options="chartOptions" :series="series"></apexcharts>

我正在使用带有vue js的laravel

Answer 1

如果要使用，您需要这样注册组件：

components: { apexcharts: VueApexCharts }

完整的示例在这里：

import VueApexCharts from 'vue-apexcharts'

export default {
    components: {
      apexcharts: VueApexCharts,
    },
    data: function() {
      return {
        chartOptions: {
          chart: {
            id: 'vuechart-example'
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
          }
        },
        series: [{
          name: 'series-1',
          data: [30, 40, 45, 50, 49, 60, 70, 91]
        }]
      }
    },
};

Answer 2

import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)

在主文件（bootstrap.js）中，您需要以这种方式导入它，然后在每个文件中使用。

vuejs注册组件问题

2 个答案: