echarts官方的示例

从官方文档拷过来,改动成自己需要的内容之后,一直报错。网上搜了很多资料,一直没找到为什么找不到type,有些文章说是引入的问题
Cannot read properties of undefined (reading 'type')
type只出现在了option属性配置中
series: [
{
type: "heatmap",
coordinateSystem: "bmap",
data: points,
pointSize: 6,
blurSize: 22,
},
],
猜测难道是我没有引入heatmap
//引入热力图
import 'echarts/lib/chart/heatmap'
然而这并没有用,海搜信息后,发现使用echart画热力图,其实使用了echarts的百度地图扩展bmap。所以真正需要引入的是:
import "echarts/extension/bmap/bmap";
心累但还好找到了原因,被这个找不到 type:heatmap 蒙蔽了双眼啊。
贴一下画热力图的代码
//points热力图需要数据,是个二维数组
//例如:[[经度,纬度,热力度]]:[[120.123,30.123,10]]
drawHeat(points) {
let centerLng = this.centerLng;
let centerLat = this.centerLat;
var myChart = echarts.getInstanceByDom(document.getElementById("container"));
// 解决重复渲染问题,myChart存在的话就销毁
if (myChart != null && myChart != "" && myChart != undefined) {
myChart.dispose();
}
// 初始化。
myChart = echarts.init(document.getElementById("container"));
var option;
myChart.setOption(
(option = {
animation: false,
bmap: {
center: [centerLng, centerLat],
zoom: 12,
roam: true,
},
visualMap: {
show: false,
top: "top",
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ["blue", "blue", "green", "yellow", "red"],
},
},
series: [
{
type: "heatmap",
coordinateSystem: "bmap",
data: points,
pointSize: 6,
blurSize: 22,
},
],
})
);
option && myChart.setOption(option);
// 添加百度地图插件
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
},
},
在尝试使用echarts官方示例修改为自己的热力图时,遇到`Cannot read properties of undefined (reading 'type')`错误。经过排查,问题出在未正确引入echarts的百度地图扩展bmap。引入bmap后,解决了找不到'type:heatmap'的错误,成功绘制热力图。
1899

被折叠的 条评论
为什么被折叠?



