Javascript highchart sankey不'；无法在vuejs中显示

我在vuejs中使用highcharts和highcharts vue，但根本不会显示sankey图表：

在main.js中，我已经完成了所有必要的导入

import Highcharts from 'highcharts'
import HighchartsVue from 'highcharts-vue'
import sanKeyInit from 'highcharts/modules/sankey'
sanKeyInit(Highcharts)
import exportingInit from 'highcharts/modules/exporting'
import exportDataInit from 'highcharts/modules/export-data'
import More from 'highcharts/highcharts-more'
exportingInit(Highcharts)
exportDataInit(Highcharts)
import dependencyWheelInit from 'highcharts/modules/dependency-wheel'
dependencyWheelInit(Highcharts)
treemapInit(Highcharts)
More(Highcharts) 

在我的vue组件中，我可以显示树状图，但不能显示sankey图

概述.vue

    <template>
    <v-container pa-0 ma-0>
    <v-layout column>
      <v-flex xs12>
         <v-container pa-0 ma-0 >
           <KeyValue :value="breadCrumb.join('>')" label=""></KeyValue>
         </v-container>
      </v-flex>
      <v-layout row>
        <v-flex xs12>
          <v-layout row>
            <v-flex xs6>
              <highcharts :constructor-type="'chart'" :options="treeMap" :callback="initMap" ref="treeMap"></highcharts>             
            </v-flex>
            <v-flex xs6>
              <!-- <highcharts :constructor-type="'chart'" :options="arc"  :callback="initCircles" ref="circle"></highcharts> -->
              <highcharts :constructor-type="'chart'" :options="wheel" :callback="initWheel"> 
              </highcharts>
                </v-flex>
              </v-layout>
            </v-flex>
      
          </v-layout>
        </v-layout>
      </v-container>
    </template>
    <script>
     import vue from 'vue'
     import KeyValue from '@/components/KeyValue'

    export default {
       name: 'Overview',
       components: {
         KeyValue
       },
      
      data(){
       return {
       breadCrumb: [this.rootName],
       hashTree: {},
       charts: {treemap: null, circles: null, wheel: null},
       currentGraph: {nodeList: [], linkList: []},
       
       tree: [
         {name: 'thesponge', id: '2', value: 12, color: '#aaa'},
         {name: 'aa', id: '3', parent: '2', value: 34, color: '#aaa'},
         {name: 'ab', id: '4', parent: '2', value: 20, color: '#aaa'},
         {name: 'bob ', id: '5',  value: 45, color: '#a00'},
         {name: 'ba', id: '6', parent: '5', value: 40, color: 'red'},
         {name: 'bb', id: '7', parent: '5', value: 56, color: 'red'},
         {name: 'bba', id: '8', parent: '5', value: 40, color: 'red'},
         {name: 'bbb', id: '9', parent: '5', value: 56, color: 'red'},
         {name: 'bba', id: '10', parent: '8', value: 40, color: 'red'},
         {name: 'bbb', id: '11', parent: '8', value: 56, color: 'red'},
       ],
       arch: { '2': { nodeList: [{key: 'a', category: 'OfActivity', text: 'hello' },
                                 {key: 'ab', category: 'OfActivity', text: 'goodbye' }],
                      linkList: [{from: {nodeIdInCurrentGraph: 'a'}, to: {nodeIdInCurrentGraph: 'ab'}},
                                 {from: {nodeIdInCurrentGraph: 'ab'}, to: {nodeIdInCurrentGraph: 'ac'}}
                      ]
       },
               '': { nodeList: [{key: 'a', category: 'OfActivity', text: 'miles' },
                                {key: 'ab', category: 'OfActivity', text: 'davis' }],
                     linkList: [{from: {nodeIdInCurrentGraph: 'a'}, to: {nodeIdInCurrentGraph: 'ab'}},
                                {from: {nodeIdInCurrentGraph: 'a'}, to: {nodeIdInCurrentGraph: 'ac'}}
                     ]
               },
               '5': { nodeList: [{key: 'a', category: 'OfActivity', text: 'john' },
                                 {key: 'ab', category: 'OfActivity', text: 'doe' }],
                      linkList: [{from: {nodeIdInCurrentGraph: 'a'}, to: {nodeIdInCurrentGraph: 'ab'}},
                                 {from: {nodeIdInCurrentGraph: 'a'}, to: {nodeIdInCurrentGraph: 'a'}},
                                 {from: {nodeIdInCurrentGraph: 'ac'}, to: {nodeIdInCurrentGraph: 'ab'}},]
               }
       }
     }
   },
   computed: {
     wheel(){
       return {
         title: { text: 'Dependencies' },
         chart: {
           type: 'chart'
         },
         series: [{
           visible: true,
           name: 'country deps',
           
           keys: ['from', 'to', 'wheight'],
           /* data:[ this.arch[''].linkList.map((l)=>{return {from: l.from.nodeIdInCurrentGraph, to: l.to.nodeIdInCurrentGraph, weight: 1}})
            * ],*/
           data: [ ['Brazil', 'Portugal', 5],
                   ['Brazil', 'France', 1],
                   ['Brazil', 'Spain', 1],
                   ['Brazil', 'England', 1],
                   ['Canada', 'Portugal', 1],
                   ['Canada', 'France', 5],
                   ['Canada', 'England', 1],
                   ['Mexico', 'Portugal', 1],
                   ['Mexico', 'France', 1],
                   ['Mexico', 'Spain', 5],
                   ['Mexico', 'England', 1],
                   ['USA', 'Portugal', 1],
                   ['USA', 'France', 1],
                   ['USA', 'Spain', 1],
                   ['USA', 'England', 5],
                   ['Portugal', 'Angola', 2],
                   ['Portugal', 'Senegal', 1],
                   ['Portugal', 'Morocco', 1],
                   ['Portugal', 'South Africa', 3],
                   ['France', 'Angola', 1],
                   ['France', 'Senegal', 3]
           ],
           type: 'sankey',
         }]
       }
     },
     // ---
     treeMap() {
       return {
         title: { text: 'Navigate' },
         chart: {
           events: {
             load(){
               this.__proto__.vue.initTreeSeries()
             }
           },
         },
         series: [{
           type: 'treemap',
           layoutAlgorithm: 'squarified',
           allowDrillToNode: true,
           animationLimit: 1000,
           dataLabels: {
             enabled: false
           },
           levelIsConstant: false,
           levels: [{
             level: 1,
             dataLabels: {
               enabled: true
             },
             borderWidth: 3
           }],
           events: {
             setRootNode(){
               this.chart.__proto__.vue.updateCharts(arguments[0])               
             }
           },
           data: []
         }]         
       }
     },
    }
     
   },

   props: {
     rootName: {type: String, default: 'root'},
     width: {type: Number, default: 500},
     height: {type: Number, default: 500}
   },
  
   methods: {
  
     initWheel(chart){
       console.log("init wheel", chart)
       chart.__proto__.vue = this
       this.charts.wheel = chart
     },

     initMap(chart){
       this.hashTree = this.tree.reduce((mem,n)=>{
         n.children = []
         if(!n.parent) n.parent = ''
         mem[n.id] = n
         return mem
       },{})
       this.tree.forEach((n)=>{
         if(n.parent === '') return
         if(!this.hashTree[n.parent]) return 
         this.hashTree[n.parent].children.push(n)
       })
       chart.__proto__.vue = this
       this.charts.treemap = chart
     }
     
   }
 }
