vue+echart 实现热力图 调用echart里的百度地图 再进行热力图渲染 地图和热力图分开渲染

在应用echart实现热力图时 出现了一个疑问，可以使地图和热力图渲染分开进行么  实现一次地图显示 多次不同数据渲染 就不用每次在option加bmap进行地图显示

bmap: {
            center: [120.13066322374, 30.240018034923],
            zoom: 14,
            roam: true
        },

首先在public/index.html里加上 百度地图api

定义容器放地图 和热力图渲染

然后methods里定义函数 创建地图

methods: {
        //创建百度地图
        creatMap(){
            const myChart = echarts.init(this.$refs.map);
            const option = {
                bmap: {
                    center: [120.13066322374, 30.240018034923],
                    zoom: 8,
                    mapStyleV2: {
                        styleId: '50aa27f5dc9a72aff522ccefb0da0e83'
                    },
                    roam: true
                },
            }
            myChart.setOption(option)
        }
}

在mounted里初始化地图

mounted() {
        this.creatMap()
    }

效果：

 再进行热力图渲染 直接使用echart热力图例子 https://www.echartsjs.com/examples/zh/editor.html?c=heatmap-bmap

//渲染热力图
drawHeat(){
            const points = [].concat.apply([], data.map(function (track) {
                return track.map(function (seg) {
                    return seg.coord.concat([1]);
                });
            }));
            const myChart = echarts.getInstanceByDom(this.$refs.map)
            const option = {
                animation: false,
                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,
                    gradientColors: [{
                        offset: 0.4,
                        color: 'green'
                    }, {
                        offset: 0.5,
                        color: 'yellow'
                    }, {
                        offset: 0.8,
                        color: 'orange'
                    }, {
                        offset: 1,
                        color: 'red'
                    }]
                }]
            }
            myChart.setOption(option)
        }

 这里没有加bmap 因为前面creatMap函数已经渲染了地图，里面的data是官方的json数据 我下载到本地同级目录了

json数据地址：https://www.echartsjs.com/examples/data/asset/data/hangzhou-tracks.json

echarts.getInstanceByDom(this.$refs.map)是获取当前echart实例 在该实例上进行热力图操作

添加了点击按钮 点击就渲染热力图 效果如图：

 这样 方便渲染其他数据下的热力图 或者刷新 

其中如果想对地图进行其他操作  百度地图API里的操作 只需获取到该地图实例就可以了

也可以算是echarts里调用百度地图

//获取当前echart实例
const myChart=echarts.getInstanceByDom(this.$refs.map)
// 添加百度地图插件 map为当前地图实例
const map = myChart.getModel().getComponent('bmap').getBMap();

 代码结构：