新手必看！轻松上手echarts地图图表，30个实用案例详解，让你快速掌握数据可视化技巧

在数据可视化的世界里，ECharts 地图图表无疑是一个强大的工具。它可以帮助我们轻松地将地理数据转化为直观的视觉图表，让复杂的数据变得易于理解和分析。对于新手来说，掌握 ECharts 地图图表的技巧可能看似复杂，但只要掌握了正确的方法，一切都会变得简单。本文将为你详细介绍 30 个实用案例，帮助你快速上手 ECharts 地图图表，掌握数据可视化技巧。

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

首先，我们从最基础的地图展示开始。通过 ECharts 地图图表，我们可以轻松展示中国地图，并添加一些基本的标注。

// 基于准备好的dom，初始化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: Math.round(Math.random() * 1000)},
                // ... 其他省份数据
            ]
        }
    ]
};

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

案例二：世界地图展示

除了中国地图，ECharts 也支持世界地图的展示。以下是一个简单的世界地图案例。

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

var option = {
    title: {
        text: '世界地图展示'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b} <br/>{c} (人口)'
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            roam: true,
            label: {
                show: true
            },
            data: [
                {name: 'Afghanistan', value: 438},
                // ... 其他国家数据
            ]
        }
    ]
};

myChart.setOption(option);

案例三：地图上的热力图

热力图是地图上常用的一种展示方式，可以用来表示数据的密集程度。以下是一个在地图上添加热力图的案例。

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: 'heatmap',
            data: [
                {name: '北京', value: [116.46,39.92,100]},
                // ... 其他数据
            ]
        }
    ]
};

myChart.setOption(option);

案例四：地图上的折线图

在地图上添加折线图，可以用来展示数据的变化趋势。以下是一个在地图上添加折线图的案例。

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

var option = {
    title: {
        text: '地图上的折线图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    xAxis: {
        type: 'category',
        data: ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都', '重庆', '天津']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '销量',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70]
        }
    ]
};

myChart.setOption(option);

案例五：地图上的散点图

散点图是另一种常用的地图数据展示方式。以下是一个在地图上添加散点图的案例。

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

var option = {
    title: {
        text: '地图上的散点图'
    },
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '散点图',
            type: 'scatter',
            data: [
                [10.0, 8.04],
                [8.0, 6.95],
                // ... 其他数据
            ]
        }
    ]
};

myChart.setOption(option);

案例六：地图上的柱状图

柱状图可以用来展示数据的数量对比。以下是一个在地图上添加柱状图的案例。

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

var option = {
    title: {
        text: '地图上的柱状图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    xAxis: {
        type: 'category',
        data: ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都', '重庆', '天津']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
        }
    ]
};

myChart.setOption(option);

案例七：地图上的环形图

环形图可以用来展示数据的占比。以下是一个在地图上添加环形图的案例。

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

