正文

教你用 ECharts 快速制作地图图表：10个实用案例，轻松入门！

/0 浏览量
0608

ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助我们轻松创建交互式图表，包括地图图表。地图图表在数据分析、地理信息可视化等领域有着广泛的应用。本篇文章将为你介绍如何使用 ECharts 制作地图图表，并提供10个实用案例，帮助你轻松入门。

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

在 ECharts 中，地图图表主要通过 echarts.map 类型实现。以下是一些基本概念：

  • Geo 组件：ECharts 地图图表的核心组件，用于绘制地图。
  • MapType：地图类型，支持中国地图、世界地图、自定义地图等。
  • Series：图表系列，用于定义图表中的各个数据系列。
  • Data：图表数据，用于填充到图表中的各个系列。

二、ECharts 地图图表的制作步骤

  1. 引入 ECharts 和地图数据：在 HTML 文件中引入 ECharts 库，并引入对应的地图数据文件。
  2. 初始化 ECharts 实例：创建一个 ECharts 实例，并设置其容器。
  3. 配置 Geo 组件：设置地图类型、中心点、缩放级别等属性。
  4. 配置 Series：配置图表系列，包括数据、图表类型、视觉映射等。
  5. 使用 ECharts 方法：使用 ECharts 提供的方法，如 setOption，来渲染图表。

三、10个实用案例

案例一：中国地图

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

案例二：世界地图

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

var option = {
    geo: {
        map: 'world'
    },
    series: [{
        type: 'map',
        mapType: 'world',
        data: [{
            name: 'China',
            value: 100
        }]
    }]
};

myChart.setOption(option);

案例三：自定义地图

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

var option = {
    geo: {
        map: 'custom',
        // 自定义地图的配置
    },
    series: [{
        type: 'map',
        mapType: 'custom',
        data: [{
            name: '北京',
            value: 100
        }]
    }]
};

myChart.setOption(option);

案例四：地图上显示点

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: [{
            name: '北京',
            value: [116.46, 39.92, 100]
        }]
    }]
};

myChart.setOption(option);

案例五：地图上显示线

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'lines',
        coordinateSystem: 'geo',
        data: [{
            name: 'line',
            coords: [[116.46, 39.92], [121.47, 31.23]]
        }]
    }]
};

myChart.setOption(option);

案例六：地图上显示面

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'map',
        mapType: 'china',
        data: [{
            name: '北京',
            itemStyle: {
                areaColor: '#FF6347'
            }
        }]
    }]
};

myChart.setOption(option);

案例七：地图上显示热力图

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [[116.46, 39.92, 100]]
    }]
};

myChart.setOption(option);

案例八：地图上显示雷达图

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'radar',
        coordinateSystem: 'geo',
        data: [[
            {value: [100, 100, 100, 100, 100, 100]}
        ]]
    }]
};

myChart.setOption(option);

案例九：地图上显示散点图

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [[116.46, 39.92, 100]]
    }]
};

myChart.setOption(option);

案例十：地图上显示饼图

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

var option = {
    geo: {
        map: 'china'
    },
    series: [{
        type: 'pie',
        coordinateSystem: 'geo',
        data: [[
            {name: '北京', value: 100}
        ]]
    }]
};

myChart.setOption(option);

四、总结

通过以上10个案例，相信你已经对 ECharts 地图图表的制作有了初步的了解。在实际应用中，你可以根据自己的需求，灵活运用 ECharts 提供的各种组件和配置，制作出丰富多彩的地图图表。希望这篇文章能帮助你快速入门 ECharts 地图图表制作。

-- 展开阅读全文 --