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>

最后,展示成果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值