教你用 ECharts 画地图，轻松上手实战案例大公开

一、ECharts 简介

ECharts 是一款使用 JavaScript 实现的开源可视化库，可以用于绘制各种图表，包括折线图、柱状图、饼图、地图等。它具有丰富的配置项和强大的扩展能力，是数据可视化领域的佼佼者。

二、ECharts 地图基础

2.1 地图类型

ECharts 支持多种地图类型，包括中国地图、世界地图、省份地图等。下面以中国地图为例进行介绍。

2.2 地图数据格式

ECharts 地图需要使用特定的数据格式，即 JSON 格式。下面是一个简单的示例：

{
  "name": "中国",
  "type": "map",
  "mapType": "china",
  "data": [
    { "name": "北京", "value": 100 },
    { "name": "上海", "value": 200 },
    { "name": "广东", "value": 300 }
  ]
}

2.3 地图配置

在 ECharts 中，可以通过配置项来调整地图的样式和效果。以下是一些常用的配置项：

mapType：指定地图类型，如 “china”、”world” 等。
roam：是否开启地图的缩放和平移功能。
label：地图上显示的文字标签。
itemStyle：地图元素的样式配置。

三、实战案例：中国地图展示

3.1 准备工作

引入 ECharts 库：在 HTML 文件中引入 ECharts 库。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

创建地图容器：在 HTML 文件中创建一个用于展示地图的容器。

<div id="main" style="width: 600px;height:400px;"></div>

3.2 初始化地图

在 JavaScript 中，使用 echarts.init 方法初始化地图实例。

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

3.3 配置地图

使用 setOption 方法配置地图的样式和效果。

var option = {
  title: {
    text: '中国地图示例'
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    min: 0,
    max: 400,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],           // 文本，默认为数值文本
    calculable: true
  },
  series: [
    {
      name: '中国',
      type: 'map',
      mapType: 'china',
      roam: true,
      label: {
        show: true
      },
      data: [
        { "name": "北京", "value": 100 },
        { "name": "上海", "value": 200 },
        { "name": "广东", "value": 300 }
      ]
    }
  ]
};

myChart.setOption(option);

3.4 效果展示

完成以上步骤后，打开 HTML 文件，即可看到展示的中国地图。

四、进阶案例：动态更新地图数据

在实际应用中，可能需要根据实时数据动态更新地图上的数据。以下是一个简单的示例：

// 动态更新数据
function updateData() {
  var newData = [
    { "name": "北京", "value": Math.round(Math.random() * 100) },
    { "name": "上海", "value": Math.round(Math.random() * 100) },
    { "name": "广东", "value": Math.round(Math.random() * 100) }
  ];
  myChart.setOption({
    series: [{
      data: newData
    }]
  });
}

// 每 2 秒更新一次数据
setInterval(updateData, 2000);

通过以上示例，可以看到如何使用 ECharts 地图进行数据可视化。在实际应用中，可以根据需求进行扩展和优化。