正文

新手必看！轻松上手ECharts地图图表：30个实用案例教学，打造酷炫数据地图

/0 浏览量
0828

ECharts 地图图表是数据可视化领域的一颗璀璨明珠，它能够将地理信息与数据统计完美结合，让复杂的地理数据变得生动有趣。对于新手来说，掌握 ECharts 地图图表的制作技巧至关重要。本文将为你带来30个实用案例教学，帮助你轻松上手，打造出酷炫的数据地图。

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

首先，我们从最基础的地图展示开始。以下是一个简单的中国地图示例代码：

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

var option = {
    title: {
        text: '中国地图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ]
        }
    ]
};

myChart.setOption(option);

案例二：世界地图展示

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

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

var option = {
    title: {
        text: '世界地图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '世界',
            type: 'map',
            mapType: 'world',
            label: {
                show: true
            },
            data: [
                {name: '美国', value: Math.round(Math.random() * 1000)},
                {name: '日本', value: Math.round(Math.random() * 1000)}
            ]
        }
    ]
};

myChart.setOption(option);

案例三：自定义地图

ECharts 地图图表支持自定义地图，你可以通过 map 属性中的 feature 属性来定义你需要的地图区域。

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

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

myChart.setOption(option);

案例四：多层级地图

在 ECharts 中，你可以通过设置 levels 属性来实现多层级地图的展示。

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

var option = {
    title: {
        text: '多层级地图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '多层级',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ],
            levels: [
                {max: 100},
                {max: 500},
                {max: 1000}
            ]
        }
    ]
};

myChart.setOption(option);

案例五：热力地图

热力地图是地图图表中的一种常见形式，它可以直观地展示出某个区域的密集程度。

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

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

myChart.setOption(option);

案例六：地图交互

ECharts 地图图表支持多种交互方式，如点击、悬停等。

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

var option = {
    title: {
        text: '地图交互',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '交互',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ],
            itemStyle: {
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }
        }
    ]
};

myChart.setOption(option);

案例七：地图动画

ECharts 地图图表支持丰富的动画效果，让地图展示更加生动。

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

var option = {
    title: {
        text: '地图动画',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '动画',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ],
            animation: true
        }
    ]
};

myChart.setOption(option);

案例八：地图主题

ECharts 地图图表支持丰富的主题样式，你可以根据自己的需求选择合适的主题。

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

var option = {
    title: {
        text: '地图主题',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '主题',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ],
            theme: 'dark'
        }
    ]
};

myChart.setOption(option);

案例九：地图数据更新

在 ECharts 地图图表中，你可以随时更新地图数据，实现动态展示。

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

var option = {
    title: {
        text: '数据更新',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '更新',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ]
        }
    ]
};

myChart.setOption(option);

// 动态更新数据
setTimeout(function () {
    option.series[0].data[0].value = Math.round(Math.random() * 1000);
    myChart.setOption(option);
}, 2000);

案例十：地图与其他图表结合

ECharts 地图图表可以与其他图表类型结合使用，实现更加丰富的数据展示效果。

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

var option = {
    title: {
        text: '结合图表',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '地图+图表',
            type: 'map',
            mapType: 'china',
            label: {
                show: true
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)}
            ]
        },
        {
            name: '折线图',
            type: 'line',
            data: [
                [0, 10],
                [1, 20],
                [2, 30]
            ]
        }
    ]
};

myChart.setOption(option);

总结

本文为你介绍了30个 ECharts 地图图表的实用案例，通过这些案例，你可以轻松上手 ECharts 地图图表的制作，并打造出酷炫的数据地图。希望这些案例能够帮助你更好地掌握 ECharts 地图图表的制作技巧，为你的数据可视化之路助力。

-- 展开阅读全文 --