echarts地图 北京加点

Echarts 是百度前端团队开发的一个基于 JavaScript 的可视化图表库，包含了各种常见的图表类型，其中地图也是其中一种。在 Echarts 中，我们可以通过给地图添加点的方式来实现类似于 Google Map 的效果。如果你想在地图上加点，可以按照以下步骤来进行：

1. 下载并引入 Echarts 库到你的项目中。
2. 在 HTML 中创建一个容器元素，用于放置地图。
3. 创建一个基础的地图实例，并设置好地图的样式和数据。
4. 在地图上添加点的数据，并设置点的样式和标签等属性。
5. 将点数据添加到地图实例中，并刷新地图。

下面是一个简单的示例代码，以北京市地图为例：

// 引入 Echarts 库
import echarts from 'echarts';

// 创建地图容器元素
const mapContainer = document.createElement('div');
mapContainer.style.width = '100%';
mapContainer.style.height = '500px';
document.body.appendChild(mapContainer);

// 初始化地图实例
const myChart = echarts.init(mapContainer);

// 设置地图样式和数据
myChart.setOption({
  title: {
    text: '北京市地图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [{
    type: 'map',
    map: '北京',
    label: {
      show: true,
      fontSize: 12,
      fontWeight: 'bold',
      color: '#000'
    },
    itemStyle: {
      normal: {
        borderWidth: 1,
        borderColor: '#fff',
        areaColor: '#eee'
      }
    },
    data: []
  }]
});

// 添加点数据
const pointData = [{
  name: '北京市',
  value: [116.407394, 39.904211],
  label: {
    show: true,
    fontSize: 12,
    color: '#000',
    formatter: '{b}'
  },
  itemStyle: {
    color: '#f00'
  }
}];

// 将点数据添加到地图中并刷新
myChart.setOption({
  series: [{
    data: pointData
  }]
});

以上代码中，我们首先创建了一个容器元素 `mapContainer`，用于存放地图，然后通过 `echarts.init` 方法初始化了一个地图实例 `myChart`。接着，我们设置了北京市地图的样式和数据，并添加了一个名为“北京市”的点数据。最后，我们将点数据添加到地图中，并刷新了一下地图。