在数字化时代，地图图表作为一种直观的信息展示方式，已经深入到我们生活的方方面面。ECharts，作为一款强大的开源可视化库，以其丰富的图表类型和灵活的配置能力，成为了数据可视化领域的佼佼者。本文将带您从城市到乡村，一图看尽 ECharts 地图图表的魅力，通过一系列案例展示其强大的功能和应用场景。

城市繁华，一目了然

案例一：城市人口密度分布

描述：利用 ECharts 地图图表，可以直观地展示城市人口密度的分布情况。

实现：

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

var option = {
    title: {
        text: '城市人口密度分布'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['高密度区', '中密度区', '低密度区']
    },
    series: [
        {
            name: '人口密度',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '高密度区'},
                {value: 310, name: '中密度区'},
                {value: 234, name: '低密度区'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

myChart.setOption(option);

案例二：城市交通流量分析

描述：通过 ECharts 地图图表，可以实时展示城市交通流量情况，帮助交通管理部门进行科学决策。

实现：

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

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: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 1000},
                {name: '上海', value: 800},
                {name: '广州', value: 600},
                {name: '深圳', value: 500}
            ]
        }
    ]
};

myChart.setOption(option);

乡村美景，如诗如画

案例三：乡村旅游资源分布

描述：利用 ECharts 地图图表，可以展示乡村旅游资源的分布情况，为游客提供便捷的出行指南。

实现：

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

var option = {
    title: {
        text: '乡村旅游资源分布'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    series: [
        {
            name: '旅游资源',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '云南', value: 200},
                {name: '四川', value: 150},
                {name: '贵州', value: 100},
                {name: '广西', value: 50}
            ]
        }
    ]
};

myChart.setOption(option);

案例四：乡村环境质量监测

描述：通过 ECharts 地图图表，可以实时展示乡村环境质量监测数据，为环境保护提供有力支持。

实现：

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

var option = {
    title: {
        text: '乡村环境质量监测'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['优', '良'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '环境质量',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: '云南', value: 90},
                {name: '四川', value: 80},
                {name: '贵州', value: 70},
                {name: '广西', value: 60}
            ]
        }
    ]
};

myChart.setOption(option);

通过以上案例，我们可以看到 ECharts 地图图表在展示城市繁华和乡村美景方面的强大能力。无论是人口密度、交通流量，还是旅游资源、环境质量，ECharts 都能以直观、生动的方式呈现出来，为我们的工作和生活提供有力支持。