</script>

从“vue”导入vue
从“@/components/KeyValue”导入KeyValue
导出默认值{
名称：“概述”，
组成部分：{
键值
},
数据（）{
返回{
面包屑：[this.rootName]，
哈希树：{}，
图表：{treemap:null，圆：null，轮：null}，
currentGraph:{nodeList:[]，linkList:[]}，
树：[
{name:'thessonge'，id:'2'，值：12，颜色：'#aaa'}，
{name:'aa'，id:'3'，parent:'2'，value:34，color:'#aaa'}，
{name:'ab'，id:'4'，parent:'2'，value:20，color:'#aaa'}，
{name:'bob'，id:'5'，值：45，颜色：'#a00'}，
{name:'ba'，id:'6'，parent:'5'，value:40，color:'red'}，
{name:'bb'，id:'7'，parent:'5'，value:56，color:'red'}，
{name:'bba'，id:'8'，parent:'5'，value:40，color:'red'}，
{name:'bbb'，id:'9'，parent:'5'，value:56，color:'red'}，
{name:'bba'，id:'10'，parent:'8'，value:40，color:'red'}，
{name:'bbb'，id:'11'，parent:'8'，value:56，color:'red'}，
],
arch:{'2'：{nodeList:[{key:'a'，category:'OfActivity'，text:'hello'}，
{键：'ab'，类别：'OfActivity'，文本：'bye'}]，
链接列表：[{from:{nodeidInvirentGraph:'a'}，to:{nodeidInvirentGraph:'ab'}，
{from:{nodeidInirentGraph:'ab'}，to:{nodeidInirentGraph:'ac'}
]
},
''：{nodeList:[{key:'a'，category:'OfActivity'，text:'miles'}，
{键：'ab'，类别：'OfActivity'，文本：'davis'}]，
链接列表：[{from:{nodeidInvirentGraph:'a'}，to:{nodeidInvirentGraph:'ab'}，
{from:{nodeidInirentGraph:'a'}，to:{nodeidInirentGraph:'ac'}
]
},
'5'：{nodeList:[{key:'a'，category:'OfActivity'，text:'john'}，
{键：'ab'，类别：'OfActivity'，文本：'doe'}]，
链接列表：[{from:{nodeidInvirentGraph:'a'}，to:{nodeidInvirentGraph:'ab'}，
{from:{nodeidInvirentGraph:'a'}，to:{nodeidInvirentGraph:'a'}，
{from:{nodeidInirentGraph:'ac'}，to:{nodeidInirentGraph:'ab'}，]
}
}
}
},
计算：{
车轮（）{
返回{
标题：{text:'Dependencies'}，
图表：{
键入：“图表”
},
系列：[{
可见：对，
姓名：'国家副部长'，
键：[“from”，“to”，“wheight”]，
/*数据：[this.arch[“”].linkList.map（（l）=>{return{from:l.from.nodeIdInCurrentGraph，to:l.to.nodeIdInCurrentGraph，权重：1}}）
* ],*/
数据：[巴西”，“葡萄牙”，5]，
[‘巴西’、‘法国’、1]，
[‘巴西’、‘西班牙’、1]，
[‘巴西’、‘英国’、1]，
[‘加拿大’、‘葡萄牙’、1]，
[‘加拿大’、‘法国’、5]，
[‘加拿大’、‘英国’、1]，
[‘墨西哥’、‘葡萄牙’、1]，
[‘墨西哥’、‘法国’、1]，
[‘墨西哥’、‘西班牙’、5]，
['墨西哥'，'英国'，1]，
[‘美国’、‘葡萄牙’、1]，
[‘美国’、‘法国’、1]，
[‘美国’、‘西班牙’、1]，
[‘美国’、‘英国’、5]，
[‘葡萄牙’、‘安哥拉’、2]，
[‘葡萄牙’、‘塞内加尔’、1]，
[‘葡萄牙’、‘摩洛哥’、1]，
[‘葡萄牙’、‘南非’、3]，
[‘法国’、‘安哥拉’、1]，
[‘法国’、‘塞内加尔’，3]
],
键入：“sankey”，
}]
}
},
// ---
树映射（）{
返回{
标题：{text:'导航'}，
图表：{
活动：{
加载（）{
这个。_uproto_u.vue.initTreeSeries（）
}
},
},
系列：[{
类型：'treemap'，
布局算法：“squarified”，
allowDrillToNode:true，
动画限制：1000，
数据标签：{
已启用：false
},
levelIsConstant:false，
级别：[{
级别：1，
数据标签：{
已启用：true
},
边框宽度：3
}],
活动：{
setRootNode（）{
this.chart.\uuuuu proto\uuuu.vue.updateCharts（参数[0]）
}
},
数据：[]
}]         
}
},
}
},
道具：{
rootName:{type:String，默认值：'root'}，
宽度：{type:Number，默认值：500}，
高度：{type:Number，默认值：500}
},
方法：{
initWheel（图表）{
console.log（“init wheel”，图表）
chart.\uuuu proto\uuuu.vue=此
this.charts.wheel=图表
},
initMap（图表）{
this.hashTree=this.tree.reduce（（mem，n）=>{
n、 儿童=[]
如果（！n.parent）n.parent=''
mem[n.id]=n
返回内存
},{})
this.tree.forEach（（n）=>{
如果（n.parent==''）返回
如果（！this.hashTree[n.parent]）返回