screenFront/src/views/Offsite/content/chart/mapEchart.vue

<!--
 * @FilePath: \code\gitscreenFront\src\views\Offsite\content\chart\mapEchart.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-20 11:54:22
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div ref="ismap"></div>
</template>
<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref, watch } from "vue";
import { EDataPerson, EDataPersonItem } from "@/type/offsite";
import * as jsondata from "@/assets/map/china.json";
import { Offsite } from "@/store/module/offsite";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
// let props = defineProps<{
//   title: string;
// }>();
let ismap = ref();
let store = Offsite();

watch(
  () => store.city,
  (newVal, oldVal) => {
    setData(newVal);
  },
  { deep: true, flush: "post" }
);

const echartsData = reactive<EDataPerson>({
  ismap: {
    div: null,
    data: null,
    title: "",
    box: null,
  },
});

const setData = (val: any) => {
  let arr = [];
  val.forEach((res) => {
    arr.push({
      name: res,
      itemStyle: {
        areaColor: "#FE6D75",
        borderWidth: 0,
      },
    });
  });

  echartsData.ismap!.div = ismap.value;
  echartsData.ismap!.data = {
    // 背景颜色
    // backgroundColor: "#404a59",
    // 提示浮窗样式
    tooltip: {
      show: true,
      trigger: "item",
      alwaysShowContent: false,
      backgroundColor: "#0C121C",
      borderColor: "rgba(0, 0, 0, 0.16);",
      hideDelay: 100,
      triggerOn: "mousemove",
      enterable: true,
      textStyle: {
        color: "#DADADA",
        fontSize: "12",
        width: 20,
        height: 30,
        overflow: "break",
      },
      showDelay: 100,
    },
    // 地图配置
    geo: {
      map: "china",
      label: {
        // 通常状态下的样式
        // normal: {
        //   show: true,
        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        // 鼠标放上去的样式
        emphasis: {
          textStyle: {
            color: "#fff",
          },
        },
      },
      // 地图区域的样式设置
      itemStyle: {
        normal: {
          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)",
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10,
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: "#389BB7",
          borderWidth: 0,
        },
      },
      regions: arr,
    },
    // series: [{
    //   type:'map',
    //   map:'china',
    //   data: [{name:'北京市'},{name:'上海市'}]
    // }]
  };

  change(echartsData.ismap);
  if (!echartsData.ismap!.box.isAddClick) {
    echartsData.ismap!.box.on("click", (params) => {
      if(params.name=='浙江省'||params.name=='广东省'){
        router.push({
        name: "offSiteDevList",
        params: {
          city: params.name,
          // dev:'03e2c050-460b-11ed-b6af-15994988a6b3'
        },
      });
      }

    });
    echartsData.ismap!.box.isAddClick = true;
  }

  // echartsData.ismap!.box.onclick=function(params){
  //   console.log(params);

  // }
};
const change = (item: EDataPersonItem) => {
  //注册地图文件
  proxy.$echarts.registerMap("china", jsondata);
  let Ebox = proxy.$echarts.init(item.div, "dark");

  Ebox.setOption(item.data);
  item.box = Ebox;
};
//备用渲染地图
// const updataecharts = (val:any)=>{
//   let echart = echartsData.ismap.box
//   let option = echart.getOption();
//   console.log(option);

//   option.geo[0].regions=val
//   echart.setOption(option)
// }

function setchartWH(width: any, height: any) {
  ismap.value.style.height = height + "px";
  ismap.value.style.width = width + "px";
  if (echartsData.ismap.box) {
    echartsData.ismap.box.resize();
  }
}
onMounted(() => {
  setData(store.city);
});

// return{setchartWH}
defineExpose({
  setchartWH,
  setData,
});
</script>

<style scoped></style>