新手必看！轻松上手ECharts地图图表，20个实用案例教你绘制中国地图

ECharts是一款强大的开源可视化库，它可以帮助我们轻松地创建各种图表，包括地图图表。对于新手来说，ECharts地图图表的绘制可能显得有些复杂，但别担心，今天我将通过20个实用案例，手把手教你如何轻松上手绘制中国地图。

基础知识

在开始之前，让我们先了解一下ECharts地图图表的基本概念：

数据结构：ECharts地图图表需要使用特定的数据结构来定义地图区域，包括经纬度、名称等。
配置项：通过配置ECharts的选项，我们可以自定义地图的样式、交互等。
事件：ECharts地图图表支持多种事件，如点击、鼠标悬停等。

案例一：中国地图基础绘制

准备数据：获取中国地图的GeoJSON数据。
初始化ECharts实例。

配置地图系列：


var myChart = echarts.init(document.getElementById('main'));
var option = {
    series: [{
        type: 'map',
        map: 'china'
    }]
};
myChart.setOption(option);

展示图表。

案例二：添加地图标签

在配置项中添加label属性。
设置标签的样式和位置。

series: [{
    type: 'map',
    map: 'china',
    label: {
        show: true,
        position: 'left',
        formatter: '{b}'
    }
}]

案例三：自定义地图样式

使用itemStyle属性自定义地图区域样式。
使用areaColor、borderColor等属性调整颜色。

series: [{
    type: 'map',
    map: 'china',
    itemStyle: {
        areaColor: '#f4f4f4',
        borderColor: '#ccc'
    }
}]

案例四：添加地图阴影

在配置项中添加shadowColor和shadowBlur属性。

series: [{
    type: 'map',
    map: 'china',
    itemStyle: {
        areaColor: '#f4f4f4',
        borderColor: '#ccc',
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10
    }
}]

案例五：添加地图标注

在配置项中添加markPoint系列。
设置标注的样式和位置。

series: [{
    type: 'map',
    map: 'china',
    markPoint: {
        symbol: 'pin',
        symbolSize: 50,
        data: [{
            name: '北京',
            value: [116.46, 39.92]
        }]
    }
}]

案例六：添加地图文本

在配置项中添加markLine系列。
设置文本的样式和位置。

series: [{
    type: 'map',
    map: 'china',
    markLine: {
        symbol: 'none',
        smooth: true,
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff'
        },
        data: [{
            name: '北京到上海',
            coords: [[116.46, 39.92], [121.47, 31.23]]
        }]
    }
}]

案例七：添加地图渐变色

在配置项中添加color属性。
设置渐变色的起始和结束颜色。

series: [{
    type: 'map',
    map: 'china',
    itemStyle: {
        areaColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#fff' // 0% 处的颜色
            }, {
                offset: 1, color: '#f4f4f4' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        }
    }
}]

案例八：添加地图动画效果

在配置项中添加animation属性。
设置动画的时长和效果。

series: [{
    type: 'map',
    map: 'china',
    itemStyle: {
        areaColor: '#f4f4f4',
        borderColor: '#ccc',
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut'
    }
}]

案例九：添加地图交互效果

在配置项中添加click事件处理器。
实现交互逻辑。

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

案例十：添加地图提示信息

在配置项中添加tooltip属性。
设置提示信息的格式和内容。

series: [{
    type: 'map',
    map: 'china',
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + '<br/>' + params.value;
        }
    }
}]

案例十一：添加地图缩放功能

在配置项中添加toolbox属性。
设置工具箱的选项。

series: [{
    type: 'map',
    map: 'china',
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                show: true
            }
        }
    }
}]

案例十二：添加地图平移功能

在配置项中添加roam属性。
设置平移的范围和选项。

series: [{
    type: 'map',
    map: 'china',
    roam: true,
    roamOption: {
        mapType: 'china',
        zoom: 1.2,
        center: [105, 38]
    }
}]

案例十三：添加地图多级联动

在配置项中添加dataRange属性。
设置数据范围的选项。

series: [{
    type: 'map',
    map: 'china',
    dataRange: {
        show: true,
        min: 0,
        max: 1000,
        text: ['高', '低'],
        calculable: true
    }
}]

案例十四：添加地图自定义颜色

在配置项中添加color属性。
设置自定义颜色的选项。

series: [{
    type: 'map',
    map: 'china',
    itemStyle: {
        areaColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#ff7f50' // 0% 处的颜色
            }, {
                offset: 1, color: '#87cefa' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        }
    }
}]

案例十五：添加地图数据过滤

在配置项中添加data属性。
设置数据过滤的选项。

series: [{
    type: 'map',
    map: 'china',
    data: [{
        name: '北京',
        value: 100
    }]
}]

案例十六：添加地图数据排序

在配置项中添加sort属性。
设置数据排序的选项。

series: [{
    type: 'map',
    map: 'china',
    data: [{
        name: '北京',
        value: 100
    }],
    sort: {
        order: 'asc',
        prop: 'value'
    }
}]

案例十七：添加地图数据可视化

在配置项中添加visualMap属性。
设置数据可视化的选项。

series: [{
    type: 'map',
    map: 'china',
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 1000,
        calculable: true
    }
}]

案例十八：添加地图数据动态更新

使用Ajax获取数据。
更新ECharts实例的数据。

$.ajax({
    url: 'data.json',
    type: 'get',
    dataType: 'json',
    success: function (data) {
        myChart.setOption({
            series: [{
                data: data
            }]
        });
    }
});

案例十九：添加地图数据导出

在配置项中添加exportExcel属性。
设置导出Excel的选项。

series: [{
    type: 'map',
    map: 'china',
    exportExcel: {
        filename: '中国地图数据',
        sheetName: 'Sheet1'
    }
}]

案例二十：添加地图数据分享

使用二维码生成工具生成二维码。
将二维码添加到地图图表中。

var qrcode = new QRCode(document.getElementById('qrcode'), {
    width: 128,
    height: 128,
    text: 'https://www.example.com'
});

以上20个案例涵盖了ECharts地图图表的各个方面，希望对你有所帮助。在实际应用中，你可以根据自己的需求对这些案例进行修改和扩展。祝你学习愉快！