学习echarts地图图表，从这20个实用案例开始，轻松上手！

案例一：中国地图展示

ECharts 地图图表的一个基本应用是展示中国地图。你可以通过以下步骤来创建一个简单的中国地图：

引入 ECharts 和中国地图数据。
创建一个地图实例，指定地图类型为 ‘china’。
设置地图的配置项，包括地图的初始视图和缩放比例。

// 引入 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: 100
        }]
    }]
};

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

案例二：世界地图展示

创建世界地图的方法与创建中国地图类似，只需将地图类型从 ‘china’ 改为 ‘world’。

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

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '世界地图示例'
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        label: {
            show: true
        },
        data: [{
            name: '美国',
            value: 100
        }]
    }]
};

案例三：地图上显示数据点

在地图上显示数据点，可以通过 series 中的 markPoint 元素实现。

series: [{
    name: '数据点',
    type: 'map',
    mapType: 'china',
    markPoint: {
        symbolSize: 100,
        data: [{
            name: '北京',
            value: 100,
            itemStyle: {
                color: 'red'
            }
        }]
    }
}]

案例四：地图上显示热力图

使用 heatmap 元素可以在地图上创建热力图效果。

series: [{
    name: '热力图',
    type: 'map',
    mapType: 'china',
    heatmap: {
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200},
            // ... 其他数据
        ]
    }
}]

案例五：地图上的路径展示

展示路径，可以通过 series 中的 lines 元素实现。

series: [{
    name: '路径',
    type: 'lines',
    coordinateSystem: 'geo',
    data: [
        {source: '北京', target: '上海'},
        // ... 其他路径
    ]
}]

案例六：地图上的面填充

使用 series 中的 map 元素可以填充地图的面。

series: [{
    name: '面填充',
    type: 'map',
    mapType: 'china',
    itemStyle: {
        areaColor: '#f00',
        borderColor: '#333'
    }
}]

案例七：自定义地图样式

ECharts 允许你自定义地图的样式，包括颜色、边框等。

itemStyle: {
    normal: {
        areaColor: '#f00',
        borderColor: '#333'
    },
    emphasis: {
        areaColor: '#ff0',
        borderColor: '#666'
    }
}

案例八：地图上的点击事件

你可以通过 tooltip 配置来定义地图上的点击事件。

tooltip: {
    trigger: 'item',
    formatter: function (params) {
        return params.name + ': ' + params.value;
    }
}

案例九：动态更新地图数据

动态更新地图数据可以通过修改 series 中的数据来实现。

setOption({
    series: [{
        data: [{
            name: '北京',
            value: 200
        }]
    }]
});

案例十：地图上的文本标签

在地图上添加文本标签，可以通过 label 配置来实现。

label: {
    show: true,
    formatter: '{b}: {c}'
}

案例十一：地图上的动画效果

添加动画效果可以通过 animation 配置来实现。

animation: true,
animationDuration: 1000,
animationEasing: 'cubicInOut'

案例十二：地图上的交互功能

ECharts 地图支持多种交互功能，如缩放、拖动等。

geo: {
    zoom: 1.2,
    roam: true
}

案例十三：地图上的自定义视觉映射

自定义视觉映射可以通过 visualMap 元素来实现。

visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    text: ['高', '低'],
    calculable: true
}

案例十四：地图上的多级数据展示

在地图上展示多级数据，可以通过嵌套的 series 元素来实现。

series: [{
    name: '多级数据',
    type: 'map',
    mapType: 'china',
    data: [{
        name: '北京',
        value: 100,
        children: [{
            name: '北京市',
            value: 50
        }]
    }]
}]

案例十五：地图上的多图叠加

在地图上叠加多个图表，可以通过添加多个 series 元素来实现。

series: [{
    name: '图表1',
    type: 'map',
    mapType: 'china',
    // ... 配置项
}, {
    name: '图表2',
    type: 'map',
    mapType: 'china',
    // ... 配置项
}]

案例十六：地图上的数据过滤

通过 data 属性来过滤显示特定的数据。

data: [{
    name: '北京',
    value: 100,
    selected: true
}]

案例十七：地图上的数据聚合

使用 series 中的 effectScatter 元素来实现数据的聚合。

series: [{
    name: '数据聚合',
    type: 'effectScatter',
    coordinateSystem: 'geo',
    data: [
        {name: '北京', value: 100},
        // ... 其他数据
    ]
}]

案例十八：地图上的自定义工具栏

自定义工具栏可以通过 toolbox 配置来实现。

toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
        dataZoom: {
            title: '数据缩放'
        },
        dataView: {
            title: '数据视图'
        },
        magicType: {
            title: '动态类型切换',
            type: ['line', 'bar', 'stack', 'tiled']
        },
        restore: {
            title: '还原'
        },
        saveAsImage: {
            title: '保存为图片'
        }
    }
}

案例十九：地图上的自定义颜色

自定义颜色可以通过 visualMap 配置来实现。

visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    text: ['高', '低'],
    calculable: true,
    inRange: {
        color: ['#313695', '#4575b4', '#74add1', '#b3cde3', '#d1e5f0', '#fff']
    }
}

案例二十：地图上的自定义标记

自定义标记可以通过 markPoint 配置来实现。

markPoint: {
    symbolSize: 100,
    data: [{
        name: '北京',
        value: 100,
        itemStyle: {
            symbol: 'circle',
            symbolSize: 100,
            color: '#f00'
        }
    }]
}

通过以上20个实用案例，你可以轻松上手学习 ECharts 地图图表。每个案例都展示了地图的不同应用场景，希望对你有所帮助。在实际开发中，你可以根据需求调整和组合这些案例，以实现更丰富的地图展示效果。