新手必看！轻松上手echarts地图图表，10个实用案例带你飞

案例一：中国地图的绘制

在echarts中绘制中国地图，首先需要引入echarts库，并设置地图数据。以下是一个简单的示例代码：

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

// 初始化echarts实例
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
        }, {
            name: '上海',
            value: 200
        }]
    }]
};

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

案例二：世界地图的绘制

绘制世界地图与绘制中国地图类似，只是需要引入世界地图数据。以下是一个简单的示例代码：

// 引入echarts主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');

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

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

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

案例三：自定义地图样式

echarts支持自定义地图样式，包括地图的颜色、边框、阴影等。以下是一个自定义地图样式的示例代码：

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

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '自定义地图样式示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '中国',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        itemStyle: {
            color: '#ff7f50',
            borderColor: '#99ffff',
            borderWidth: 1,
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)'
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '上海',
            value: 200
        }]
    }]
};

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

案例四：地图上的散点图

在地图上绘制散点图，可以通过设置series的type为’markPoint’来实现。以下是一个在地图上绘制散点图的示例代码：

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

// 初始化echarts实例
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,
            markPoint: {
                symbol: 'pin',
                symbolSize: 50,
                label: {
                    normal: {
                        formatter: '北京',
                        position: 'top'
                    }
                }
            }
        }, {
            name: '上海',
            value: 200,
            markPoint: {
                symbol: 'pin',
                symbolSize: 50,
                label: {
                    normal: {
                        formatter: '上海',
                        position: 'top'
                    }
                }
            }
        }]
    }]
};

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

案例五：地图上的折线图

在地图上绘制折线图，可以通过设置series的type为’line’来实现。以下是一个在地图上绘制折线图的示例代码：

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

// 初始化echarts实例
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,
            lineStyle: {
                normal: {
                    width: 2,
                    type: 'solid',
                    color: '#ff7f50'
                }
            },
            markPoint: {
                symbol: 'pin',
                symbolSize: 50,
                label: {
                    normal: {
                        formatter: '北京',
                        position: 'top'
                    }
                }
            }
        }, {
            name: '上海',
            value: 200,
            lineStyle: {
                normal: {
                    width: 2,
                    type: 'solid',
                    color: '#ff7f50'
                }
            },
            markPoint: {
                symbol: 'pin',
                symbolSize: 50,
                label: {
                    normal: {
                        formatter: '上海',
                        position: 'top'
                    }
                }
            }
        }]
    }]
};

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

案例六：地图上的柱状图

在地图上绘制柱状图，可以通过设置series的type为’stack’来实现。以下是一个在地图上绘制柱状图的示例代码：

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

// 初始化echarts实例
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,
            itemStyle: {
                color: '#ff7f50'
            }
        }, {
            name: '上海',
            value: 200,
            itemStyle: {
                color: '#ff7f50'
            }
        }]
    }]
};

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

案例七：地图上的气泡图

在地图上绘制气泡图，可以通过设置series的type为’effectScatter’来实现。以下是一个在地图上绘制气泡图的示例代码：

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

// 初始化echarts实例
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,
            symbolSize: 50,
            itemStyle: {
                color: '#ff7f50'
            }
        }, {
            name: '上海',
            value: 200,
            symbolSize: 50,
            itemStyle: {
                color: '#ff7f50'
            }
        }]
    }]
};

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

案例八：地图上的雷达图

在地图上绘制雷达图，可以通过设置series的type为’radar’来实现。以下是一个在地图上绘制雷达图的示例代码：

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

// 初始化echarts实例
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: [10, 20, 30, 40, 50]
        }, {
            name: '上海',
            value: [20, 30, 40, 50, 60]
        }]
    }]
};

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

案例九：地图上的饼图

在地图上绘制饼图，可以通过设置series的type为’pie’来实现。以下是一个在地图上绘制饼图的示例代码：

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

// 初始化echarts实例
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,
            itemStyle: {
                color: '#ff7f50'
            }
        }, {
            name: '上海',
            value: 200,
            itemStyle: {
                color: '#ff7f50'
            }
        }]
    }]
};

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

案例十：地图上的组合图表

在地图上绘制组合图表，可以通过设置series的type为’line’、’bar’、’scatter’等来实现。以下是一个在地图上绘制组合图表的示例代码：

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

// 初始化echarts实例
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,
            itemStyle: {
                color: '#ff7f50'
            }
        }, {
            name: '上海',
            value: 200,
            itemStyle: {
                color: '#ff7f50'
            }
        }]
    }, {
        name: '北京',
        type: 'line',
        coordinateSystem: 'geo',
        data: [[116.46, 39.92], [116.46, 39.92]]
    }, {
        name: '上海',
        type: 'bar',
        coordinateSystem: 'geo',
        data: [[121.47, 31.23], [121.47, 31.23]]
    }, {
        name: '深圳',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [[114.05, 22.52], [114.05, 22.52]]
    }]
};

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

以上是10个echarts地图图表的实用案例，希望对你有所帮助。在实际应用中，可以根据需求调整图表样式和数据，以实现更好的视觉效果和交互体验。