正文

从北京到纽约，带你轻松入门echarts地图图表制作实战案例

/0 浏览量
0512

在信息化的今天，地图图表作为一种直观的信息展示方式，越来越受到人们的青睐。ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括地图图表。本文将带你从零开始，通过一个从北京到纽约的实战案例，轻松入门 ECharts 地图图表制作。

准备工作

在开始之前，请确保你的开发环境中已经安装了 Node.js 和 npm。以下是制作地图图表所需的基本步骤：

  1. 安装 ECharts：在命令行中运行 npm install echarts 命令。
  2. 引入 ECharts：在你的 HTML 文件中引入 ECharts 的 JS 文件。
  3. 准备地图数据：获取北京和纽约的地图数据。

步骤一：创建基本的地图图表

1.1 创建 HTML 结构

首先，创建一个 HTML 文件，并在其中添加一个用于绘制地图图表的容器元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>从北京到纽约的地图图表</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
</head>
<body>
    <!-- 地图容器 -->
    <div id="mapChart" style="width: 600px;height:400px;"></div>
    <script src="main.js"></script>
</body>
</html>

1.2 初始化 ECharts 实例

在 main.js 文件中，初始化 ECharts 实例，并设置基本的图表配置。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('mapChart'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '从北京到纽约'
    },
    tooltip: {},
    series: [{
        name: '北京到纽约',
        type: 'map',
        mapType: 'china', // 使用中国地图
        label: {
            show: true
        },
        data: [{
            name: '北京',
            value: 100
        }, {
            name: '纽约',
            value: 100
        }]
    }]
};

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

1.3 添加动画效果

为了让地图图表更具吸引力，可以为地图添加动画效果。

// 添加动画效果
option.animation = true;

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

步骤二：添加北京到纽约的航线

2.1 准备航线数据

获取北京到纽约的航线数据，例如经纬度信息。

2.2 添加航线

在 ECharts 配置中，添加航线系列。

series: [{
    name: '北京到纽约',
    type: 'map',
    mapType: 'china',
    label: {
        show: true
    },
    data: [{
        name: '北京',
        value: 100
    }, {
        name: '纽约',
        value: 100
    }]
}, {
    name: '航线',
    type: 'lines',
    coordinateSystem: 'geo',
    polyline: true,
    effect: {
        show: true,
        period: 6,
        trailLength: 0.7,
        color: '#fff',
        symbolSize: 3,
        symbol: 'circle'
    },
    data: [
        // 北京的经纬度
        {coords: [[116.405285, 39.904989], [116.405285, 39.904989]]},
        // 纽约的经纬度
        {coords: [[-74.005974, 40.712776], [-74.005974, 40.712776]]}
    ]
}]

2.3 更新图表

使用更新后的配置项重新设置图表。

myChart.setOption(option);

步骤三：优化地图图表

3.1 调整地图大小

根据需要调整地图容器的大小。

<div id="mapChart" style="width: 800px;height:600px;"></div>

3.2 修改地图样式

可以通过修改 ECharts 的配置项来调整地图的样式，例如颜色、阴影等。

option.series[0].itemStyle = {
    areaColor: '#323c48',
    borderColor: '#111'
};

3.3 添加其他元素

根据需要，可以添加其他元素，如城市名称、标签等。

option.series[0].label = {
    show: true,
    formatter: '{b}'
};

总结

通过以上步骤，你已经成功制作了一个从北京到纽约的地图图表。在实际应用中，你可以根据需求调整地图样式、添加更多元素，甚至实现交互功能。希望本文能帮助你轻松入门 ECharts 地图图表制作。

-- 展开阅读全文 --