echart 地图下钻及标记点综合示例

当然，我可以给你一个 ECharts 地图下钻及标记点的综合示例。以下是一个简单的示例代码：

// 引入 ECharts
import * as echarts from 'echarts';

// 初始化 ECharts 实例
const chart = echarts.init(document.getElementById('chart'));

// 定义地图数据
const mapData = [
  { name: '北京', value: 100 },
  { name: '上海', value: 200 },
  { name: '广州', value: 300 },
  // 其他城市数据...
];

// 定义地图下钻的配置项
const drillDownConfig = {
  // 地图的初始配置
  base: {
    map: 'china',
    roam: true,
    selectedMode: 'single',
    label: {
      show: true,
    },
    itemStyle: {
      emphasis: {
        areaColor: '#f2d5ad',
        label: {
          show: true,
        },
      },
    },
    regions: [
      // 配置需要下钻的区域
      { name: '广东', selected: true },
      // 其他需要下钻的区域...
    ],
  },
  // 下钻到省级地图的配置
  province: {
    map: '广东',
    label: {
      show: true,
    },
    itemStyle: {
      emphasis: {
        areaColor: '#f2d5ad',
        label: {
          show: true,
        },
      },
    },
    regions: [
      // 配置需要下钻的区域
      { name: '广州', selected: true },
      // 其他需要下钻的区域...
    ],
  },
};

// 地图的点击事件处理函数
function mapClickHandler(params) {
  const { name } = params;

  // 根据点击的区域进行下钻
  switch (name) {
    case '广东':
      chart.setOption(drillDownConfig.province);
      break;
    case '广州':
      // 执行具体的下钻操作
      // 下钻后可以重新渲染地图数据和标记点
      break;
    default:
      chart.setOption(drillDownConfig.base);
  }
}

// 设置地图的配置项
const option = {
  series: [
    {
      type: 'map',
      name: '地图名称',
      map: 'china',
      label: {
        show: true,
      },
      itemStyle: {
        emphasis: {
          areaColor: '#f2d5ad',
          label: {
            show: true,
          },
        },
      },
      data: mapData,
    },
  ],
};

// 绑定地图的点击事件
chart.on('click', mapClickHandler);

// 渲染地图
chart.setOption(option);

以上代码是一个简单的 ECharts 地图下钻及标记点的综合示例。你可以根据自己的需求进行进一步修改和扩展。希望对你有帮助！如有任何问题，请随时向我提问。