nuxt3 vue-echarts 地图

### 集成 `vue-echarts` 到 Nuxt3 项目 为了在 Nuxt3 中使用 `vue-echarts` 来实现地图可视化，需遵循特定步骤来安装依赖项、配置插件以及编写必要的代码。 #### 安装依赖包 首先，在命令行工具中执行如下 npm 命令以安装所需的库： ```bash npm install echarts vue-echarts ``` 这会下载并安装 ECharts 和其 Vue 组件到当前项目环境中[^4]。 #### 创建 ECharts 插件 接着，在项目的 `plugins` 文件夹内新建名为 `echarts.client.ts` 的文件，并加入以下内容用于初始化 ECharts 并将其提供给整个应用范围内的组件访问： ```typescript import { defineNuxtPlugin } from '#app' import VChart, { THEME_KEY } from 'vue-echarts' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.component('v-chart', VChart) nuxtApp.vueApp.provide(THEME_KEY, 'light') }) ``` 这段代码不仅注册了全局可用的 `<v-chart>` 自定义标签，还设定了默认主题为浅色模式。注意这里使用 `.client.ts` 后缀名是为了确保此插件仅运行于客户端环境之中[^1]。 #### 使用中国地图数据集 为了让 ECharts 支持绘制中国的地理信息图表，还需要引入相应的 GeoJSON 数据源。可以通过官方提供的方法加载内置的地图资源或自行获取外部 JSON 文件作为补充材料。对于前者而言，只需简单调用 registerMap 函数即可完成注册工作： ```javascript // 在适当位置添加该段脚本 import * as ChinaMapData from '@jiaminghi/data/china.json'; import * as echarts from "echarts"; echarts.registerMap('china', ChinaMapData); ``` 上述操作使得后续可以指定 `'china'` 参数轻松引用已登记过的国家版图轮廓[^2]。 #### 编写页面逻辑 最后一步是在目标页面里利用之前准备好的一切构建实际的地图视图效果。假设有一个简单的布局结构如下所示，则可以在对应的 script 节点内部设置 option 属性从而定制化呈现形式： ```html <template> <div class="map-container"> <v-chart :option="chartOption"/> </div> </template> <script setup lang="ts"> const chartOption = reactive({ title: { text: '全国疫情分布', subtext: '', left: 'center' }, tooltip: { trigger: 'item' }, visualMap: { min: 0, max: 1000, left: 'left', top: 'bottom', text: ['高', '低'], calculable: true }, series: [ { name: '确诊人数', type: 'map', mapType: 'china', roam: false, label: { show: true }, data:[ // 这里填入具体省份的确诊数统计... ] } ] }); </script> <style scoped> .map-container{ width: 100%; height: 600px; } </style> ``` 通过以上设定，便能够在网页上看到一张带有交互功能的中国大陆地区地图，并且可以根据需求进一步调整样式参数达到理想中的视觉表现[^3]。