echarts引入地图

Echarts 是一个基于 JavaScript 的开源可视化库，支持多种图表类型，包括地图。以下是引用地图的步骤：

1. 引入 Echarts 库和地图数据文件

在 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. 创建容器

在 HTML 中创建一个容器来显示地图。例如：

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

3. 初始化地图

在 JavaScript 中初始化地图。例如：

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

// 配置项
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: [[104.114129, 37.550339]],
        symbolSize: 20,
        label: {
            show: true,
            formatter: '{b}',
            position: 'right'
        },
        itemStyle: {
            color: 'purple'
        },
        emphasis: {
            label: {
                show: true
            }
        }
    }]
};

// 使用配置项显示图表
myChart.setOption(option);

在这个例子中，我们使用了百度地图作为底图，将地图中心点设置为经度为104.114129，纬度为37.550339的位置，放大倍数为5，并且禁止缩放。在 series 中定义了一个散点图，坐标系为 bmap，数据为 [104.114129, 37.550339]，符号大小为20，标签位置在右侧。