javascript - 在 VueJS 组件中加载 AmCharts 导出插件

Question

我正在使用具有如下结构的 VueJS 组件：

例子.vue

<template></template>
<script></script>
<style></style>

我通过 nodejs 引入了 AmCharts 3，并在此处加载库：

<template>
    <div>
        <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
        <div>
            <div id="chartdiv" class="chartStyling" style="width:1000px; height:500px"></div>
        </div>
    </div>
</template>

<script>
    require('amcharts3/amcharts/amcharts');
    require('amcharts3/amcharts/serial');
    require('amcharts3/amcharts/plugins/export/export');
    require('amcharts3/amcharts/themes/dark');

    module.exports = {
        props: ['chartData', 'chartDetails', 'graphData', 'hiddenParticipants'],
        data: function() {
            return {
                state: {
                    chart: '',
                }
            }
        },
... more code here

图表和各种导出功能正确加载。但是，它们都不起作用。我在控制台中收到以下错误：

关于问题可能是什么的任何想法？我想这可能是由于 webpack 或组件的处理方式。

编辑：尝试将每个单独的插件包含在 require 语句中，如下所示：

require('amcharts3/amcharts/amcharts');
require('amcharts3/amcharts/serial');
require('amcharts3/amcharts/plugins/export/export');
require('amcharts3/amcharts/plugins/export/libs/blob.js/blob');
require('amcharts3/amcharts/plugins/export/libs/fabric.js/fabric');
require('amcharts3/amcharts/plugins/export/libs/FileSaver.js/FileSaver');    
require('amcharts3/amcharts/plugins/export/libs/pdfmake/pdfmake');
require('amcharts3/amcharts/plugins/export/libs/jszip/jszip');    
require('amcharts3/amcharts/plugins/export/libs/xlsx/xlsx');
require('amcharts3/amcharts/themes/dark');

运行 npm 时导致此错误：

 ERROR  Failed to compile with 7 errors                                                      23:45:24

These dependencies were not found:

* fs in ./~/amcharts3/amcharts/plugins/export/libs/xlsx/xlsx.js, ./~/amcharts3/amcharts/plugins/export/libs/fabric.js/fabric.js
* jsdom in ./~/amcharts3/amcharts/plugins/export/libs/fabric.js/fabric.js
* canvas in ./~/amcharts3/amcharts/plugins/export/libs/fabric.js/fabric.js
* xmldom in ./~/amcharts3/amcharts/plugins/export/libs/fabric.js/fabric.js

To install them, you can run: npm install --save fs jsdom canvas xmldom


These relative modules were not found:

* ./jszip.js in ./~/amcharts3/amcharts/plugins/export/libs/xlsx/xlsx.js
* ./dist/cpexcel.js in ./~/amcharts3/amcharts/plugins/export/libs/xlsx/xlsx.js

标签： javascriptwebpackvue.jsamcharts