轻松上手echarts地图图表：20个实用案例教你绘制地理信息可视化

在当今大数据时代，地理信息可视化已成为数据分析的重要组成部分。echarts作为一款功能强大的图表库，提供了丰富的地图图表功能，帮助用户轻松实现地理信息的可视化展示。本文将为您带来20个实用案例，让您快速掌握echarts地图图表的绘制技巧。

案例一：世界地图展示

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

var option = {
    title: {
        text: '世界地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '世界地图',
        type: 'map',
        mapType: 'world',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '中国',
            itemStyle: {
                areaColor: '#00aaff'
            }
        }]
    }]
};

myChart.setOption(option);

案例二：中国地图展示

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

var option = {
    title: {
        text: '中国地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国地图',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            itemStyle: {
                areaColor: '#00aaff'
            }
        }]
    }]
};

myChart.setOption(option);

案例三：自定义地图展示

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

var option = {
    title: {
        text: '自定义地图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '自定义地图',
        type: 'map',
        mapType: 'custom',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '上海',
            itemStyle: {
                areaColor: '#00aaff'
            }
        }]
    }]
};

myChart.setOption(option);

案例四：地图热力图展示

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

var option = {
    title: {
        text: '地图热力图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图热力图',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

案例五：地图气泡图展示

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

var option = {
    title: {
        text: '地图气泡图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图气泡图',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100,
            symbolSize: 100
        }]
    }]
};

myChart.setOption(option);

案例六：地图散点图展示

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

var option = {
    title: {
        text: '地图散点图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图散点图',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: [116.46, 39.92]
        }]
    }]
};

myChart.setOption(option);

案例七：地图柱状图展示

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

var option = {
    title: {
        text: '地图柱状图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图柱状图',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100,
            itemStyle: {
                color: '#00aaff'
            }
        }]
    }]
};

myChart.setOption(option);

案例八：地图折线图展示

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

var option = {
    title: {
        text: '地图折线图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图折线图',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: [116.46, 39.92]
        }]
    }]
};

myChart.setOption(option);

案例九：地图雷达图展示

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

var option = {
    title: {
        text: '地图雷达图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图雷达图',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: [1, 2, 3, 4, 5]
        }]
    }]
};

myChart.setOption(option);

案例十：地图饼图展示

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

var option = {
    title: {
        text: '地图饼图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图饼图',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100,
            itemStyle: {
                color: '#00aaff'
            }
        }]
    }]
};

myChart.setOption(option);

案例十一：地图组合图展示

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

var option = {
    title: {
        text: '地图组合图'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图组合图',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100,
            itemStyle: {
                color: '#00aaff'
            }
        }]
    }, {
        name: '柱状图',
        type: 'bar',
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

案例十二：地图动态数据展示

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

var option = {
    title: {
        text: '地图动态数据展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图动态数据展示',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

setInterval(function () {
    option.series[0].data[0].value = Math.floor(Math.random() * 100);
    myChart.setOption(option);
}, 1000);

案例十三：地图多维度数据展示

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

var option = {
    title: {
        text: '地图多维度数据展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图多维度数据展示',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: [100, 80, 60, 40]
        }]
    }]
};

myChart.setOption(option);

案例十四：地图自定义颜色展示

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

var option = {
    title: {
        text: '地图自定义颜色展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图自定义颜色展示',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100,
            itemStyle: {
                color: '#ff0000'
            }
        }]
    }]
};

myChart.setOption(option);

案例十五：地图自定义标记展示

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

var option = {
    title: {
        text: '地图自定义标记展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图自定义标记展示',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100,
            itemStyle: {
                borderColor: '#ff0000',
                borderWidth: 2
            }
        }]
    }]
};

myChart.setOption(option);

案例十六：地图缩放与平移展示

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

var option = {
    title: {
        text: '地图缩放与平移展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图缩放与平移展示',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

案例十七：地图事件监听展示

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

var option = {
    title: {
        text: '地图事件监听展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图事件监听展示',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.on('click', function (params) {
    console.log(params.name);
});

myChart.setOption(option);

案例十八：地图多地图切换展示

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

var option = {
    title: {
        text: '地图多地图切换展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图多地图切换展示',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

var mapType = ['china', 'world'];

myChart.on('click', function (params) {
    if (params.name === '中国') {
        myChart.setOption({
            series: [{
                mapType: mapType[0]
            }]
        });
    } else if (params.name === '世界') {
        myChart.setOption({
            series: [{
                mapType: mapType[1]
            }]
        });
    }
});

myChart.setOption(option);

案例十九：地图数据交互展示

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

var option = {
    title: {
        text: '地图数据交互展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图数据交互展示',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.on('click', function (params) {
    if (params.name === '北京') {
        alert('您点击了北京');
    }
});

myChart.setOption(option);

案例二十：地图与表格数据联动展示

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

var option = {
    title: {
        text: '地图与表格数据联动展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '地图与表格数据联动展示',
        type: 'map',
        mapType: 'china',
        roam: true,
        label: {
            show: true,
            color: '#fff'
        },
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.on('click', function (params) {
    if (params.name === '北京') {
        var table = document.getElementById('table');
        var tr = table.insertRow();
        var td1 = tr.insertCell();
        var td2 = tr.insertCell();
        td1.innerHTML = params.name;
        td2.innerHTML = params.value;
    }
});

myChart.setOption(option);

以上20个实用案例涵盖了echarts地图图表的绘制技巧，通过学习这些案例，您可以轻松掌握echarts地图图表的绘制方法。在实际应用中，您可以根据需求对案例进行修改和拓展，以实现更多样化的地图可视化效果。祝您学习愉快！