Vue ECharts 绘制动态地图，万能模板，玩转数据可视化

2024-01-18 18:12:22

前言

当我们在项目中需要使用地图进行数据可视化时，很多时候都会选择使用 ECharts 这个强大的数据可视化库。而在 Vue 项目中，我们更是可以借助 Vue 框架的优势，将 ECharts 地图功能集成到我们的项目中，实现更加动态、交互式的可视化效果。

步骤一：安装 Vue 和 ECharts

在开始之前，我们需要先安装 Vue 和 ECharts。这里假设你已经安装了 Vue CLI，如果还没有，请先按照官方文档进行安装。

# 安装 Vue CLI
npm install -g @vue/cli

# 创建一个新的 Vue 项目
vue create vue-echarts-map

# 进入项目目录
cd vue-echarts-map

# 安装 ECharts
npm install echarts --save

步骤二：配置 ECharts

接下来，我们需要在 Vue 项目中配置 ECharts。在 src/main.js 文件中，找到 import 语句，并添加以下内容：

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

这样，我们就可以在 Vue 组件中使用 ECharts 了。

步骤三：准备地图数据

在使用 ECharts 绘制地图之前，我们需要先准备地图数据。ECharts 支持多种地图数据格式，包括 GeoJSON、KML、SVG 等。在这里，我们使用 GeoJSON 格式的中国地图数据。

你可以从网上下载中国地图的 GeoJSON 数据，也可以使用 ECharts 提供的地图数据。具体方法如下：

打开 ECharts 官网：https://echarts.apache.org/zh/index.html
在导航栏中找到「下载」选项，并点击「地图数据」
在弹出的对话框中，选择「中国」并点击「下载」按钮
将下载的 GeoJSON 文件保存到你的项目目录中

步骤四：创建 Vue 组件

接下来，我们需要创建一个 Vue 组件，用于渲染 ECharts 地图。在 src/components 目录下，创建一个名为 EchartsMap.vue 的文件，并在其中添加以下内容：

<template>
  <div id="echarts-map"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    // 获取地图容器
    const el = this.$refs['echarts-map']

    // 初始化 ECharts 实例
    const myChart = echarts.init(el)

    // 指定地图类型
    const mapType = 'china'

    // 加载地图数据
    echarts.registerMap(mapType, {
      geoJSON: this.$echarts.getJSON('./data/china.json')
    })

    // 设置地图选项
    const option = {
      visualMap: {
        min: 0,
        max: 2500,
        text: ['高', '低'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
        }
      },
      series: [
        {
          name: '中国地图',
          type: 'map',
          mapType: mapType,
          data: [
            {name: '北京', value: 1000},
            {name: '上海', value: 500},
            {name: '广州', value: 800},
            {name: '深圳', value: 1200},
            {name: '杭州', value: 300},
            {name: '南京', value: 700},
            {name: '武汉', value: 600},
            {name: '成都', value: 400}
          ]
        }
      ]
    }

    // 渲染地图
    myChart.setOption(option)
  }
}
</script>