通过echarts展示不同省、市、区地图 vue3写法

1.通过阿里的datav：https://datav.aliyun.com/portal/school/atlas/area_generator#8.82/119.751701/28.967880
或者 https://hxkj.vip/demo/echartsMap/ 下载对应边界数据的.geoJson文件数据

2.引入

const uploadedDataURL = '/wyx.geoJson'复制

注意：
vue-cli3.0用axios加载本地json数据需要先将静态文件放在public文件夹中，把路径换成本地服务地址 + public + 文件名，不然通过axios获取数据404

获取到的数据结构如下图：

效果图：

完整代码如下图：

<template>
  <div ref="about" id="main" class="about" style="height:100vh;width:100%;">
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import axios from 'axios'
const uploadedDataURL = '/wyx.geoJson'
const about = ref(null)
// console.log(about)
const getChart = () => {
  let data = []
  axios.get(uploadedDataURL).then(json => {
    console.log(json)
    const myChart = echarts.init(about.value)
    echarts.registerMap('金华', json.data)
    data = json.data.features.map((item) => { // 显示窗口的数据转换
      return {
        value: (Math.random() * 1000).toFixed(2),
        name: item.properties.name
      }
    })
 
    myChart.setOption({
      backgroundColor: '#404a59', // 背景
      tooltip: { // 窗口外框
        backgroundColor: 'rgba(0,0,0,0)',
        trigger: 'item'
      },
      title: {
        show: true,
        x: 'center',
        text: '金华市行政区域图',
        textStyle: {
          color: '#2980b9',
          fontSize: 16
        }
      },
      legend: {
        show: false
      },
      series: [{
        tooltip: { // 显示的窗口
          trigger: 'item'
 
        },
        name: '',
        type: 'map',
        map: '金华', // 自定义扩展图表类型
        zoom: 0.65, // 缩放
        showLegendSymbol: true,
        label: { // 文字
          show: true,
          color: '#fff',
          fontSize: 15,
          formatter: (params) => {
            return params.name
          }
        },
        itemStyle: { // 地图样式
 
          borderColor: 'rgba(147, 235, 248, 1)',
          borderWidth: 1,
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [{
              offset: 0,
              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          },
          shadowColor: 'rgba(128, 217, 248, 1)',
          // shadowColor: 'rgba(255, 255, 255, 1)',
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10
 
        },
        emphasis: { // 鼠标移入动态的时候显示的默认样式
          itemStyle: {
            areaColor: '#FFD181',
            borderColor: '#404a59',
            borderWidth: 1
          }
        },
        layoutCenter: ['45%', '45%'],
        layoutSize: '100%',
        markPoint: {
          symbol: 'none'
        },
        data: data
      }]
    }
    )
  })
}
onMounted(() => {
  getChart()
})
</script>
 复制