Javascript Vue Highcharts“；TypeError:无法读取属性'；图表'；“未定义”的定义；

我正在尝试使用Vue的Highcharts在Vue.js中显示Highcharts中的图表。我一直在浏览器控制台上为我创建的观察者和方法（参见下面的代码）获取标题中的错误。以及其他Vue方法（请参见代码下方的屏幕截图）

观察者触发dataSource（）方法。dataSource（）方法用于读取列表和计算图表数据；const“base”是从中提取类别和数据的地方。setup（）方法用于设置图表并将其显示在屏幕上（此方法仅在数据就绪时触发）

如何解决这些错误

从“vuex”导入{mapState}；
从“洛达斯”进口；
从“Highcharts”导入{Highcharts}；
导出默认值{
计算：mapState({
list:state=>state.list
}),
//每次修改列表时的观察者。触发器dataSource（）方法；
观察：{
列表（）{
this.dataSource（）；
}
},
方法：{
//用于读取列表和计算图表数据
数据源（）{
const countries=this.list.map（item=>item.country）；
//从中提取类别和数据的常量
const base=389;（国家）
.countBy（）
.map（（值，键）=>（{key，值}））
.orderBy（[“value”]，[“desc”]）
.value（）；
const categories=base.map（item=>item.key）；
const values=base.map（item=>item.value）；
设置（{categories，values}）；
},
//用于设置图表并在屏幕上显示。此方法仅在数据准备就绪时触发
设置（obj）{
const{categories，values}=obj；
Highcharts.chart（“国家容器”{
图表：{
类型：“列”
},
标题：{
正文：“月平均降雨量”
},
副标题:{
文本：“来源：WorldClimate.com”
},
xAxis：{
类别:类别,，
十字准星：对
},
亚克斯：{
分:0,，
标题：{
文字：“降雨量（毫米）”
}
},
系列：[
{
名称：“Quantidade”，
数据：值
}
]
});
}
}
};

从文档

将Highcharts作为ES6模块加载

从“Highcharts”导入Highcharts

您正在使用命名导入

还有，有点离题，但仍在主题上。。为什么要从CDN加载vue js，但其他库都已导入？
在此处输入代码片段时，可以选择正在使用的框架版本（在本场景中为vue）。这就是我所做的，这就是为什么它出现在代码顶部。它只是提供了一些信息。似乎您还没有使用官方的Highcharts vue包装器来实现它。请使用此API了解：