新手必看！轻松上手echarts地图图表，20个实用案例教学，数据可视化不再难

在当今数据驱动的世界中，数据可视化成为了展示和分析数据的重要手段。ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助我们轻松创建各种图表，包括地图图表。对于新手来说，ECharts 地图图表可能有些复杂，但别担心，本文将为你提供20个实用案例，帮助你轻松上手，让你的数据可视化之路不再难。

案例一：中国地图展示

首先，我们从最基础的开始。以下是一个展示中国地图的简单例子：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');

// 初始化地图图表
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: Math.round(Math.random() * 1000)},
            // ... 其他省份数据
        ]
    }]
};

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

案例二：世界地图展示

除了中国地图，ECharts 也支持世界地图。以下是一个展示世界地图的例子：

// 引入世界地图数据
require('echarts/map/js/world');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} <br/>{c} (人口)'
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [
            {name: '美国', value: Math.round(Math.random() * 1000)},
            // ... 其他国家数据
        ]
    }]
};

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

案例三：自定义地图

ECharts 允许你自定义地图，以下是一个使用自定义地图数据的例子：

// 引入自定义地图数据
require('echarts/map/js/customMap');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '自定义地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '自定义地图',
        type: 'map',
        mapType: 'customMap',
        label: {
            show: true
        },
        data: [
            {name: '区域1', value: Math.round(Math.random() * 1000)},
            // ... 其他区域数据
        ]
    }]
};

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

案例四：地图上的热力图

在地图上展示热力图可以更直观地展示数据的密集程度。以下是一个在地图上展示热力图的例子：

// 引入热力图数据
require('echarts/map/js/china');

// 初始化地图图表
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: Math.round(Math.random() * 1000)},
            // ... 其他省份数据
        ],
        // 添加热力图
        visualMap: {
            min: 0,
            max: 1000,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            calculable: true
        }
    }]
};

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

案例五：地图上的折线图

在地图上展示折线图可以展示数据随时间或其他变量的变化趋势。以下是一个在地图上展示折线图的例子：

// 引入地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图折线图示例'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['销量']
    },
    xAxis: {
        type: 'category',
        data: ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都', '重庆', '天津']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'line',
        data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70],
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        },
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
    }]
};

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

案例六：地图上的散点图

散点图可以展示数据之间的关系。以下是一个在地图上展示散点图的例子：

// 引入地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图散点图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '散点图',
        type: 'scatter',
        data: [
            [10, 20],
            [20, 10],
            [30, 40],
            [40, 30],
            [50, 50]
        ]
    }]
};

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

案例七：地图上的柱状图

柱状图可以展示不同地区的数据对比。以下是一个在地图上展示柱状图的例子：

// 引入地图数据
require('echarts/map/js/china');

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '地图柱状图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: 'category',
        data: ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都', '重庆', '天津']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70]
    }]
};

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