Cannot read property 'extendComponentModel' of undefined at bmap.min.js

Star-live commented 4 years ago

Version

4.6.0

Steps to reproduce

根据提示引入dist/echarts.min.js和dist/extension/bmap.min.js，参考https://github.com/apache/incubator-echarts/tree/master/extension/bmap 和https://echarts.apache.org/examples/zh/editor.html?c=heatmap-bmap 编写以下前端代码


<script type="text/javascript" src='../static/js/jquery.min.js'></script>
<script type="text/javascript" src='../static/js/bmap.min.js'></script>
<script type="text/javascript" src='../static/js/echarts.min.js'></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=***"></script>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('maps'))

    myChart.showLoading();
        $.get('../static/json/hangzhou-tracks.json', function (data) {

            var points = [].concat.apply([], data.map(function (track) {
                return track.map(function (seg) {
                    return seg.coord.concat([1]);
                });
            }));
            console.log(points);
            myChart.hideLoading();
            var option = {
                animation: false,
                bmap: {
                    center: [120.13066322374, 30.240018034923],
                    zoom: 14,
                    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: 5,
                    blurSize: 6
                }]
            };
            myChart.setOption(option);
           // 添加百度地图插件
            var bmap = myChart.getModel().getComponent('bmap').getBMap();
            bmap.addControl(new BMap.MapTypeControl());
    });
</script>

//tips:百度密钥在本地是可以正常使用的，此处用*号表示

What is expected?

希望能够生成和示例（ https://echarts.apache.org/examples/zh/editor.html?c=heatmap-bmap ）中相似的热力图效果

What is actually happening?

Uncaught TypeError: Cannot read property 'extendComponentModel' of undefined at bmap.min.js:22
Uncaught TypeError: Cannot read property 'getBMap' of undefined at Object.success ((index):82) at j (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at x (jquery.min.js:4) at XMLHttpRequest. (jquery.min.js:4)

echarts-bot[bot] commented 4 years ago

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

yufeng04 commented 4 years ago

I can't reproduce this issue. Would you like to download this file and try again？

echarts-bot[bot] commented 4 years ago

This issue is closed due to not being active. Please feel free to open it again (for the author) or create a new one and reference this (for others) if you have further questions.

aninstein commented 3 years ago

同样的问题，报同样的错，跟示例无关，就是bmap文件有问题。 echarts版本：5.0.2

fwgood commented 3 years ago

同样的问题，通过CDN的

z384647062 commented 3 years ago

echarts.min.js 需要放在 bmap.min.js 之前引入，不然会报 echarts undefined

另外，如果项目使用的打包环境，不要使用CDN方式引入 echarts.min.js 和 bmap.min.js，只需要引入一个 http://api.map.baidu.com/api?v=2.0&ak=*** 在代码中：

import * as echarts from 'echarts/core';
import 'echarts/dist/extension/bmap.min.js';

aaronyyan commented 3 years ago

@z384647062 我现在版本是5.1.1，按照你说的引入，但是地图就没法出来了

z384647062 commented 3 years ago

@z384647062 我现在版本是5.1.1，按照你说的引入，但是地图就没法出来了

更新一下：我这边在开发环境下正常，生产环境下无法显示地图，可能是由于BMap的模块引入之后未被调用，在webpack打包（我使用的umi）的时候被tree shaking掉了；以下是我的解决方式（注意引用的顺序）：

import * as echarts from 'echarts/core';
// import 'echarts/dist/extension/bmap.min.js';
import _m from 'echarts/extension-src/bmap/BMapView';
import _v from 'echarts/extension-src/bmap/BMapModel';
import { version } from 'echarts/extension-src/bmap/bmap';
console.log(version, _m, _v); // 防止webpack优化

aaronyyan commented 3 years ago

@z384647062 我现在版本是5.1.1，按照你说的引入，但是地图就没法出来了

更新一下：我这边在开发环境下正常，生产环境下无法显示地图，可能是由于BMap的模块引入之后未被调用，在webpack打包（我使用的umi）的时候被优化掉了；以下是我的解决方式（注意引用的顺序）：
import * as echarts from 'echarts/core';
// import 'echarts/dist/extension/bmap.min.js';
import _m from 'echarts/extension-src/bmap/BMapView';
import _v from 'echarts/extension-src/bmap/BMapModel';
import { version } from 'echarts/extension-src/bmap/bmap';
console.log(version, _m, _v); // 防止webpack优化

Module not found: Error: Can't resolve 'echarts/extension-src/bmap/BMapView' 有遇到吗

z384647062 commented 3 years ago

@z384647062 我现在版本是5.1.1，按照你说的引入，但是地图就没法出来了

更新一下：我这边在开发环境下正常，生产环境下无法显示地图，可能是由于BMap的模块引入之后未被调用，在webpack打包（我使用的umi）的时候被优化掉了；以下是我的解决方式（注意引用的顺序）：
import * as echarts from 'echarts/core';
// import 'echarts/dist/extension/bmap.min.js';
import _m from 'echarts/extension-src/bmap/BMapView';
import _v from 'echarts/extension-src/bmap/BMapModel';
import { version } from 'echarts/extension-src/bmap/bmap';
console.log(version, _m, _v); // 防止webpack优化
Module not found: Error: Can't resolve 'echarts/extension-src/bmap/BMapView' 有遇到吗

确认下node_modules目录下有是否有/echarts/extension-src/bmap/BMapView

aaronyyan commented 3 years ago

@z384647062 我现在版本是5.1.1，按照你说的引入，但是地图就没法出来了

更新一下：我这边在开发环境下正常，生产环境下无法显示地图，可能是由于BMap的模块引入之后未被调用，在webpack打包（我使用的umi）的时候被优化掉了；以下是我的解决方式（注意引用的顺序）：
import * as echarts from 'echarts/core';
// import 'echarts/dist/extension/bmap.min.js';
import _m from 'echarts/extension-src/bmap/BMapView';
import _v from 'echarts/extension-src/bmap/BMapModel';
import { version } from 'echarts/extension-src/bmap/bmap';
console.log(version, _m, _v); // 防止webpack优化
Module not found: Error: Can't resolve 'echarts/extension-src/bmap/BMapView' 有遇到吗
确认下node_modules目录下有是否有/echarts/extension-src/bmap/BMapView

https://tva1.sinaimg.cn/large/008i3skNgy1gqvtifhuu5j30f80fa75d.jpg 目录下是有的，我换成import _m from 'echarts/extension/bmap/BMapView';可以

apache / echarts