ECharts 使用 GeoJSON 实现中国地图下钻到省级地图

2023-10-11 08:12:17

准备数据

首先，我们需要准备中国地图的 GeoJSON 数据。您可以从各种来源获取这些数据，例如 GeoJSON.io 或 GitHub。
数据示例：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "北京市"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[...]]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "天津市"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[...]]
      }
    },
    // 其它省市数据
  ]
}

2. 创建 ECharts 实例

接下来，我们需要创建一个 ECharts 实例。您可以通过以下代码来创建：

var myChart = echarts.init(document.getElementById('main'));

3. 设置地图选项

接下来，我们需要设置地图选项。其中，map 属性指定了地图的名称，itemStyle 属性指定了地图的样式，selectedMode 属性指定了地图的选择模式，label 属性指定了地图的标签。

var option = {
  series: [
    {
      type: 'map',
      map: 'china',
      itemStyle: {
        normal: {
          areaColor: '#0099FF',
          borderColor: '#fff'
        },
        emphasis: {
          areaColor: '#FF9900'
        }
      },
      selectedMode: 'single',
      label: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      },
      data: data
    }
  ]
};

4. 注册省级地图

接下来，我们需要注册省级地图。我们可以通过以下代码来注册：

echarts.registerMap('province', provinceJson);

其中，provinceJson 是省级地图的 GeoJSON 数据。

5. 绑定事件监听器

接下来，我们需要绑定事件监听器，以便在点击省份时触发地图下钻。我们可以通过以下代码来绑定事件监听器：

myChart.on('click', function (params) {
  if (params.componentType === 'series') {
    var province = params.name;
    myChart.registerMap(province, provinceJson);
    myChart.setOption({
      series: [
        {
          type: 'map',
          map: province,
          data: data
        }
      ]
    });
  }
});

6. 渲染 ECharts 实例

最后，我们需要渲染 ECharts 实例。我们可以通过以下代码来渲染：

myChart.setOption(option);

7. 完整代码

以下是完整的代码：

// 引入 ECharts
var echarts = require('echarts');

// 获取地图数据
var chinaJson = require('./china.json');
var provinceJson = require('./province.json');

// 创建 ECharts 实例
var myChart = echarts.init(document.getElementById('main'));

// 设置地图选项
var option = {
  series: [
    {
      type: 'map',
      map: 'china',
      itemStyle: {
        normal: {
          areaColor: '#0099FF',
          borderColor: '#fff'
        },
        emphasis: {
          areaColor: '#FF9900'
        }
      },
      selectedMode: 'single',
      label: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      },
      data: chinaJson
    }
  ]
};

// 注册省级地图
echarts.registerMap('province', provinceJson);

// 绑定事件监听器
myChart.on('click', function (params) {
  if (params.componentType === 'series') {
    var province = params.name;
    myChart.registerMap(province, provinceJson);
    myChart.setOption({
      series: [
        {
          type: 'map',
          map: province,
          data: data
        }
      ]
    });
  }
});

// 渲染 ECharts 实例
myChart.setOption(option);