当前位置：首页 > article >正文

Vue3 + Echarts 实现中国地图

article 2024/11/14 12:05:47

基本概念

echarts是一个基于JavaScript的开源可视化库，用于创建和展示各种交互式图表和图形。它可以用于数据分析、数据可视化、数据探索和数据报告等方面。我们一般使用echarts来实现数据可视化，本文我们使用vue3 + echars来实现中国地图。

准备echarts基本结构

首先我们先搭建echarts的基本结构

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

let myEcharts = ref()

onMounted(() => {
  let myChart = echarts.init(myEcharts.value)

  const option = {
    title: {
      text: '中国地图展示',
      x: 'center'
    },
  }

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

<template>
  <div id="app" ref="myEcharts"></div>
</template>

<style lang="scss" scoped>
#app {
  width: 500px;
  height: 500px;
}
</style>

设置中国地图的矢量数据创建js文件

地图数据下载地址：https://datav.aliyun.com/portal/school/atlas/area_selector

首先我们要去复制一下地图数据，进入网址，根据所需的地图数据进行选择

对其的json文件地址进行访问并复制。

在项目中创建Js文件，定义变量并暴露出去

在组件中获取地图矢量数据，并创建地图

引入地图数据注册，并对地图进行相关设置

<script setup lang="ts">
import * as echarts from 'echarts'
import { chinaMapData } from './assets/MapData' // 引入中国地图数据
import { ref, onMounted } from 'vue'

let myEcharts = ref()

onMounted(() => {
  let myChart = echarts.init(myEcharts.value)
  echarts.registerMap('chinaMap', chinaMapData) // 使用 registerMap 注册的地图名称。

  const option = {
    title: {
      text: '中国地图展示',
      x: 'center'
    },

    geo: { //地理坐标系组件。地理坐标系组件用于地图的绘制
      type: 'map',
      map: 'chinaMap', //注册时的地图名称
      roam: true, //是否开启鼠标缩放和平移 默认不开启
      zoom: 1, //当前视角的缩放比例
      center: [108.956239, 34.268209], //当前视角的中心点 用经纬度表示
      label: {
        // 地图上显示的文字提示
        show: false,
        fontSize: 12,
        fontWeight: 'bold'
      },
      itemStyle: {
        //地图区域的多边形 图形样式
        areaColor: '#ff6600'
      }
    },
  }

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

<template>
  <div id="app" ref="myEcharts"></div>
</template>

<style lang="scss" scoped>
#app {
  width: 500px;
  height: 500px;
}
</style>