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>

效果图：