echarts显示地图

要使用 echarts 显示地图，需要先引入 echarts 库和地图数据。具体步骤如下：

1. 在 HTML 文件中引入 echarts 库和地图数据：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

2. 创建一个 div 元素作为 echarts 的容器：

<div id="map" style="width: 100%; height: 500px;"></div>

3. 在 JavaScript 文件中初始化 echarts 实例，并配置地图选项：

var myChart = echarts.init(document.getElementById('map'));

// 配置地图选项
var option = {
    bmap: {
        center: [104.114129, 37.550339], // 地图中心点
        zoom: 5, // 地图缩放级别
        roam: true, // 开启地图漫游
        mapStyle: {
            styleJson: [
                {
                    'featureType': 'water',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                },
                {
                    'featureType': 'land',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#f3f3f3'
                    }
                },
                {
                    'featureType': 'railway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                },
                {
                    'featureType': 'highway',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fdfdfd'
                    }
                },
                {
                    'featureType': 'highway',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                },
                {
                    'featureType': 'arterial',
                    'elementType': 'geometry',
                    'stylers': {
                        'color': '#fefefe'
                    }
                },
                {
                    'featureType': 'arterial',
                    'elementType': 'geometry.fill',
                    'stylers': {
                        'color': '#fefefe'
                    }
                },
                {
                    'featureType': 'poi',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                },
                {
                    'featureType': 'green',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                },
                {
                    'featureType': 'subway',
                    'elementType': 'all',
                    'stylers': {
                        'visibility': 'off'
                    }
                },
                {
                    'featureType': 'manmade',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                },
                {
                    'featureType': 'local',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                },
                {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                        'visibility': 'off'
                    }
                },
                {
                    'featureType': 'boundary',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#fefefe'
                    }
                },
                {
                    'featureType': 'building',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                },
                {
                    'featureType': 'label',
                    'elementType': 'labels.text.fill',
                    'stylers': {
                        'color': '#999999'
                    }
                }
            ]
        }
    },
    series: [
        {
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: [
                {name: '北京', value: [116.46, 39.92]},
                {name: '上海', value: [121.48, 31.22]},
                {name: '广州', value: [113.23, 23.16]},
                {name: '深圳', value: [114.07, 22.62]},
                {name: '杭州', value: [120.19, 30.26]}
            ],
            symbolSize: 10,
            label: {
                show: true,
                formatter: function (params) {
                    return params.name;
                },
                position: 'top'
            },
            itemStyle: {
                color: '#FFD700'
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

这样就可以在页面上显示一个带有地图的 echarts 图表了。