echarts 图标显示地图 然后 点亮某个城市的

ECharts是一个强大的JavaScript数据可视化库，可以用于创建各种图表，包括地图。要在ECharts中展示地图并点亮特定城市，你可以按照以下步骤操作：

1. **引入ECharts和地理编码插件**：
首先，确保你在项目中已经包含了ECharts的CDN链接，并安装了`echarts-gmap`插件。如果你还没有安装，可以在项目中通过npm或其他包管理工具添加。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gmap@1.0.6/dist/echarts-gmap.min.js"></script>

2. **初始化地图配置**：
创建一个新的ECharts实例，设置地图的主题、缩放级别等。例如，选择中国地图：

let mapChart = echarts.init(document.getElementById('main'), 'gmap');
mapChart.setOption({
  geo: {
    type: ' china',
    zoom: 4,
    roam: false,
    label: { show: true }
  },
});

3. **获取城市坐标**：
获取你要点亮的城市名称，然后使用第三方API（如高德地图的API）将其转换为经纬度坐标。这里假设我们已经有了一个`getCityCoord`函数：

const city = '北京';
const coord = getCityCoord(city); // 假设这个函数返回的是经纬度数组 [经度, 纬度]

4. **绘制点标记**：
添加一个标记到地图上，位置由经纬度坐标指定：

mapChart.setOption({
  series: [{
    name: '城市标记',
    type: 'scatter',
    coordinateSystem: 'gmap',
    data: [
      { name: city, value: coord }
    ],
    symbol: 'circle', // 或者其他图标，如marker图标
    itemStyle: {
      normal: {
        color: '#FF0000' // 点亮的颜色，这里用红色示例
      }
    }
  }]
});

5. **更新地图**：
最后，将新的地图配置应用到ECharts实例上：

mapChart.update();