<template>
  <div id="map" class="map-item"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import * as echarts from "echarts";
// import { getMapGeoData, getMapPointList } from "../service";
import getMapGeoData from "./mapGeoData.js";
import mapPointList from "./mapPointList";

export default defineComponent({
  setup() {},
  mounted() {
    this.initEcharts();
  },
  data() {
    return {
      pointList: [],
      mapEcharts: null,
    };
  },
  computed: {
    options() {
      return {
        tooltip: {
          // borderColor: "#333",
          formatter: function (params) {
            return params.name;
          },
        },
        geo: {
          map: "ZJ",
          show: true,
          // roam: true,
          label: {
            emphasis: {
              show: false,
            },
          },

          itemStyle: {
            normal: {
              areaColor: "#0f4c8f",
              borderColor: "#00daf6",
              shadowColor: "#122f48",
              borderWidth: 1,
              shadowOffsetX: 3, // 阴影偏移
              shadowOffsetY: 2, // 阴影偏移
              shadowBlur: 2, // 外边框阴影
            },
            emphasis: {
              color: "#116eb1", // 悬浮背景
            },
          },
        },
        grid: {
          top: "0",
          left: "0%",
          right: "0%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            symbol: "circle",
            showEffectOn: "render",

            // zlevel: 2,
            symbolOffset: [0, 0],
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#ffffff",
                formatter: "{b}",
                fontWeight: "bold",
              },
              emphasis: {
                show: true,
                color: "#00daf6",
              },
            },
            rippleEffect: {
              scale: 4,
              number: 3
            },
            itemStyle: {
              color: "#00daf6",
              // color: "red"
            },
            symbolKeepAspect: true,
            // symbol: imgDatUrl,

            symbolSize: 7,
            data: this.pointList,
          },
          //   type: 'effectScatter', // 类型
          //   coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
          //   // 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
          //   // 'pin', 'arrow', 'none'
          //   symbol: 'circle',
        ],
      };
    },
  },
  methods: {
    async initEcharts() {
      // const { data: getMapData } = await getMapGeoData();
      // const { data: pointList } = await getMapPointList();
      const { data: getMapData } = getMapGeoData;
      const { data: pointList } = mapPointList;

      echarts.registerMap("ZJ", getMapData);
      const mapEcharts = echarts.init(document.getElementById("map"));

      mapEcharts.showLoading({ color: "#fff" });
      mapEcharts.on("click", this.mapClickHandle);

      this.pointList = pointList || [];
      setTimeout(() => {
        mapEcharts.setOption(this.options);
        mapEcharts.hideLoading();
        this.mapEcharts = mapEcharts;
      }, 400);
    },
    mapClickHandle() {},
  },
  unmounted() {
    if (!this.mapEcharts) {
      return;
    }
    this.mapEcharts.dispose();
    this.mapEcharts = null;
  },
});
</script>

<style >
.map-item canvas:first-of-type {
  transform: scaleY(1.1) scaleX(1.3);
}
</style>
<style lang="scss" scoped>
.map-item {
  flex: 1;
  box-sizing: border-box;
  height: 100%;
}
</style>
