新手必看！轻松上手echarts地图图表，20个实用案例教你轻松制作酷炫地图

在数据可视化领域，地图图表是一种非常受欢迎的数据展示方式。ECharts 作为一款强大的开源可视化库，提供了丰富的地图图表功能。对于新手来说，掌握 ECharts 地图图表的制作技巧至关重要。本文将为你带来20个实用案例，帮助你轻松上手 ECharts 地图图表的制作。

1. 地图基础配置

在开始制作地图图表之前，我们需要了解一些基础配置。以下是一个简单的地图图表实例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入地图组件
require('echarts/lib/component/map');

// 初始化地图图表
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

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

2. 省级地图

除了中国地图，ECharts 还支持省级地图。以下是一个省级地图的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '山东省地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '山东省',
        type: 'map',
        mapType: '山东',
        label: {
            show: true
        },
        data: [{
            name: '济南市',
            value: 100
        }]
    }]
};

3. 地图点击事件

ECharts 地图图表支持点击事件。以下是一个地图点击事件的实例：

// 监听点击事件
myChart.on('click', function (params) {
    console.log(params.name); // 地图区域名称
    console.log(params.value); // 地图区域值
});

4. 地图动画效果

ECharts 地图图表支持丰富的动画效果。以下是一个地图动画效果的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图动画'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        animationDuration: 1000 // 动画时长
    }]
};

5. 地图颜色渐变

ECharts 地图图表支持颜色渐变。以下是一个地图颜色渐变的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图颜色渐变'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        itemStyle: {
            areaColor: '#ff7f50' // 颜色渐变
        }
    }]
};

6. 地图热力图

ECharts 地图图表支持热力图。以下是一个地图热力图的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图热力图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        emphasis: {
            label: {
                show: true
            }
        },
        itemStyle: {
            color: 'red' // 热力图颜色
        }
    }]
};

7. 地图气泡图

ECharts 地图图表支持气泡图。以下是一个地图气泡图的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图气泡图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        symbolSize: 20, // 气泡大小
        itemStyle: {
            color: 'blue' // 气泡颜色
        }
    }]
};

8. 地图多级联动

ECharts 地图图表支持多级联动。以下是一个地图多级联动的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图多级联动'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        // 省级联动配置
        levels: [{
            // 省级
            itemStyle: {
                areaColor: '#ff7f50'
            },
            label: {
                color: '#fff'
            }
        }, {
            // 市级
            itemStyle: {
                areaColor: '#ff7f50'
            },
            label: {
                color: '#fff'
            }
        }, {
            // 县级
            itemStyle: {
                areaColor: '#ff7f50'
            },
            label: {
                color: '#fff'
            }
        }]
    }]
};

9. 地图数据回显

ECharts 地图图表支持数据回显。以下是一个地图数据回显的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图数据回显'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        // 数据回显配置
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 200
        }]
    }]
};

10. 地图自定义样式

ECharts 地图图表支持自定义样式。以下是一个地图自定义样式的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图自定义样式'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        // 自定义样式配置
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
            areaColor: '#ff7f50'
        }
    }]
};

11. 地图标签配置

ECharts 地图图表支持标签配置。以下是一个地图标签配置的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图标签配置'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            formatter: '{b}: {c}' // 标签格式化
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

12. 地图数据筛选

ECharts 地图图表支持数据筛选。以下是一个地图数据筛选的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图数据筛选'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        // 数据筛选配置
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 200
        }],
        // 筛选条件
        selectedMode: 'multiple',
        selected: {
            '北京': true,
            '上海': true
        }
    }]
};

13. 地图缩放控制

ECharts 地图图表支持缩放控制。以下是一个地图缩放控制的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图缩放控制'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        // 缩放控制配置
        zoom: 1.2
    }]
};

14. 地图图层叠加

ECharts 地图图表支持图层叠加。以下是一个地图图层叠加的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图图层叠加'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        // 图层叠加配置
        layers: [{
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [{
                name: '北京',
                value: [116.46, 39.92]
            }],
            symbolSize: 20,
            symbol: 'pin',
            itemStyle: {
                color: '#f4e925'
            }
        }]
    }]
};

15. 地图动态更新

ECharts 地图图表支持动态更新。以下是一个地图动态更新的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图动态更新'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        // 动态更新配置
        animationDuration: 1000,
        data: [{
            name: '北京',
            value: 200
        }]
    }]
};

16. 地图区域高亮

ECharts 地图图表支持区域高亮。以下是一个地图区域高亮的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图区域高亮'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        // 区域高亮配置
        emphasis: {
            label: {
                show: true
            }
        }
    }]
};

17. 地图区域阴影

ECharts 地图图表支持区域阴影。以下是一个地图区域阴影的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图区域阴影'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        // 区域阴影配置
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }]
};

18. 地图区域描边

ECharts 地图图表支持区域描边。以下是一个地图区域描边的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图区域描边'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        // 区域描边配置
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
        }
    }]
};

19. 地图区域填充

ECharts 地图图表支持区域填充。以下是一个地图区域填充的实例：

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图区域填充'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }],
        // 区域填充配置
        itemStyle: {
            areaColor: '#ff7f50'
        }
    }]
};

20. 地图区域点击事件

ECharts 地图图表支持区域点击事件。以下是一个地图区域点击事件的实例：

// 监听点击事件
myChart.on('click', function (params) {
    console.log(params.name); // 地图区域名称
    console.log(params.value); // 地图区域值
});

通过以上20个实用案例，相信你已经对 ECharts 地图图表的制作有了初步的了解。在实际应用中，你可以根据自己的需求进行扩展和优化。祝你在数据可视化领域取得更好的成绩！