Vue3之使用echarts放置中国地图

前言：很多小伙伴在前端开发中有时需要中国地图来点击查看每个省的数据这样的需求，经过不懈的努力调式了几天完成了这样的效果。

1.首先安装echarts

npm install echarts

2.为地图设定一个自适应的宽度和可自行改变的高度。这里创建引用prop.ts。

prop.ts

import { PropType } from 'vue';

export interface BasicProps {
  width: string;
  height: string;
}

export const basicProps = {
  width: {
    type: String as PropType<string>,
    default: '100%',
  },
  height: {
    type: String as PropType<string>,
    default: '500px',
  },
};

 3. 创建一个map.vue  引入  china.json 和 echarts 和 prop.ts。china.json文件包数据量过大，这里暂不展示，如有需要可搜索下载或私信分享给大家。

map.vue

import { ref, onMounted, watch } from "vue";
import { basicProps } from './props';
// 引入echarts
import * as echarts from "echarts";

// 引入中国地图json数据
import chinaJSON from "./china.json";

4.注册中国地图,这里展示完整了map.vue代码，props为父组件传来的数据。

map.vue

<template>
  <!-- 放置地图容器 -->
  <div class="map" ref="map" :style="{ height, width }"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { basicProps } from './props';
// 引入echarts
import * as echarts from "echarts";

// 引入中国地图json数据
import chinaJSON from "./china.json";

let props = defineProps({
  ...basicProps, 
  data: Array<Object>
})

// 获取地图DOM元素
let map = ref();

// 注册中国地图
echarts.registerMap("china", chinaJSON as any);
watch(() => props.data, (newData) => {
  let myMap = echarts.init(map.value);
  //设置配置项
  myMap.setOption({
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    visualMap: {
      calculable: true,    //出现滑块筛选
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { show: false },
        restore: { show: false },
        saveAsImage: { show: false }
      },
    },
    tooltip: {
      trigger: 'item',
      borderColor: "#7227FD",
      borderWidth: 2,
      formatter: function (e) {
         //这里写入你点击每个省出现的数据信息
        return e.province` <br/> ` +
          ` <br/>` 
      }
    },
    series: [
      {
        type: 'map',
        map: 'china',
        geoIndex: 0,
        aspectScale: 1, // 长宽比
        showLegendSymbol: true, // 存在legend时显示
        nameProperty: "name",
        data: newData,

        roam: true,

        animation: true
      },
      {
        type: 'lines',
        z: 3,
        coordinateSystem: 'geo'
        // data: []
      }
    ],
    geo: {
      map: "china",
      roam: false, //鼠标缩放
      label: {
        show: false,
      },
      regions: [
        {
          name: "南海诸岛",
          itemStyle: {
            // 隐藏地图
            normal: {
              opacity: 0, // 为 0 时不绘制该图形
            }
          },
          label: {
            show: false // 隐藏文字
          }
        }],
      zoom: 1.2,
      itemStyle: {
        // shadowColor: "rgba(23,159,203, 0.5)",
        // shadowBlur: 17,
        areaColor: '#f8f8f8',
        borderColor: '#3B5077',

      },
      emphasis: {
        itemStyle: {
          color: "#b846fe",
        },
        label: {
          show: false,
          color: "#000",
        },
      },

    },


  });
}, { deep: true, immedeate: true });
</script>
<style scoped lang="less">
</style>

5.父组件使用map.vue。

parent.vue

<template>
  <div>
    <Map :data="data" />
  </div>
</template>

最后，展示成果。