Vue 使用 Echarts 时 地图不显示 请问怎么引用bmap?

Question

Vue 使用 Echarts 时 地图不显示 请问怎么引用bmap?

<template>
    <div id="HotSpot"></div>
</template>
<script>
export default {
    
    name: 'HotSpot', //热点图
    data(){
        return{
            geoCoordMap:[
                {name:'丹东',value:[124.37,40.13,355]},
                {name:'瓦房店',value:[121.979603,39.627114,359]},
                {name:'抚顺',value:[123.97,41.97]},
                {name:'葫芦岛',value:[120.836932,40.711052,1563]},
                {name:'营口',value:[122.18,40.65,12]},
                {name:'盘锦',value:[122.070714,41.119997,658]},
                {name:'大连',value:[121.62,38.92,110]},
                {name:'沈阳',value:[123.38,41.8,435]},
                {name:'锦州',value:[121.15,41.13,152]},
                {name:'本溪',value:[123.73,41.3,365]},
                {name:'鞍山',value:[122.85,41.12,153]},
            ]
        }
    },
    props: {
        
    },
    mounted() {
        this.drawChart();
    },
    methods:{
        drawChart(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('HotSpot'));
            // 绘制图表
            myChart.setOption({
                tooltip : {
                    trigger: 'item'
                },
                bmap: {
                    center: [104.114129, 37.550339],
                    zoom: 5,
                    roam: true,
                },
                series : [
                    {
                        name: 'pm2.5',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: [
                            {name:'丹东',value:[124.37,40.13,355]},
                            {name:'瓦房店',value:[121.979603,39.627114,359]},
                            {name:'抚顺',value:[123.97,41.97]},
                            {name:'葫芦岛',value:[120.836932,40.711052,1563]},
                            {name:'营口',value:[122.18,40.65,12]},
                            {name:'盘锦',value:[122.070714,41.119997,658]},
                            {name:'大连',value:[121.62,38.92,110]},
                            {name:'沈阳',value:[123.38,41.8,435]},
                            {name:'锦州',value:[121.15,41.13,152]},
                            {name:'本溪',value:[123.73,41.3,365]},
                            {name:'鞍山',value:[122.85,41.12,153]},
                        ],
                        symbolSize: function (val) {
                            return val[2] / 10;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#ddb926'
                            }
                        }
                    },
                ]
            },true);
        }
    }
}
</script>
<style>
</style>

Answer 1

<div id="HotSpot"></div>没有设置宽高是出不来的。

Answer 2

https://segmentfault.com/q/10... 这里有答案，前提是下载好echarts包 npm install echarts --save