教你轻松制作echarts地图图表：30个实用案例解析，轻松上手！

ECharts 是一款功能强大的可视化库，它可以帮助开发者轻松创建各种图表，包括地图图表。地图图表是一种非常直观的数据展示方式，可以用来展示地理位置分布、区域对比等信息。下面，我将通过30个实用案例，带你轻松上手制作 ECharts 地图图表。

案例一：中国地图基本展示

首先，我们从一个简单的中国地图展示开始。通过 ECharts 的 echarts/map/js/china.js 地图数据，我们可以轻松实现。

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: Math.round(Math.random() * 1000)
        }]
    }]
};

myChart.setOption(option);

案例二：世界地图展示

世界地图的展示与国内地图类似，只需要将 mapType 属性改为 'world' 即可。

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: Math.round(Math.random() * 1000)
        }]
    }]
};

myChart.setOption(option);

案例三：省份地图展示

省份地图的展示需要使用到省份的地图数据，可以通过 ECharts 的 echarts/map/js/province.js 获取。

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

var option = {
    title: {
        text: '省份地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '省份',
        type: 'map',
        mapType: 'province',
        label: {
            show: true
        },
        data: [{
            name: '广东省',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};

myChart.setOption(option);

案例四：自定义地图展示

自定义地图需要使用到自定义的地图数据，可以通过 ECharts 的 echarts/map/js/custom.js 获取。

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

var option = {
    title: {
        text: '自定义地图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '自定义',
        type: 'map',
        mapType: 'custom',
        label: {
            show: true
        },
        data: [{
            name: '自定义区域',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};

myChart.setOption(option);

案例五：地图热力图展示

热力图可以用来展示地图上某个区域的热度分布，通过 heatmap 属性实现。

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: Math.round(Math.random() * 1000)
        }],
        heatmap: {
            data: [
                {name: '北京', value: 100},
                {name: '上海', value: 50},
                {name: '广州', value: 80}
            ]
        }
    }]
};

myChart.setOption(option);

案例六：地图散点图展示

散点图可以用来展示地图上某个区域的点状分布，通过 scatter 属性实现。

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: Math.round(Math.random() * 1000)
        }],
        scatter: {
            data: [
                {name: '北京', value: [116.46, 39.92]},
                {name: '上海', value: [121.47, 31.23]},
                {name: '广州', value: [113.23, 23.16]}
            ]
        }
    }]
};

myChart.setOption(option);

案例七：地图多维度数据展示

多维度数据展示可以通过 dimensions 属性实现，展示多个维度的数据。

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: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
        }],
        dimensions: ['维度1', '维度2']
    }]
};

myChart.setOption(option);

案例八：地图堆叠图展示

堆叠图可以用来展示地图上某个区域的数据堆积效果，通过 stack 属性实现。

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: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
        }],
        stack: '总量'
    }]
};

myChart.setOption(option);

案例九：地图动态效果展示

动态效果可以通过 animation 属性实现，让地图的展示更加生动。

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: Math.round(Math.random() * 1000)
        }],
        animation: true
    }]
};

myChart.setOption(option);

案例十：地图缩放和旋转效果展示

缩放和旋转效果可以通过 roam 和 rotation 属性实现，让用户可以自由地缩放和旋转地图。

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: Math.round(Math.random() * 1000)
        }],
        roam: true,
        rotation: true
    }]
};

myChart.setOption(option);

案例十一：地图点击事件展示

点击事件可以通过 click 属性实现，当用户点击地图上的某个区域时，可以触发相应的事件。

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: Math.round(Math.random() * 1000)
        }],
        click: function (params) {
            console.log(params.name + '被点击了！');
        }
    }]
};

myChart.setOption(option);

案例十二：地图拖拽效果展示

拖拽效果可以通过 draggable 属性实现，让用户可以自由地拖拽地图。

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: Math.round(Math.random() * 1000)
        }],
        draggable: true
    }]
};

myChart.setOption(option);

案例十三：地图自定义颜色展示

自定义颜色可以通过 itemStyle 属性实现，让地图的颜色更加符合需求。

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: Math.round(Math.random() * 1000)
        }],
        itemStyle: {
            color: '#ff7f50'
        }
    }]
};

myChart.setOption(option);

案例十四：地图文本样式展示

文本样式可以通过 label 属性实现，让地图上的文本更加美观。

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

var option = {
    title: {
        text: '地图文本样式展示'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        name: '文本样式',
        type: 'map',
        mapType: 'china',
        label: {
            show: true,
            formatter: '{b}: {c}'
        },
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};

myChart.setOption(option);

案例十五：地图阴影效果展示

阴影效果可以通过 shadowBlur 和 shadowOffset 属性实现，让地图更加立体。

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: Math.round(Math.random() * 1000)
        }],
        itemStyle: {
            shadowBlur: 10,
            shadowOffset: [0, 0],
            shadowColor: 'rgba(120, 36, 50, 0.5)'
        }
    }]
};

