Vue3+Ts+echarts的地图实现

Vue3+Ts+echarts的地图实现

今天接到一个需求，在首页添加我们大中国的地图。由于我技术不行，且用echarts的次数屈指可数，而且地图不同于柱状图那些好理解，且在网上没有查找到Vue3+TS的，找到的也很丑，在经历半天的磨难中，终于完成了。
没有点击！没有点击！因为项目需求是这样，所以没有弄转市的点击事件。而且因为还没有具体的需求接口，故将每个省的id作为value，来显示颜色。后期看需求可以对其进行更改。

在这运用了模块化的思想，将方法封装在另一个文件中，在主文件引用，来对其进行调用，进行主页面的代码量。

上代码

//index.js
<template>
  <div id="main"
       class="map"
       ref="mapDom">
  </div>
</template>
​
<script setup lang="ts">
import {
    
     ref, onMounted, watch } from 'vue'
import axios from 'axios'
import echartMap from './echartMap'
import * as echarts from 'echarts'
// 获取dom
const mapDom: any = ref(null)
// 获取地图的数据
let mapData: any = ref([])
//处理数据的方法函数
let mapRender = echartMap()
onMounted(() => {
    
    
  // 初始化画布
  var map = echarts.init(mapDom.value)
  axios
    .get(`https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json`)
    .then((res: any) => {
    
    
      mapData.value = res.data
      // registerMap 注册一个地图   mapData 地图的数据包 根据不同的数据渲染不同的地图
      echarts.registerMap('china', res.data)
      // 这个调用是进行地图的渲染
      map.setOption(mapRender(res.data.features))
    })
})
</script>
<style>
.map {
    
    
  height: 370px;
  margin: auto;
}
</style>

//echartMap.ts
export default()=>  {
    
     
  const mapRender = (data: any = [], mapData: any = []) => {
    
    
    let mapLocal: any = []
    mapData.forEach((value: any, index: number) => {
    
    
      console.log(value.properties.name)
      mapLocal.push(value.properties.name)
    })
    //特殊城市
    let city = ['北京', '重庆', '上海', '天津']
    let area: any = {
    
    
      内蒙古: '内蒙古自治区',
      新疆: '新疆维吾尔自治区',
      广西: '广西壮族自治区',
      宁夏: '宁夏回族自治区',
      西藏: '西藏自治区',
      澳门: '俺们特别行政区',
      香港: '香港特别行政区',
    }
    // 便利处理字典
    let result = data.map((i: any, index: number) => {
    
    
     	let name = ''
        if (city.find((x: any) => x === i.properties.name)) {
    
    
          name = i.properties.name + '市'
        } else if (area[i.properties.name]) {
    
    
          name = area[i.properties.name]
        } else {
    
    
          name = i.properties.name + '省'
        }
        return {
    
    
          name: i.properties.name,
          value: Number(i.properties.adcode),	//将省的id作为Value,看需求可更改
        }
    })
    // echarts 的数据配置选项 具体看官网
    let option = {
    
    
      title: {
    
    
        text: '中国地图',
        left: 'right',
        triggerEvent: true,
      },
      tooltip: {
    
    
        trigger: 'item',
        showDelay: 0,
        transitionDuration: 0.2,
      },
      visualMap: {
    
    
        left: 'left',
        min: 100000,
        max: 800000,
        inRange: {
    
    
          color: [
            '#313695',
            '#4575b4',
            '#74add1',
            '#abd9e9',
            '#a7ce89',
            '#9fe080',
            '#40b27d',
            '#fdae61',
            '#f46d43',
            '#d73027',
            '#a50026',
          ],
        },
        text: ['高', '低'],
        calculable: true,
      },
      series: [
        {
    
    
          name: '中国地图',
          type: 'map',
          roam: true,
          map: 'china',
          // 设置地图的文字
          label: {
    
    
            show: true,
            fontSize: 8,
            color: '#fff',
          },
          emphasis: {
    
    
            label: {
    
    
              show: true,
            },
          },
          data: result,
        },
      ],
    }
    return option
  }
  return mapRender
}