教你轻松制作echarts地图图表：5个实用案例详解，轻松上手可视化数据

案例一：中国地图的省份数据可视化

步骤一：准备工作

首先，确保你已经安装了 ECharts 库。可以通过以下代码在 HTML 文件中引入 ECharts：

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

步骤二：HTML 结构

创建一个 div 容器用于显示图表：

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

步骤三：JavaScript 代码

编写 JavaScript 代码，初始化图表，并设置地图数据：

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

var option = {
    title: {
        text: '中国地图省份数据可视化'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '省份数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京',value: Math.round(Math.random() * 1000)},
                {name: '天津',value: Math.round(Math.random() * 1000)},
                // 其他省份数据...
            ]
        }
    ]
};

myChart.setOption(option);

步骤四：运行结果

保存代码并打开 HTML 文件，你将看到一个带有省份数据的地图图表。

案例二：全球地图的各国数据可视化

步骤一：准备工作

与案例一相同，确保你已经安装了 ECharts 库。

步骤二：HTML 结构

创建一个 div 容器用于显示图表：

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

步骤三：JavaScript 代码

编写 JavaScript 代码，初始化图表，并设置地图数据：

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

var option = {
    title: {
        text: '全球地图各国数据可视化'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '各国数据',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: 'China',value: Math.round(Math.random() * 1000)},
                {name: 'United States',value: Math.round(Math.random() * 1000)},
                // 其他国家数据...
            ]
        }
    ]
};

myChart.setOption(option);

步骤四：运行结果

保存代码并打开 HTML 文件，你将看到一个带有各国数据的地图图表。

案例三：省份地图的市数据可视化

步骤一：准备工作

与案例一相同，确保你已经安装了 ECharts 库。

步骤二：HTML 结构

创建一个 div 容器用于显示图表：

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

步骤三：JavaScript 代码

编写 JavaScript 代码，初始化图表，并设置地图数据：

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

var option = {
    title: {
        text: '省份地图的市数据可视化'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '市数据',
            type: 'map',
            mapType: 'provinceMap',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京市',value: Math.round(Math.random() * 1000)},
                {name: '天津市',value: Math.round(Math.random() * 1000)},
                // 其他市数据...
            ]
        }
    ]
};

myChart.setOption(option);

步骤四：运行结果

保存代码并打开 HTML 文件，你将看到一个带有市数据的省份地图图表。

案例四：市地图的区数据可视化

步骤一：准备工作

与案例一相同，确保你已经安装了 ECharts 库。

步骤二：HTML 结构

创建一个 div 容器用于显示图表：

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

步骤三：JavaScript 代码

编写 JavaScript 代码，初始化图表，并设置地图数据：

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

var option = {
    title: {
        text: '市地图的区数据可视化'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '区数据',
            type: 'map',
            mapType: 'cityMap',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '东城区',value: Math.round(Math.random() * 1000)},
                {name: '西城区',value: Math.round(Math.random() * 1000)},
                // 其他区数据...
            ]
        }
    ]
};

myChart.setOption(option);

步骤四：运行结果

保存代码并打开 HTML 文件，你将看到一个带有区数据的市地图图表。

案例五：自定义地图的航线数据可视化

步骤一：准备工作

与案例一相同，确保你已经安装了 ECharts 库。

步骤二：HTML 结构

创建一个 div 容器用于显示图表：

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

步骤三：JavaScript 代码

编写 JavaScript 代码，初始化图表，并设置地图数据：

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

var option = {
    title: {
        text: '自定义地图的航线数据可视化'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [
        {
            name: '航线数据',
            type: 'lines',
            coordinateSystem: 'geo',
            polyline: true,
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: '#fff',
                symbolSize: 3
            },
            data: [
                {name: '起始点',value: [116.397428,39.90923]},
                {name: '终点',value: [121.472644,31.231706]},
                // 其他航线数据...
            ]
        }
    ]
};

myChart.setOption(option);

步骤四：运行结果

保存代码并打开 HTML 文件，你将看到一个带有航线的自定义地图图表。