vue echart北京地图

### 实现 Vue 项目中使用 ECharts 展示北京地图

为了在 Vue 项目中展示北京的地图，需要准备地理JSON数据并按照特定的方式配置ECharts实例。以下是详细的说明和代码片段。

#### 准备工作

确保已经获取到了北京市区划的JSON文件，并将其放置于项目的静态资源目录下[^1]。此操作是为了让ECharts能够识别具体的地理位置信息从而绘制出精确的地图图形。

#### 安装依赖包

如果尚未安装`echarts`库，则可以通过npm或yarn命令来进行安装：

npm install echarts --save

或者

yarn add echarts

#### 配置 main.js 文件

为了让整个应用都可以访问到 `echarts` 对象，在入口文件(main.js)里设置全局变量是一个不错的选择。这里提供了两种不同的方法来完成这一步骤[^2][^3]：

- **新版本推荐做法**

// 引入完整的 echarts 库
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

- **旧版兼容写法**

// 只加载核心功能模块以减少体积
import echarts from 'echarts/lib/echarts';

// 扩展所需的组件（柱状图、折线图等）
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';

// 导入提示框工具类和其他必要的辅助选项
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

Vue.prototype.$echarts = echarts;

#### 创建显示北京地图的 Vue 组件

下面给出一段简单的Vue单文件组件(SFC)，用于初始化一个容器节点并通过JavaScript API调用来呈现北京地区地图视图[^4]。

<template>
  <div id="beijing-map" style="width: 600px;height:400px;"></div>
</template>

<script>
export default {
  name: "BeijingMap",
  mounted() {
    const myChart = this.$echarts.init(document.getElementById('beijing-map'));

    // 注册自定义区域映射表项
    this.$echarts.registerMap('beijing', require('@/assets/beijing.json')); 

    let option = {
      title: { text: '北京市地图' },
      tooltip: {},
      series: [
        {
          type: 'map',
          mapType: 'beijing'
        }
      ]
    };

    myChart.setOption(option);
  }
};
</script>

在这个例子中，通过`require()`函数动态导入之前提到过的本地存储着北京市边界坐标的json文件路径作为参数传递给`registerMap()`方法注册至ECharts环境内；接着设定了一系列绘图属性如标题样式(`title`)以及鼠标悬停效果(`tooltip`)等等最后再利用setOption()指定最终要渲染出来的图像外观形式。