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

时间:2018-06-08 01:21:00

标签: javascript webpack vue.js amcharts

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

Example.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

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

enter image description 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

0 个答案:

没有答案