myChart.setOption(option);

案例十六：地图渐变效果展示

渐变效果可以通过 color 属性实现，让地图的颜色更加丰富。

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: Math.round(Math.random() * 1000)
        }],
        itemStyle: {
            color: [
                '#323c48',
                '#323c48',
                '#323c48',
                '#323c48',
                '#323c48'
            ]
        }
    }]
};

myChart.setOption(option);

案例十七：地图多级数据展示

多级数据展示可以通过 levels 属性实现，展示多个级别的数据。

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: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
        }],
        levels: [
            {
                max: 1000,
                itemStyle: {
                    color: '#323c48'
                }
            },
            {
                max: 5000,
                itemStyle: {
                    color: '#323c48'
                }
            },
            {
                max: 10000,
                itemStyle: {
                    color: '#323c48'
                }
            }
        ]
    }]
};

myChart.setOption(option);

案例十八：地图区域对比展示

区域对比展示可以通过 visualMap 属性实现，展示不同区域的对比效果。

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

var option = {
    title: {
        text: '地图区域对比展示'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 10000,
        calculable: true,
        seriesIndex: 0,
        inRange: {
            color: ['#323c48', '#323c48', '#323c48', '#323c48', '#323c48']
        }
    },
    series: [{
        name: '区域对比',
        type: 'map',
        mapType: 'china',
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: Math.round(Math.random() * 1000)
        }]
    }]
};

myChart.setOption(option);

案例十九：地图区域联动展示

区域联动展示可以通过 links 属性实现，展示不同区域之间的联动效果。

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: Math.round(Math.random() * 1000)
        }],
        links: [
            {
                source: '北京',
                target: '上海',
                lineStyle: {
                    color: '#ff7f50'
                }
            },
            {
                source: '北京',
                target: '广州',
                lineStyle: {
                    color: '#ff7f50'
                }
            }
        ]
    }]
};

myChart.setOption(option);

案例二十：地图区域缩放展示

区域缩放展示可以通过 zoom 属性实现，展示地图的缩放效果。

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: Math.round(Math.random() * 1000)
        }],
        zoom: true
    }]
};

myChart.setOption(option);

案例二十一：地图区域拖拽展示

区域拖拽展示可以通过 drag 属性实现，展示地图区域的拖拽效果。

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: Math.round(Math.random() * 1000)
        }],
        drag: true
    }]
};

myChart.setOption(option);

案例二十二：地图区域点击展示

区域点击展示可以通过 click 属性实现，展示地图区域的点击效果。

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: Math.round(Math.random() * 1000)
        }],
        click: function (params) {
            console.log(params.name + '被点击了！');
        }
    }]
};

myChart.setOption(option);

案例二十三：地图区域拖拽缩放展示

区域拖拽缩放展示可以通过 roam 属性实现，展示地图区域的拖拽和缩放效果。

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

var option = {

title: {
    text: '地图区域拖拽缩放展示'
},
tooltip: {
    trigger: 'item'
},
series: [{

正文

教你轻松制作echarts地图图表：30个实用案例解析，轻松上手！

案例一：中国地图基本展示

案例二：世界地图展示

案例三：省份地图展示

案例四：自定义地图展示

案例五：地图热力图展示

案例六：地图散点图展示

案例七：地图多维度数据展示

案例八：地图堆叠图展示

案例九：地图动态效果展示

案例十：地图缩放和旋转效果展示

案例十一：地图点击事件展示

案例十二：地图拖拽效果展示

案例十三：地图自定义颜色展示

案例十四：地图文本样式展示

案例十五：地图阴影效果展示

案例十六：地图渐变效果展示

案例十七：地图多级数据展示

案例十八：地图区域对比展示

案例十九：地图区域联动展示

案例二十：地图区域缩放展示

案例二十一：地图区域拖拽展示

案例二十二：地图区域点击展示

案例二十三：地图区域拖拽缩放展示

相关阅读

揭秘 TensorFlow 在不同领域的实际应用，从图像识别到自然语言处理，带你了解深度学习的神奇力量

从小白到高手：如何用 almaLinux 驱动你的第一个开源项目实践

掌握最新技术：AlmaLinux行业应用案例深度解析，解锁企业转型密码

掌握MySQL数据恢复技巧，案例分析教你轻松应对数据丢失危机

孩子如何在家轻松提升身体素质？家长必看实用方法大揭秘

揭秘企业如何用MongoDB轻松应对海量数据挑战：实战案例解析与优化策略

速腾车主必看：中央扶手改造前后对比，安全升级攻略详解

汽车中控台改造：速腾车主分享个性化升级全过程

揭秘速腾车主如何轻松升级中网，变身时尚潮流座驾

揭秘速腾车主如何轻松改色前大灯，安全美观两不误