从新手到高手：学会ECharts地图图表制作，50个实用案例详解

引言

ECharts是一个使用JavaScript实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。地图图表在数据可视化中扮演着重要角色，可以帮助我们直观地展示地理分布数据。对于新手来说，学习ECharts地图图表制作可能有些挑战，但通过以下50个实用案例的详解，相信你能够从新手迅速成长为高手。

案例一：基础地图展示

在ECharts中，我们可以通过简单的配置来展示一个基础地图。以下是一个使用ECharts展示中国地图的示例代码：

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

var option = {
    title: {
        text: '中国地图'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

案例二：地图区域高亮

在地图图表中，我们经常需要突出显示某个区域。以下是一个展示如何使用ECharts实现地图区域高亮的示例代码：

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

var option = {
    title: {
        text: '地图区域高亮'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100,
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }]
    }]
};

myChart.setOption(option);

案例三：地图数据热力图

地图数据热力图可以直观地展示地理数据的热度分布。以下是一个使用ECharts实现地图数据热力图的示例代码：

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

var option = {
    title: {
        text: '地图数据热力图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 1000
        }]
    }]
};

myChart.setOption(option);

案例四：地图多层级展示

在实际应用中，我们可能需要展示地图的多层级信息。以下是一个使用ECharts实现地图多层级展示的示例代码：

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

var option = {
    title: {
        text: '地图多层级展示'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }, {
        name: '北京市',
        type: 'map',
        mapType: 'beijing',
        label: {
            show: true
        },
        data: [{
            name: '东城区',
            value: 100
        }]
    }]
};

myChart.setOption(option);

案例五：地图点击事件

在地图图表中，我们可以为地图区域绑定点击事件，实现交互效果。以下是一个使用ECharts实现地图点击事件的示例代码：

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

var option = {
    title: {
        text: '地图点击事件'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    console.log(params.name + '被点击了！');
});

案例六：地图缩放与平移

在地图图表中，我们可以通过用户操作实现地图的缩放与平移。以下是一个使用ECharts实现地图缩放与平移的示例代码：

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

var option = {
    title: {
        text: '地图缩放与平移'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    var view = myChart.getOption().series[0].view;
    var center = [params.value[0], params.value[1]];
    var scale = params.value[2];
    myChart.setOption({
        series: [{
            view: {
                center: center,
                scale: scale
            }
        }]
    });
});

案例七：地图区域联动

在实际应用中，我们可能需要实现地图区域之间的联动效果。以下是一个使用ECharts实现地图区域联动的示例代码：

var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));

