案例

教你轻松制作echarts地图图表：30个实用案例解析与技巧

2026-11-14 0 阅读

案例一：中国省市区级地图

技巧解析

  1. 数据准备：使用ECharts提供的echarts/map/js/china.js，该文件包含了中国的省市区级地图数据。
  2. 初始化地图：在ECharts实例中设置地图类型为'map'，并指定地图类型为'china'。
  3. 自定义视觉映射：通过visualMap组件对地图上的数据进行可视化映射。

代码示例

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

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

myChart.setOption(option);

案例二：世界地图

技巧解析

  1. 数据准备：使用ECharts提供的echarts/map/js/world.js。
  2. 初始化地图：设置地图类型为'map'，并指定地图类型为'world'。
  3. 自定义地图样式：通过itemStyle自定义地图的样式。

代码示例

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

var option = {
    title: {
        text: '世界地图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    series: [{
        name: '世界',
        type: 'map',
        mapType: 'world',
        roam: true,
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        data: [
            {name: 'Afghanistan',value: Math.round(Math.random() * 1000)},
            {name: 'Albania',value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例三：自定义地图

技巧解析

  1. 数据准备：自定义地图数据，可以使用GeoJSON格式。
  2. 初始化地图：设置地图类型为'map'，并指定自定义地图类型。
  3. 处理自定义地图数据：使用geo组件的map属性加载自定义地图数据。

代码示例

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

var option = {
    title: {
        text: '自定义地图'
    },
    tooltip: {
        trigger: 'item'
    },
    geo: {
        map: '自定义地图名称',
        roam: true,
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '自定义地图',
        type: 'map',
        mapType: '自定义地图名称',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例四：多层级地图

技巧解析

  1. 数据准备：使用嵌套的GeoJSON数据。
  2. 初始化地图：设置地图类型为'map'，并指定嵌套地图类型。
  3. 处理嵌套地图数据：使用geo组件的map属性加载嵌套地图数据。

代码示例

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

var option = {
    title: {
        text: '多层级地图'
    },
    tooltip: {
        trigger: 'item'
    },
    geo: {
        map: '嵌套地图名称',
        roam: true,
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '多层级地图',
        type: 'map',
        mapType: '嵌套地图名称',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例五：地图与折线图结合

技巧解析

  1. 数据准备：准备地图数据和折线图数据。
  2. 初始化地图：设置地图类型为'map'，并指定地图类型。
  3. 添加折线图：使用series组件添加折线图。

代码示例

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

var option = {
    title: {
        text: '地图与折线图结合'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: '地图名称',
        roam: true,
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '地图',
        type: 'map',
        mapType: '地图名称',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }, {
        name: '折线图',
        type: 'line',
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

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

技巧解析

  1. 数据准备：准备地图数据和散点图数据。
  2. 初始化地图：设置地图类型为'map'，并指定地图类型。
  3. 添加散点图：使用series组件添加散点图。

代码示例

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

var option = {
    title: {
        text: '地图与散点图结合'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: '地图名称',
        roam: true,
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '地图',
        type: 'map',
        mapType: '地图名称',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }, {
        name: '散点图',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [
            {name: '区域1',value: [经度, 纬度]},
            {name: '区域2',value: [经度, 纬度]}
        ]
    }]
};

myChart.setOption(option);

案例七：地图与柱状图结合

技巧解析

  1. 数据准备：准备地图数据和柱状图数据。
  2. 初始化地图：设置地图类型为'map'，并指定地图类型。
  3. 添加柱状图：使用series组件添加柱状图。

代码示例

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

var option = {
    title: {
        text: '地图与柱状图结合'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: '地图名称',
        roam: true,
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '地图',
        type: 'map',
        mapType: '地图名称',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }, {
        name: '柱状图',
        type: 'bar',
        coordinateSystem: 'geo',
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例八：地图与饼图结合

技巧解析

  1. 数据准备：准备地图数据和饼图数据。
  2. 初始化地图：设置地图类型为'map'，并指定地图类型。
  3. 添加饼图：使用series组件添加饼图。

代码示例

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

var option = {
    title: {
        text: '地图与饼图结合'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: '地图名称',
        roam: true,
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '地图',
        type: 'map',
        mapType: '地图名称',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }, {
        name: '饼图',
        type: 'pie',
        coordinateSystem: 'geo',
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例九：地图与雷达图结合

技巧解析

  1. 数据准备：准备地图数据和雷达图数据。
  2. 初始化地图：设置地图类型为'map'，并指定地图类型。
  3. 添加雷达图：使用series组件添加雷达图。

代码示例

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

var option = {
    title: {
        text: '地图与雷达图结合'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: '地图名称',
        roam: true,
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '地图',
        type: 'map',
        mapType: '地图名称',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }, {
        name: '雷达图',
        type: 'radar',
        coordinateSystem: 'geo',
        data: [
            {name: '区域1',value: [值1, 值2, 值3]},
            {name: '区域2',value: [值1, 值2, 值3]}
        ]
    }]
};

myChart.setOption(option);

案例十：地图与漏斗图结合

技巧解析

  1. 数据准备：准备地图数据和漏斗图数据。
  2. 初始化地图：设置地图类型为'map'，并指定地图类型。
  3. 添加漏斗图：使用series组件添加漏斗图。

代码示例

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

var option = {
    title: {
        text: '地图与漏斗图结合'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],
        calculable: true
    },
    geo: {
        map: '地图名称',
        roam: true,
        label: {
            show: true
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '地图',
        type: 'map',
        mapType: '地图名称',
        roam: true,
        label: {
            show: true
        },
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }, {
        name: '漏斗图',
        type: 'funnel',
        coordinateSystem: 'geo',
        data: [
            {name: '区域1',value: Math.round(Math.random() * 1000)},
            {name: '区域2',value: Math.round(Math.random() * 1000)}
        ]
    }]
};

myChart.setOption(option);

案例十一：地图与仪表盘结合

技巧解析

  1. 数据准备：准备地图数据和仪表盘数据。
  2. 初始化地图：设置地图类型为'map'，并指定地图类型。
  3. 添加仪表盘：使用series组件添加仪表盘。

代码示例

”`javascript var myChart = echarts.init(document.getElementById(‘main’));

var option = {

title: {
    text: '地图与仪表盘结合'
},
tooltip: {
    trigger: 'item'
},
visualMap: {
    min: 0,
    max: 1000,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],
    calculable: true
},
geo: {
    map: '地图名称',
    roam: true,
    label: {
        show: true
    },
    itemStyle: {
        normal: {
            areaColor: '#323c48',
            borderColor: '#111'
        },
        emphasis: {
            areaColor: '#2a333d'
        }
    }
},
series: [{
    name: '地图',
    type: 'map',
    mapType: '地图名称',
    roam: true,
    label: {
        show: true
    },
    data: [
        {name: '区域1',value: Math.round(Math.random() * 1000)},
        {name: '区域2',value: Math.round(Math.random() * 1000)}
    ]
}, {
分享到：
上一篇 基层管理沟通：化解冲突，提升团队效率的实用案例解析
下一篇 从小区停车费到社区环保行动：基层统计分析如何助力解决实际问题

相关文章

基层管理沟通：化解冲突，提升团队效率的实用案例解析
2026-11-14
揭秘中国景区常见骗局，游客如何防范？这些案例你一定要知道
2026-11-14
从小区停车费到社区环保行动：基层统计分析如何助力解决实际问题
2026-11-14
揭秘基层治理难题，学习实用典型案例解析
2026-11-14