正文

学会echarts地图图表：轻松打造可视化中国地图案例教程

/0 浏览量
0514

在数据可视化领域，ECharts 是一个非常流行和强大的 JavaScript 库，它能够帮助开发者轻松地创建丰富的交互式图表。其中，ECharts 地图图表功能尤为强大，可以用来展示地理分布数据。本文将带您一步步学会如何使用 ECharts 打造一个可视化中国地图案例。

环境准备

在开始之前，请确保您的开发环境已经安装了以下工具：

  • Node.js：用于下载和运行 ECharts。
  • Webpack：用于打包和编译 ECharts。
  • Chrome 或 Firefox 浏览器：用于查看和测试生成的地图图表。

安装 ECharts

首先，您需要安装 ECharts 库。可以通过 npm 或 yarn 来安装：

npm install echarts --save
# 或者
yarn add echarts

创建项目结构

创建一个基本的 HTML 项目结构，包含以下文件：

my-echarts-map/
|-- index.html
|-- dist/

在 index.html 文件中，设置以下内容：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<!-- 引入 ECharts -->
<script src="dist/echarts.min.js"></script>
<script src="dist/china.js"></script>
<script src="dist/mapExample.js"></script>
</body>
</html>

在 dist/ 文件夹中，将 ECharts 的 echarts.min.js 和 china.js 文件复制进去。

配置地图数据

ECharts 使用 china.js 文件来配置中国地图的地理信息。这个文件中包含了省份边界和名称等数据。您可以直接从 ECharts 的官网下载最新的 china.js。

编写地图图表代码

在 dist/mapExample.js 文件中，编写如下代码：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '中国地图示例',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '地图示例',
            type: 'map',
            map: 'china',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: Math.round(Math.random() * 1000)},
                {name: '广东', value: Math.round(Math.random() * 1000)},
                // 添加更多省份和数值
            ]
        }
    ]
};

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

在上面的代码中，我们初始化了一个 ECharts 实例，并设置了图表的基本配置，包括标题、提示框、视觉映射组件、地理组件和系列组件。

运行项目

在命令行中，切换到项目根目录，并运行以下命令：

webpack --config webpack.config.js

这会编译并生成一个打包后的 JavaScript 文件，通常位于 dist/ 文件夹中。

浏览器查看

现在，在浏览器中打开 index.html 文件，您应该能够看到一个展示了中国地图的图表。点击各个省份，您可以看到相应的数值信息。

通过以上步骤，您已经成功学会了如何使用 ECharts 打造一个可视化中国地图案例。希望这个教程对您有所帮助！如果您想进一步探索 ECharts 的其他功能，可以访问 ECharts 的官方文档和示例。

-- 展开阅读全文 --