如何使用ECharts和DataV.GeoAtlas创建广东省人口分布图

引言

数据可视化是数据分析中的重要环节，它可以帮助我们直观地理解数据。ECharts 是一个由百度团队开发的开源数据可视化库，它提供了丰富的图表类型和灵活的配置选项。DataV.GeoAtlas 是阿里云提供的一个地理数据可视化平台，它可以帮助我们获取地理数据并生成地图。本文将介绍如何结合 ECharts 和 DataV.GeoAtlas 创建一个展示广东省2023年常住人口分布的地图。

准备工作

在开始之前，我们需要准备以下资源：

ECharts 库：用于数据可视化。
DataV.GeoAtlas：用于获取地理数据。
Vue.js：用于构建前端界面（本示例中使用）。

获取地理数据

首先，我们需要从 DataV.GeoAtlas 获取广东省的 GeoJSON 数据。可以通过以下两种方式进行：

方法一：访问DataV.GeoAtlas 地理小工具系列，获取json格式文件到项目中直接引用。

方法二： 访问DataV.GeoAtlas 地理小工具系列，使用在线 API 地址封装成接口到项目中调用。

集成 ECharts 和 GeoJSON 数据

接下来，我们将在 Vue.js 项目中集成 ECharts 和 GeoJSON 数据。以下是主要步骤：

1. 安装 ECharts

使用 npm 或 yarn 安装 ECharts：

npm install echarts --save

或者

yarn add echarts

2. 引入 ECharts 和 GeoJSON

在 Vue 组件中引入 ECharts 和 GeoJSON 数据：

import * as echarts from 'echarts';
import geoJson from "../../util/geoJson.json"; //这里使用的方法一
echarts.registerMap("GD", geoJson);

3. 创建Vue组件

在你的 Vue 组件中，你需要有一个 HTML 容器元素，比如 <div>，它将作为 ECharts 图表的挂载点。给这个容器设置一个 id 属性，这样你就可以通过 JavaScript 访问并初始化 ECharts 实例。

<template>
  <div class="home">
    <div ref="echartContainer" style="width: 650px; height: 500px">
      <div id="myEchart" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

4. 配置 ECharts 选项

在 Vue 组件的 data 函数中定义图表的数据和配置：

data() {
    return {
      echartsData: [
        { name: '广州市', value: 1882.7 },
        { name: '深圳市', value: 1779.01 },
        { name: '东莞市', value: 1048.53 },
        { name: '佛山市', value: 961.54 },
        { name: '湛江市', value: 707.84 },
        // ...其他城市数据
      ],
    };
  },

注意事项：确保 echartsData 中的 name 属性与 geoJson 文件中的区域名称完全一致。任何不匹配都会导致 ECharts 无法找到相应的区域，从而无法显示数据(如下图所示)。

5. 初始化 ECharts 图表

在 Vue 组件的 mounted 钩子中初始化 ECharts 图表：

mounted() {
  this.$nextTick(() => {
    this.initEcharts();
  });
},
methods: {
  initEcharts() {
    // 初始化图表的代码
  },
}

6. 样式调整

使用 CSS 对图表进行样式调整，确保图表在页面中正确显示。

<style lang="scss" scoped>
.home {
  width: 100%;
  max-width: 1920px; /* 可以根据实际需求调整 */
  height: 500px;
  margin: 0 auto; /* 居中显示 */
}
</style>

7.完整示例代码

以下是完整的 Vue 组件示例代码，展示了如何创建广东省2023年常住人口分布图。

<template>
  <div class="home">
    <div ref="echartContainer" style="width: 650px; height: 500px">
      <div id="myEchart" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import geoJson from "../../util/geoJson.json";
echarts.registerMap("GD", geoJson);

export default {
  data() {
    return {
      echartsData: [
        { name: '广州市', value: 1882.7 },
        { name: '深圳市', value: 1779.01 },
        { name: '东莞市', value: 1048.53 },
        { name: '佛山市', value: 961.54 },
        { name: '湛江市', value: 707.84 },
        { name: '茂名市', value: 625.23 },
        { name: '惠州市', value: 607.34 },
        { name: '揭阳市', value: 565.36 },
        { name: '汕头市', value: 555.75 },
        { name: '江门市', value: 482.24 },
        { name: '中山市', value: 445.82 },
        { name: '肇庆市', value: 413.17 },
        { name: '清远市', value: 398.67 },
        { name: '梅州市', value: 384.91 },
        { name: '韶关市', value: 285.77 },
        { name: '河源市', value: 283.83 },
        { name: '汕尾市', value: 269.13 },
        { name: '阳江市', value: 262.47 },
        { name: '潮州市', value: 257.62 },
        { name: '珠海市', value: 249.41 },
        { name: '云浮市', value: 239.66 }
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initEcharts();
    });
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(document.getElementById('myEchart'));
      const option = {
        title: {
          text: '广东2023年常住人口 （2023）',
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return params.seriesName + '<br/>' + params.name + ': ' + params.value + '（万人）';
          }
        },
        // 工具栏
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        // 视觉映射组件
        visualMap: {
          min: 100,     // 组件的允许的最小值
          max: 2000,    // 组件的允许的最小值
          text: ['高', '低'],
          realtime: true,  // 拖拽时，是否实时更新
          calculable: true, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
          inRange: {
            //定义 在选中范围中 的视觉元素
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '广东2023年常住人口',
            type: 'map',
            map: 'GD',
            label: {
              show: true
            },
            emphasis: {
              itemStyle: {
                // 鼠标悬浮时的样式
                areaColor: '#f74342',  // 设置高亮时的填充颜色
              }
            },
            data: this.echartsData,
            click: function (params) {
              // params 是事件参数，包含了被点击区域的信息
              console.log('点击了某地级市:', params);
            },
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("click", function (params) { // 监听地图点击事件
        console.log('某地级市被点击了',params)
      });
      myChart.on("mouseover", function (params) { // 监听鼠标移动事件
        console.log('鼠标移入某地级市',params)
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  max-width: 1920px; /* 可以根据实际需求调整 */
  height: 500px;
  margin: 0 auto; /* 居中显示 */
}
</style>