var option = {
    title: {
        text: '地图上的环形图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                // ... 其他数据
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

myChart.setOption(option);

案例八：地图上的雷达图

雷达图可以用来展示数据的多个维度。以下是一个在地图上添加雷达图的案例。

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

var option = {
    title: {
        text: '地图上的雷达图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
    },
    radar: {
        indicator: [
            {name: '销售（sales）', max: 6500},
            {name: '管理（administration）', max: 16000},
            {name: '信息技术（information tech）', max: 30000},
            {name: '客服（customer support）', max: 38000},
            {name: '研发（research & development）', max: 52000},
            {name: '市场（marketing）', max: 25000}
        ]
    },
    series: [
        {
            name: '预算 vs 开销',
            type: 'radar',
            data: [
                {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: '预算分配（Allocated Budget）'
                },
                {
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: '实际开销（Actual Spending）'
                }
            ]
        }
    ]
};

myChart.setOption(option);

案例九：地图上的漏斗图

漏斗图可以用来展示数据的筛选过程。以下是一个在地图上添加漏斗图的案例。

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

var option = {
    title: {
        text: '地图上的漏斗图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}%'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['产品A', '产品B', '产品C', '产品D']
    },
    series: [
        {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 0,
            width: '80%',
            sort: 'descending',
            label: {
                position: 'left'
            },
            data: [
                {value: 60, name: '产品A'},
                {value: 40, name: '产品B'},
                {value: 20, name: '产品C'},
                {value: 80, name: '产品D'}
            ]
        }
    ]
};

myChart.setOption(option);

案例十：地图上的词云图

词云图可以用来展示数据的词频。以下是一个在地图上添加词云图的案例。

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

var option = {
    title: {
        text: '地图上的词云图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '词云图',
            type: 'wordCloud',
            data: [
                {value: 'A', itemStyle: {color: '#f00'}},
                {value: 'B', itemStyle: {color: '#0f0'}},
                // ... 其他数据
            ]
        }
    ]
};

myChart.setOption(option);

案例十一：地图上的树状图

树状图可以用来展示数据的层级关系。以下是一个在地图上添加树状图的案例。

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

var option = {
    title: {
        text: '地图上的树状图'
    },
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    series: [
        {
            type: 'tree',
            data: [
                {
                    name: 'root',
                    itemStyle: {
                        color: '#ff7f50'
                    },
                    children: [
                        {
                            name: 'child1',
                            itemStyle: {
                                color: '#87cefa'
                            },
                            children: [
                                {
                                    name: 'grandchild1',
                                    itemStyle: {
                                        color: '#da70d6'
                                    }
                                },
                                {
                                    name: 'grandchild2',
                                    itemStyle: {
                                        color: '#32cd32'
                                    }
                                }
                            ]
                        },
                        {
                            name: 'child2',
                            itemStyle: {
                                color: '#6495ed'
                            }
                        }
                    ]
                }
            ],
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbolSize: 7,
            label: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 9
            },
            leaves: {
                label: {
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                }
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
        }
    ]
};

myChart.setOption(option);

案例十二：地图上的桑基图

桑基图可以用来展示数据的流动关系。以下是一个在地图上添加桑基图的案例。

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

var option = {
    title: {
        text: '地图上的桑基图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    series: [
        {
            type: 'sankey',
            layout: 'none',
            data: [
                {name: 'A'},
                {name: 'B'},
                {name: 'C'},
                {name: 'D'},
                {name: 'E'}
            ],
            links: [
                {source: 'A', target: 'B', value: 10},
                {source: 'A', target: 'C', value: 20},
                {source: 'B', target: 'C', value: 30},
                {source: 'B', target: 'D', value: 40},
                {source: 'C', target: 'E', value: 50}
            ],
            lineStyle: {
                curveness: 0.6
            }
        }
    ]
};

myChart.setOption(option);

案例十三：地图上的力导向图

力导向图可以用来展示数据的网络关系。以下是一个在地图上添加力导向图的案例。

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

var option = {
    title: {
        text: '地图上的力导向图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
    },
    series: [
        {
            type: 'force',
            layout: 'circular',
            symbolSize: 45,
            nodes: [
                {name: '节点1'},
                {name: '节点2'},
                {name: '节点3'},
                {name: '节点4'},
                {name: '节点5'}
            ],
            links: [
                {source: '节点1', target: '节点2', weight: 1},
                {source: '节点1', target: '节点3', weight: 1},
                {source: '节点2', target: '节点4', weight: 1},
                {source: '节点2', target: '节点5', weight: 1},
                {source: '节点3', target: '节点4', weight: 1},
                {source: '节点3', target: '节点5', weight: 1},
                {source: '节点4', target: '节点5', weight: 1}
            ],
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                fontSize: 10
            }
        }
    ]
};

myChart.setOption(option);

案例十四：地图上的水球图

水球图可以用来展示数据的占比。以下是一个在地图上添加水球图的案例。

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

var option = {
    title: {
        text: '地图上的水球图'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}%'
    },
    series: [
        {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
                show: false
            },
            progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                    color: '#f00'
                }
            },
            axisLine: {
                lineStyle: {
                    color: [
                        [0.2, '#f00'],
                        [0.8, '#0f0'],
                        [1, '#00f']
                    ]
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            anchor: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}%',
                color: '#333'
            },
            data: [
                {value: 50}
            ]
        }
    ]
};

myChart.setOption(option);

案例十五：地图上的仪表盘图

仪表盘图可以用来展示数据的实时变化。以下是一个在地图上添加仪表盘图的案例。

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

var option = {

title: {
    text: '地图上的仪表盘图'
},
tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c}'
},
series: [
    {
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        pointer: {
            show: false
        },
        progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
                color: '#f00'
            }
        },
        axisLine: {
            lineStyle: {
                color: [
                    [0.2, '#f00'],
                    [0.8, '#0f0'],
                    [1, '#00f']
                ]
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        anchor: {
            show: false
        },
        title: {
            show: false
        },
        detail: {
            valueAnimation: true,
            formatter: '{value}℃',
            color: '#333'
        },
        data: [
            {value: 25}
        ]
    }
]

};

my