vue3中使用echarts区域地图

首先讲清楚一点，实现区域地图，需要边缘区域的经纬度。那么经纬度的数据源自哪里呢？当然我白嫖啦~

白嫖网站：https://datav.aliyun.com/portal/school/atlas/area_selector

 

直接拿这个url

也就是说 需要发送请求。我们直接就fetch请求，或者axiso，我就用axios测试一下吧。

代码：

#html
<template>
	<div>
		<!-- 地图 -->
		<div id="map_view" style="width: 50vw;height: 600px;"></div>
	</div>
</template>

js部分（用了语法糖）： 

import { onMounted } from 'vue';
import request from '../api/index'
import * as echarts from "echarts";

onMounted(() => {
  const mapOption = {
    animation: true,
    geo: {
      map: 'hunan',
      zoom: 1.2,
      label: {
        show: true,
        color: '#fff',
        fontSize: 25
      },
      // 选中状态下的多边形和标签样式
      emphasis: {
        itemStyle: {
          color: '#008ff2', //地图背景色
          borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        label: {
          color: '#fff'
        }
      },
      roam: true,// 允许缩放
      itemStyle: {
        normal: {
          color: '#100c2a', //地图背景色
          borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1,
        },
      }
    }
  }

  const mapChart = echarts.init(document.getElementById('map_view'));
  request.get('https://geo.datav.aliyun.com/areas_v3/bound/430000_full.json').then(res => {
    echarts.registerMap('hunan', res.data);
    mapChart.setOption(mapOption);
  })
})