echarts 使用BMapGL

可以使用echarts的BMapGL扩展来在百度地图上显示echarts的scatter、effectScatter、custom元素。具体步骤如下：

1. 引入echarts和BMapGL扩展库

<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 id="map" style="width: 100%; height: 600px;"></div>

3. 初始化地图

// 初始化地图
var myChart = echarts.init(document.getElementById('map'));

// 设置地图的配置项
var option = {
    bmap: {
        center: [116.46, 39.92], // 地图中心点
        zoom: 10, // 地图缩放级别
        roam: true // 开启地图漫游
    },
    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]}
        ],
        symbolSize: 10, // 散点大小
        label: {
            show: true,
            position: 'right',
            formatter: '{b}'
        },
        itemStyle: {
            color: '#FF0000'
        }
    }]
};

// 将配置项设置到地图中
myChart.setOption(option);

4. 在浏览器中查看地图效果

以上代码将在地图上显示四个散点，分别代表北京、上海、广州和深圳，并且散点的颜色为红色。