正文

新手必学：轻松掌握ECharts地图图表，实战案例全解析

/0 浏览量
1018

ECharts 是一款使用 JavaScript 实现的开源可视化库，它可以帮助用户轻松地创建交互式图表。其中，地图图表是 ECharts 中非常受欢迎的一个功能，因为它能够将数据直观地展示在地图上，让用户一目了然。对于新手来说，掌握 ECharts 地图图表的绘制方法并不难，本文将带领大家从基础到实战，一步步轻松掌握 ECharts 地图图表。

一、ECharts 地图图表的基本概念

1. 地图数据

地图数据是绘制地图图表的基础，它包含了地图上各个地区的经纬度信息、边界信息等。ECharts 支持多种地图数据格式，如 GeoJSON、GEOGJSON、TopoJSON 等。

2. 地图系列

地图系列是 ECharts 地图图表的核心，它包含了地图上的各种数据元素，如点、线、面等。地图系列可以通过 series 属性进行配置。

3. 地图配置

地图配置包括地图的视图、样式、交互等。通过 visualMap、geo、series 等属性，可以实现对地图图表的个性化设置。

二、ECharts 地图图表绘制步骤

1. 引入 ECharts 和地图数据

在 HTML 文件中引入 ECharts 库和地图数据。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 地图图表示例</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <!-- 引入地图数据 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            // ...（此处省略配置项）
        };

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

2. 配置地图系列

在 series 属性中，配置地图系列。以下是一个简单的示例：

series: [
    {
        name: '销量',
        type: 'map',
        mapType: 'china',
        data: [
            {name: '北京', value: 200},
            {name: '上海', value: 150},
            {name: '广东', value: 300}
        ]
    }
]

3. 配置地图视图

通过 geo 属性，可以设置地图的视图。以下是一个简单的示例：

geo: {
    map: 'china',
    roam: true, // 是否开启鼠标缩放和平移
    label: {
        show: false
    },
    itemStyle: {
        areaColor: '#323c48',
        borderColor: '#111'
    }
}

4. 配置地图交互

通过 visualMap 属性，可以设置地图的交互效果。以下是一个简单的示例：

visualMap: {
    type: 'continuous',
    min: 0,
    max: 400,
    left: 'left',
    top: 'bottom',
    text: ['高','低'], // 文本，默认为数值文本
    calculable: true
}

三、实战案例：绘制中国地图销量图表

以下是一个使用 ECharts 地图图表绘制中国地图销量图表的实战案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 中国地图销量图表</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <!-- 引入地图数据 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/map/js/china.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '中国地图销量图表',
                subtext: '数据来源于某电商平台',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                type: 'continuous',
                min: 0,
                max: 500,
                left: 'left',
                top: 'bottom',
                text: ['高','低'], // 文本，默认为数值文本
                calculable: true
            },
            geo: {
                map: 'china',
                roam: true,
                label: {
                    show: false
                },
                itemStyle: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                }
            },
            series: [
                {
                    name: '销量',
                    type: 'map',
                    mapType: 'china',
                    data: [
                        {name: '北京', value: 200},
                        {name: '上海', value: 150},
                        {name: '广东', value: 300}
                    ]
                }
            ]
        };

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

通过以上步骤，您可以轻松地绘制出中国地图销量图表。在实际应用中，可以根据需求添加更多数据、交互效果等，让地图图表更加丰富多彩。

四、总结

ECharts 地图图表功能丰富，操作简单，非常适合新手学习和使用。通过本文的介绍，相信您已经对 ECharts 地图图表有了初步的了解。在实际应用中，不断尝试和实践，相信您会越来越熟练地使用 ECharts 地图图表，为您的数据可视化之路添砖加瓦。

-- 展开阅读全文 --