var option1 = {
    title: {
        text: '地图区域联动1'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

var option2 = {
    title: {
        text: '地图区域联动2'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart1.setOption(option1);
myChart2.setOption(option2);

myChart1.on('click', function (params) {
    myChart2.setOption(option2);
});

案例八：地图动画效果

在地图图表中，我们可以为地图区域添加动画效果，使图表更加生动。以下是一个使用ECharts实现地图动画效果的示例代码：

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

var option = {
    title: {
        text: '地图动画效果'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: 0
});

案例九：地图自定义样式

在实际应用中，我们可能需要自定义地图的样式，以满足特定的需求。以下是一个使用ECharts实现地图自定义样式的示例代码：

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

var option = {
    title: {
        text: '地图自定义样式'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        itemStyle: {
            normal: {
                areaColor: '#1E90FF',
                borderColor: '#FFFFFF'
            },
            emphasis: {
                areaColor: '#FF69B4',
                borderColor: '#FF69B4'
            }
        }
    }]
};

myChart.setOption(option);

案例十：地图数据动态更新

在实际应用中，我们可能需要实时更新地图数据。以下是一个使用ECharts实现地图数据动态更新的示例代码：

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

var option = {
    title: {
        text: '地图数据动态更新'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

// 模拟数据更新
setInterval(function () {
    option.series[0].data[0].value = Math.floor(Math.random() * 1000);
    myChart.setOption(option);
}, 1000);

案例十一：地图数据导出

在实际应用中，我们可能需要将地图数据导出为其他格式，如CSV、JSON等。以下是一个使用ECharts实现地图数据导出的示例代码：

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

var option = {
    title: {
        text: '地图数据导出'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    var data = myChart.getOption().series[0].data;
    var csvContent = "name,value\n";
    data.forEach(function (item) {
        csvContent += item.name + "," + item.value + "\n";
    });
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", "data:text/csv;charset=utf-8," + encodedUri);
    link.setAttribute("download", "map_data.csv");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
});

案例十二：地图数据导入

在实际应用中，我们可能需要将其他格式的数据导入到地图中。以下是一个使用ECharts实现地图数据导入的示例代码：

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

var option = {
    title: {
        text: '地图数据导入'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: []
    }]
};

myChart.setOption(option);

// 模拟数据导入
var data = [
    {name: '北京', value: 100},
    {name: '上海', value: 200},
    {name: '广州', value: 300}
];
option.series[0].data = data;
myChart.setOption(option);

案例十三：地图区域筛选

在实际应用中，我们可能需要筛选地图中的特定区域。以下是一个使用ECharts实现地图区域筛选的示例代码：

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

var option = {
    title: {
        text: '地图区域筛选'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    var data = myChart.getOption().series[0].data;
    var filteredData = data.filter(function (item) {
        return item.name === params.name;
    });
    myChart.setOption({
        series: [{
            data: filteredData
        }]
    });
});

案例十四：地图区域统计

在实际应用中，我们可能需要统计地图中特定区域的数量。以下是一个使用ECharts实现地图区域统计的示例代码：

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

var option = {
    title: {
        text: '地图区域统计'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    var data = myChart.getOption().series[0].data;
    var count = data.filter(function (item) {
        return item.name === params.name;
    }).length;
    console.log(params.name + '的数量为：' + count);
});

案例十五：地图区域查询

在实际应用中，我们可能需要查询地图中特定区域的详细信息。以下是一个使用ECharts实现地图区域查询的示例代码：

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

var option = {
    title: {
        text: '地图区域查询'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    var data = myChart.getOption().series[0].data;
    var detail = data.filter(function (item) {
        return item.name === params.name;
    })[0];
    console.log(params.name + '的详细信息：' + JSON.stringify(detail));
});

案例十六：地图区域排序

在实际应用中，我们可能需要按照特定条件对地图区域进行排序。以下是一个使用ECharts实现地图区域排序的示例代码：

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

var option = {
    title: {
        text: '地图区域排序'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    var data = myChart.getOption().series[0].data;
    var sortedData = data.sort(function (a, b) {
        return a.value - b.value;
    });
    myChart.setOption({
        series: [{
            data: sortedData
        }]
    });
});

案例十七：地图区域分组

在实际应用中，我们可能需要将地图区域进行分组。以下是一个使用ECharts实现地图区域分组的示例代码：

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

var option = {
    title: {
        text: '地图区域分组'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    var data = myChart.getOption().series[0].data;
    var groupedData = data.reduce(function (result, item) {
        var group = result[item.value] || {
            name: item.value,
            children: []
        };
        group.children.push(item);
        result[item.value] = group;
        return result;
    }, {});
    var series = Object.keys(groupedData).map(function (key) {
        return {
            name: groupedData[key].name,
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: groupedData[key].children
        };
    });
    myChart.setOption({
        series: series
    });
});

案例十八：地图区域合并

在实际应用中，我们可能需要将地图区域进行合并。以下是一个使用ECharts实现地图区域合并的示例代码：

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

var option = {
    title: {
        text: '地图区域合并'
    },
    tooltip: {},
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

myChart.on('click', function (params) {
    var data = myChart.getOption().series[0].data;
    var mergedData = data.reduce(function (result, item) {
        var group = result[item.value] || {
            name: item.value,
            children: []
        };
        group.children.push(item);
        result[item.value] = group;
        return result;
    }, {});
    var series = Object.keys(mergedData).map(function (key) {
        return {
            name: mergedData[key].name,
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: mergedData[key].children
        };
    });
    myChart.setOption({
        series: series
    });
});

案例十九：地图区域切割

在实际应用中，我们可能需要将地图区域进行切割。以下是一个使用ECharts实现地图区域切割的示例代码：

”`javascript var myChart = echarts.init(document.getElementById(‘main’));

var option = {

title: {
    text: '地图区域切割'
},
tooltip: {},
series: [{
    name: '中国',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    data: [{
        name: '北京',
        value: 100
    }]
}]

};

myChart.setOption(option);

myChart.on(‘click’, function (params) {

var data = myChart.getOption().series[0].data;
var slicedData = data.slice(0, 2);
myChart.setOption({
    series: [{
        data: slicedData