正文

轻松学会echarts地图图表：10个实用案例教你玩转地理可视化

/0 浏览量
1103

在当今数据可视化领域，ECharts地图图表以其强大的功能和易用性受到了广泛关注。无论是展示国家、省份、城市等不同级别的地理信息，还是实现动态交互，ECharts都能轻松胜任。下面，我将通过10个实用案例，带你一步步玩转地理可视化。

案例1：中国地图数据展示

首先，我们需要引入ECharts和对应的地图数据。以下是一个简单的中国地图数据展示案例：

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

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

var option = {
    title: {
        text: '中国地图数据展示',
        subtext: '示例数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '上海', value: Math.round(Math.random() * 1000)},
                // ... 其他城市数据
            ]
        }
    ]
};

myChart.setOption(option);

案例2：世界地图数据展示

与国内地图类似，世界地图数据展示的步骤也基本相同。只需引入相应的世界地图数据即可。

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

// ... 其他代码与案例1相同

var option = {
    // ... 其他配置
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            // ... 其他配置
            data: [
                {name: '美国', value: Math.round(Math.random() * 1000)},
                {name: '法国', value: Math.round(Math.random() * 1000)},
                // ... 其他国家数据
            ]
        }
    ]
};

案例3：自定义地图数据展示

ECharts支持自定义地图数据，只需提供相应的地理坐标和名称即可。以下是一个自定义地图数据展示的案例：

// 自定义地图数据
var customMapData = {
    'name': '自定义地图',
    'type': 'map',
    'features': [
        {
            'name': '北京',
            'value': 90,
            'center': [116.46, 39.92]
        },
        {
            'name': '上海',
            'value': 80,
            'center': [121.47, 31.23]
        },
        // ... 其他城市数据
    ]
};

// ... 其他代码与案例1相同

var option = {
    // ... 其他配置
    series: [
        {
            name: '自定义地图',
            type: 'map',
            mapType: 'custom',
            // ... 其他配置
            data: [customMapData]
        }
    ]
};

案例4：地图热点图

热点图是一种将地理信息与数值信息相结合的可视化方式。以下是一个地图热点图案例：

// 引入热点图数据
require('echarts/map/js/hotmap');

// ... 其他代码与案例1相同

var option = {
    // ... 其他配置
    series: [
        {
            name: '热点图',
            type: 'map',
            mapType: 'hotmap',
            // ... 其他配置
            data: [
                {name: '北京', value: 90},
                {name: '上海', value: 80},
                // ... 其他城市数据
            ]
        }
    ]
};

案例5：地图缩放与平移

ECharts地图支持缩放和平移操作。以下是一个地图缩放与平移的案例：

// ... 其他代码与案例1相同

var option = {
    // ... 其他配置
    series: [
        {
            name: '地图缩放与平移',
            type: 'map',
            mapType: 'china',
            // ... 其他配置
            zoom: 1.2, // 设置地图缩放比例
            roam: true // 开启缩放和平移
        }
    ]
};

案例6：地图点击事件

ECharts地图支持点击事件，可以用于实现交互功能。以下是一个地图点击事件的案例：

// ... 其他代码与案例1相同

var option = {
    // ... 其他配置
    series: [
        {
            name: '地图点击事件',
            type: 'map',
            mapType: 'china',
            // ... 其他配置
            label: {
                show: true,
                formatter: '{b}'
            },
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            data: [
                {name: '北京', value: 90},
                {name: '上海', value: 80},
                // ... 其他城市数据
            ]
        }
    ]
};

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

案例7：地图动画效果

ECharts地图支持丰富的动画效果，以下是一个地图动画效果的案例：

// ... 其他代码与案例1相同

var option = {
    // ... 其他配置
    series: [
        {
            name: '地图动画效果',
            type: 'map',
            mapType: 'china',
            // ... 其他配置
            animation: true,
            animationDuration: 1000, // 动画时长
            animationEasing: 'cubicInOut' // 动画效果
        }
    ]
};

案例8：地图层级切换

ECharts地图支持多层级切换，以下是一个地图层级切换的案例：

// ... 其他代码与案例1相同

var option = {
    // ... 其他配置
    series: [
        {
            name: '地图层级切换',
            type: 'map',
            mapType: 'china',
            // ... 其他配置
            levels: [
                {
                    itemStyle: {
                        areaColor: '#323c48'
                    }
                },
                {
                    itemStyle: {
                        areaColor: '#2c343c'
                    }
                },
                {
                    itemStyle: {
                        areaColor: '#1e2124'
                    }
                }
            ]
        }
    ]
};

案例9：地图标签样式自定义

ECharts地图支持标签样式自定义，以下是一个地图标签样式自定义的案例：

// ... 其他代码与案例1相同

var option = {
    // ... 其他配置
    series: [
        {
            name: '地图标签样式自定义',
            type: 'map',
            mapType: 'china',
            // ... 其他配置
            label: {
                show: true,
                position: 'top',
                formatter: '{b}: {c}'
            }
        }
    ]
};

案例10：地图与散点图结合

ECharts地图与散点图结合可以展示更丰富的地理信息。以下是一个地图与散点图结合的案例：

// ... 其他代码与案例1相同

var option = {
    // ... 其他配置
    series: [
        {
            name: '地图与散点图结合',
            type: 'map',
            mapType: 'china',
            // ... 其他配置
            data: [
                {name: '北京', value: [116.46, 39.92]},
                {name: '上海', value: [121.47, 31.23]},
                // ... 其他城市数据
            ]
        },
        {
            name: '散点图',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]},
                {name: '上海', value: [121.47, 31.23]},
                // ... 其他城市数据
            ]
        }
    ]
};

通过以上10个实用案例，相信你已经对ECharts地图图表有了更深入的了解。希望这些案例能帮助你更好地玩转地理可视化。

-- 展开阅读全文 --