教你用 ECharts 快速制作地图图表：5个实用案例详解

教你用 ECharts 快速制作地图图表：5个实用案例详解

案例一：中国34个省级行政区地图

1.1 准备工作

首先，你需要确保你的项目中已经引入了 ECharts 库。以下是引入 ECharts 的基本步骤：

<!-- 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 引入中国地图数据 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>

1.2 创建地图实例

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

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

然后，使用 JavaScript 初始化 ECharts 实例并配置地图：

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

var option = {
    title: {
        text: '中国34个省级行政区地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '中国34个省级行政区',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 这里可以添加具体的数据
            ]
        }
    ]
};

myChart.setOption(option);

1.3 添加数据

根据实际需求，在 data 数组中添加具体的数值数据。例如：

data: [
    {name: '北京', value: 100},
    {name: '上海', value: 200},
    // ... 其他省级行政区的数据
]

案例二：世界地图

与案例一类似，首先引入 ECharts 库和世界地图数据：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>

然后创建地图实例并配置：

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

var option = {
    title: {
        text: '世界地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 添加具体的数据
            ]
        }
    ]
};

myChart.setOption(option);

案例三：美国州地图

引入 ECharts 库和对应的地图数据：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/us.js"></script>

创建地图实例并配置：

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

var option = {
    title: {
        text: '美国州地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '美国州',
            type: 'map',
            mapType: 'us',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 添加具体的数据
            ]
        }
    ]
};

myChart.setOption(option);

案例四：自定义地图

如果你需要展示一个自定义的区域地图，可以通过 echarts.registerMap 方法注册一个自定义地图。

echarts.registerMap('自定义区域', {
    // 地图数据
});

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

var option = {
    title: {
        text: '自定义区域地图'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '自定义区域',
            type: 'map',
            mapType: '自定义区域',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 添加具体的数据
            ]
        }
    ]
};

myChart.setOption(option);

案例五：结合其他图表类型

ECharts 支持将地图与其他图表类型结合使用。例如，你可以将地图与散点图结合，展示特定区域的数据点。

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

var option = {
    title: {
        text: '地图与散点图结合'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                // 添加散点数据
            ],
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}: {c}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            }
        },
        {
            name: '地图',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                // 添加地图数据
            ]
        }
    ]
};

myChart.setOption(option);

通过以上五个案例，你可以快速上手使用 ECharts 制作各种地图图表。记住，ECharts 是一个非常强大的工具，它提供了丰富的配置项和图表类型，让你可以轻松创建出各种视觉效果和交互效果。