vue 中使用highcharts中的數據流圖

highcharts中api：https://api.hcharts.cn/

官網實例：https://code.hcharts.cn/demos/hEFsqm

vue代碼：

主要問題：是官網上的例子沒有說明插件的使用

<template lang="jade">
    .chart-container
        .chart-outer-wrap
            .chart-wrap
                .chart(id="riverGraph",style="width:100%;height:600px;")
</template>

<script>
    import Highcharts from 'highcharts/highstock';
    import Streamgraph from 'highcharts/modules/streamgraph.js';
    import SeriesLabel from 'highcharts/modules/series-label.js';
    import Annotations from 'highcharts/modules/annotations.js';
    import Exporting from 'highcharts/modules/exporting.js';
    export default {
        data () {
            return {
            };
        },
        mounted () {
            this.init();
        },
        methods: {
            init () {
                Streamgraph(Highcharts); // 河流圖插件
                SeriesLabel(Highcharts); // label插件
                Annotations(Highcharts); // annotations插件
                Exporting(Highcharts); // exporting插件
                this.drawRiverGragh();
            },
            drawRiverGragh () {
                var colors = Highcharts.getOptions().colors;
                Highcharts.chart('riverGraph', {
                    chart: {
                        type: 'streamgraph', // 導入河流圖插件纔可以使用
                        marginBottom: 30,
                        zoomType: 'x'
                    },
                    // Make sure connected countries have similar colors
                    colors: [
                        colors[0],
                        colors[1],
                        colors[2],
                        colors[3],
                        colors[4],
                        // East Germany, West Germany and Germany
                        Highcharts.color(colors[5]).brighten(0.2).get(),
                        Highcharts.color(colors[5]).brighten(0.1).get(),
                        colors[5],
                        colors[6],
                        colors[7],
                        colors[8],
                        colors[9],
                        colors[0],
                        colors[1],
                        colors[3],
                        // Soviet Union, Russia
                        Highcharts.color(colors[2]).brighten(-0.1).get(),
                        Highcharts.color(colors[2]).brighten(-0.2).get(),
                        Highcharts.color(colors[2]).brighten(-0.3).get()
                    ],
                    title: {
                        floating: true,
                        align: 'left',
                        text: '冬季奧運會獎牌分佈'
                    },
                    subtitle: {
                        floating: true,
                        align: 'left',
                        y: 30,
                        text: '數據來源： <a href="https://www.sports-reference.com/olympics/winter/1924/">sports-reference.com</a>'
                    },
                    xAxis: {
                        maxPadding: 0,
                        type: 'category',
                        crosshair: true,
                        categories: [
                            '',
                            '1924',
                            '1928',
                            '1932',
                            '1936',
                            '1940',
                            '1944',
                            '1948',
                            '1952',
                            '1956',
                            '1960',
                            '1964',
                            '1968',
                            '1972',
                            '1976',
                            '1980',
                            '1984',
                            '1988',
                            '1992',
                            '1994',
                            '1998',
                            '2002',
                            '2006',
                            '2010',
                            '2014'
                        ],
                        labels: {
                            align: 'left',
                            reserveSpace: false,
                            rotation: 270
                        },
                        lineWidth: 0,
                        margin: 20,
                        tickWidth: 0
                    },
                    yAxis: {
                        visible: false,
                        startOnTick: false,
                        endOnTick: false
                    },
                    legend: {
                        enabled: false
                    },
                    annotations: [{ // 導入annotations插件後纔可以使用
                        labels: [{
                            point: {
                                x: 5.5,
                                xAxis: 0,
                                y: 30,
                                yAxis: 0
                            },
                            text: '二戰期間冬奧會取消'
                        }, {
                            point: {
                                x: 18,
                                xAxis: 0,
                                y: 90,
                                yAxis: 0
                            },
                            text: '蘇聯解體，德國統一'
                        }],
                        labelOptions: {
                            backgroundColor: 'rgba(255,255,255,0.5)',
                            borderColor: 'silver'
                        }
                    }],
                    plotOptions: {
                        series: {
                            label: {
                                minFontSize: 5,
                                maxFontSize: 15,
                                style: {
                                    color: 'rgba(255,255,255,0.75)'
                                }
                            }
                        }
                    },
                    // Data parsed with olympic-medals.node.js
                    series: [{
                        "name": "芬蘭",
                        "data": [
                            0, 11, 4, 3, 6, 0, 0, 6, 9, 7, 8, 10, 5, 5, 7, 9, 13, 7, 7, 6, 12, 7, 9, 5, 5
                        ]
                    }, {
                        "name": "奧地利",
                        "data": [
                            0, 3, 4, 2, 4, 0, 0, 8, 8, 11, 6, 12, 11, 5, 6, 7, 1, 10, 21, 9, 17, 17, 23, 16, 17
                        ]
                    }, {
                        "name": "瑞典",
                        "data": [
                            0, 2, 5, 3, 7, 0, 0, 10, 4, 10, 7, 7, 8, 4, 2, 4, 8, 6, 4, 3, 3, 7, 14, 11, 15
                        ]
                    }, {
                        "name": "挪威",
                        "data": [
                            0, 17, 15, 10, 15, 0, 0, 10, 16, 4, 6, 15, 14, 12, 7, 10, 9, 5, 20, 26, 25, 25, 19, 23, 26
                        ]
                    }, {
                        "name": "美國",
                        "data": [
                            0, 4, 6, 12, 4, 0, 0, 9, 11, 7, 10, 7, 7, 8, 10, 12, 8, 6, 11, 13, 13, 34, 25, 37, 28
                        ]
                    }, {
                        "name": "東德",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 14, 19, 23, 24, 25, 0, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "西德",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 5, 10, 5, 4, 8, 0, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "德國",
                        "data": [
                            0, 0, 1, 2, 6, 0, 0, 0, 7, 2, 8, 9, 0, 0, 0, 0, 0, 0, 26, 24, 29, 36, 29, 30, 19
                        ]
                    }, {
                        "name": "新西蘭",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 2, 2, 9, 9, 6, 4, 0, 7, 4, 4, 11, 8, 9, 8, 24
                        ]
                    }, {
                        "name": "意大利",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 1, 4, 4, 5, 4, 2, 2, 5, 14, 20, 10, 13, 11, 5, 8
                        ]
                    }, {
                        "name": "加拿大",
                        "data": [
                            0, 1, 1, 7, 1, 0, 0, 3, 2, 3, 4, 3, 3, 1, 3, 2, 4, 5, 7, 13, 15, 17, 24, 26, 25
                        ]
                    }, {
                        "name": "瑞士",
                        "data": [
                            0, 3, 1, 1, 3, 0, 0, 10, 2, 6, 2, 0, 6, 10, 5, 5, 5, 15, 3, 9, 7, 11, 14, 9, 11
                        ]
                    }, {
                        "name": "英國",
                        "data": [
                            0, 4, 1, 0, 3, 0, 0, 2, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 2, 1, 2, 1, 1, 4
                        ]
                    }, {
                        "name": "法國",
                        "data": [
                            0, 3, 1, 1, 1, 0, 0, 5, 1, 0, 3, 7, 9, 3, 1, 1, 3, 2, 9, 5, 8, 11, 9, 11, 15
                        ]
                    }, {
                        "name": "匈牙利",
                        "data": [
                            0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "聯合隊（前蘇聯獨聯體）",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "前蘇聯",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 21, 25, 13, 16, 27, 22, 25, 29, 0, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "俄羅斯",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 18, 13, 22, 15, 33
                        ]
                    }, {
                        "name": "日本",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 3, 0, 1, 1, 1, 7, 5, 10, 2, 1, 5, 8
                        ]
                    }, {
                        "name": "捷克斯洛伐克",
                        "data": [
                            0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 4, 3, 1, 1, 6, 3, 3, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "波蘭",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 2, 2, 6, 6
                        ]
                    }, {
                        "name": "西班牙",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "中國",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 8, 8, 11, 11, 9
                        ]
                    }, {
                        "name": "韓國",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 6, 6, 4, 11, 14, 8
                        ]
                    }, {
                        "name": "捷克共和國",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 4, 6, 8
                        ]
                    }, {
                        "name": "白俄羅斯",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 1, 1, 3, 6
                        ]
                    }, {
                        "name": "哈薩克斯坦",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2, 0, 0, 1, 1
                        ]
                    }, {
                        "name": "保加利亞",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 3, 1, 0, 0
                        ]
                    }, {
                        "name": "丹麥",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "烏克蘭",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 0, 2, 0, 2
                        ]
                    }, {
                        "name": "澳大利亞",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 2, 3, 3
                        ]
                    }, {
                        "name": "比利時",
                        "data": [
                            0, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "羅馬",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "列支敦斯登",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 0, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "南斯拉夫",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 0, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "盧森堡",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "新西蘭",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "朝鮮",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0
                        ]
                    }, {
                        "name": "斯洛伐克",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 1
                        ]
                    }, {
                        "name": "克羅地亞",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 3, 3, 1
                        ]
                    }, {
                        "name": "斯洛文尼亞",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 1, 0, 3, 8
                        ]
                    }, {
                        "name": "拉脫維亞",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 4
                        ]
                    }, {
                        "name": "愛沙尼亞",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 1, 0
                        ]
                    }, {
                        "name": "烏茲別克斯坦",
                        "data": [
                            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0
                        ]
                    }],
                    exporting: {
                        sourceWidth: 800,
                        sourceHeight: 600
                    },
                    credits: {
                        enabled: false // 禁用版權信息
                    }
                });
            }
        }

    };
</script>
<style lang="sass" scoped>
.chart-container
    width: 100%
    //height: 500px
.chart-outer-wrap
    padding: 0 30px 10px
    margin-top: -20px
</style>

效果圖：