在数字化时代，地图图表已成为展示地理信息和经济分布的重要工具。ECharts，作为一款强大的开源可视化库，能够帮助我们轻松制作出精美的地图图表。本文将带您从城市到乡村，通过ECharts地图图表，展示全国经济分布的案例集。

一、ECharts地图图表简介

ECharts地图图表是基于地理坐标系统，通过数据驱动的方式，将地理信息与统计数据相结合，直观地展示地理分布情况。它支持多种地图类型，如中国地图、世界地图、行政区划地图等，能够满足不同场景下的需求。

二、城市经济分布案例

1. 一线城市经济分布

以下是一个使用ECharts展示一线城市经济分布的案例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '一线城市经济分布'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['北京', '上海', '广州', '深圳']
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 10000,
        text: ['高', '低'],
        calculable: true
    },
    series: [
        {
            name: '经济分布',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: 10000},
                {name: '上海', value: 8000},
                {name: '广州', value: 6000},
                {name: '深圳', value: 5000}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2. 二线城市经济分布

以下是一个使用ECharts展示二线城市经济分布的案例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '二线城市经济分布'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['成都', '杭州', '武汉', '南京']
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 8000,
        text: ['高', '低'],
        calculable: true
    },
    series: [
        {
            name: '经济分布',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '成都', value: 8000},
                {name: '杭州', value: 7000},
                {name: '武汉', value: 6000},
                {name: '南京', value: 5000}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

三、乡村经济分布案例

1. 农村地区经济分布

以下是一个使用ECharts展示农村地区经济分布的案例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '农村地区经济分布'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['河北', '山西', '内蒙古', '辽宁']
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 5000,
        text: ['高', '低'],
        calculable: true
    },
    series: [
        {
            name: '经济分布',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '河北', value: 5000},
                {name: '山西', value: 4000},
                {name: '内蒙古', value: 3000},
                {name: '辽宁', value: 2000}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2. 乡村地区经济分布

以下是一个使用ECharts展示乡村地区经济分布的案例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '乡村地区经济分布'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['江苏', '浙江', '安徽', '福建']
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 3000,
        text: ['高', '低'],
        calculable: true
    },
    series: [
        {
            name: '经济分布',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '江苏', value: 3000},
                {name: '浙江', value: 2000},
                {name: '安徽', value: 1000},
                {name: '福建', value: 500}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

四、总结

通过以上案例，我们可以看到ECharts地图图表在展示全国经济分布方面的强大功能。无论是城市还是乡村，ECharts都能帮助我们直观地展示经济数据，为政策制定和经济发展提供有力支持。希望本文能对您有所帮助。