<template>
  <div
    class="chart"
    ref="chartRef"
    :style="{ width: '100%', height: '100%' }"
  ></div>
</template>
<script lang="ts" setup>
import { worddata } from "@/assets/js/map/wordProvincialCapital";
import worldMap from "@/assets/js/map/world.json";
import worldMapzh from "@/assets/js/map/worldZh.json";
import { bigNumberTransform } from "@/utils/utils";
import { ref, defineProps, watchEffect, unref, watch, onMounted } from "vue";
import { registerMap } from "echarts";
import type { EChartsOption } from "echarts";
import { useECharts } from "@/hooks/web/useECharts";
import useEchartsAutoTooltip from "@/components/chart/logic/useEchartsAutoTooltip";
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, getInstance, echarts } = useECharts(
  chartRef as Ref<HTMLDivElement>
);
interface MapChartProps {
  title?: string;
  /**
   * 图表数据
   */
  chartData: any[];
  tooltipFormatter?:
    | string
    | ((params: any, ticket: any, callback: any) => string);
  /**
   * 手动设置一些其它的设置，需要结合manual才能起作用
   */
  otherOptions?: EChartsOption;
  /**
   * 是否开启自动轮播
   */
  autotip?: boolean;
  zoom?: number;
  showTooltip?:boolean;
  visualMapShow?: boolean;
  max?: number;
  min?: number;
}

const {
  title = "",
  chartData = [],
  tooltipFormatter = "",
  otherOptions = {},
  autotip = false,
  zoom = 1.2,
  showTooltip = false,
  visualMapShow=false,
  max = 100,
  min = 0
} = defineProps<MapChartProps>();

const mapPiont = ref([]);
const mapLine = ref([]);
const destList = ref([]);
// 绘制攻击源点
chartData.map((item, index) => {
  worddata.map((mapName) => {
    if (mapName.name == item.src) {
      mapPiont.value.push({
        name: item.src,
        dest: item.dest,
        value: mapName.coordinate,
        count: item.value,
        itemStyle: {
          areaColor: "#B0D9FF",
        },
      });
    }
  });
});
mapPiont.value.map((item, index) => {
  // 绘制受攻击点
  worddata.map((mapName) => {
    if (mapName.name == item.dest) {
      destList.value.push({
        name: item.dest,
        value: mapName.coordinate,
      });
    }
  });
  // 绘制攻击线
  mapLine.value.push({
    coords: [
      [item.value[0], item.value[1]],
      [destList.value[index].value[0], destList.value[index].value[1]],
    ],
    item,
  });
});
let options: EChartsOption = {
  tooltip: {
    show: unref(showTooltip),
    trigger: "item",
    position: (point, params, dom, rect, size) => {
      return [point[0] - 20, point[1] - size.contentSize[1] - 15];
    },
    backgroundColor: "transparent",
    borderColor: "none",
    extraCssText: "box-shadow: none",
    formatter: unref(tooltipFormatter) as any,
  },
  geo: {
    map: "World",
    aspectScale: 0.6,
    zlevel: -1,
    zoom: unref(zoom), //当前视角的缩放比例
    roam: false,
    silent: true,
    itemStyle: {
      areaColor: "#005FB0",
      borderColor: "rgba(177, 243, 254)",
      borderWidth: 1.5,
      shadowColor: "rgba(0, 190, 255, .6)",
      shadowOffsetX: -2,
      shadowOffsetY: 10,
      shadowBlur: 5,
    },
  },
  series: [
    {
      type: "map",
      map: "World",
      nameMap: worldMapzh,
      zlevel: 1,
      geoIndex: 1,
      data: unref(chartData),
      zoom: unref(zoom), //当前视角的缩放比例
      aspectScale: 0.6, //长宽比
      showLegendSymbol: false, // 存在legend时显示
      selectedMode: false,
      label: {
        normal: {
          show: false,
        },
        emphasis: {
          show: false,
          textStyle: {
            color: "#17427B",
          },
        },
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: "rgba(0, 95, 176)",
          borderColor: "rgba(0, 249, 255, 1)",
          borderWidth: 1,
          opacity: 1,
        },
        emphasis: {
          areaColor: "rgba(0, 95, 176)",
          borderColor: "rgba(0,255,255,.1)",
          borderWidth: 1,
          opacity: 1,
          label: {
            show: false,
            color: "#fff",
          },
        },
      },
    },
    {
      type: "effectScatter",
      coordinateSystem: "geo",
      geoIndex: 0,
      symbol: "circle",
      symbolSize: 8,
      showEffectOn: "render",
      rippleEffect: {
        period: 10,
        scale: 4,
        brushType: "fill",
      },
      // hoverAnimation: true,
      label: {
        show: false,
        position: "bottom",
        color: "#fff",
        fontSize: 14,
        distance: 15,
        textShadowColor: "0px 2px 3px rgba(0,0,0,0.5);",
        formatter: function (e) {
          console.log(e);
          return e.name;
        },
      },
      itemStyle: {
        color: "rgba(0, 249, 255, 1)",
      },
      zlevel: 2,
      data: unref(mapPiont),
    },
    //被攻击点
    {
      type: "scatter",
      coordinateSystem: "geo",
      zlevel: 2,
      showAllSymbol: true,
      symbol:
        "image://data:image/png;base64,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",
      symbolSize: [30, 30],
      z: 9999,
      itemStyle: {
        normal: {
          show: true,
          color: "#9966cc",
        },
      },
      data: unref(destList),
    },
    {
      type: "lines",
      zlevel: 3,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.8, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: "pin", //箭头图标
        symbolSize: 6, //图标大小
        color: "rgba(255, 8, 0, 1)",
      },
      lineStyle: {
        type: "solid",
        normal: {
          type: "solid",
          color: "rgba(107, 162, 209, 1)",
          width: 3, //线条宽度
          opacity: 0.1, //尾迹线条透明度
          curveness: 0.3, //尾迹线条曲直度
        },
      },
      data: unref(mapLine),
      tooltip: {
        trigger: "item",
        position: (point, params, dom, rect, size) => {
          return [point[0] - 100, point[1] - size.contentSize[1] + 15];
        },
        backgroundColor: "transparent",
        borderColor: "rgba(0,0,0,0)",
        formatter: function (params) {
          const aaa = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPcAAACUCAYAAABP7L+nAAAAAXNSR0IArs4c6QAAGM9JREFUeF7tnQl0VEW6x6urbyOgg2RjdN54HEFF0AFZRDYRBhcUXBAF46hjXOCBepT3cEOQRVlCCDskBAIEkC0YdkQQlUGPOsMc5bnjis7grgFBgaS73qnurnR1pe69dXtJ367+ck6fXlLdt+pf36//Xy33tgfBHygACmipgEfLVkGjQAFQAAHcEASggKYKANyadiw0CxQAuCEGQAFNFQC4Ne1YaBYoAHBDDIACmioAcGvasdAsUADghhgABTRVAODWtGOhWaAAwA0xAApoqgDArWnHQrNAAYAbYgAU0FQBgFvTjoVmgQIAN8QAKKCpAsmEO5mfrWl3QLPSVAHixnonEkDVz1It50a9oE6ZrYAqxKrlkqpmIkCz+wzx/3blZQ2O5T2qwrmiI1QrC+VSpoBZnFjFT0pjK15ozN5vB7Td/1PWg3BgUAAhJINS5bVYvgCSJngy4GafaQYw/7oq5Hy5lH4bJq0n4IPdoIAKnKyMWJZ/rvJFkPT2xgO3FZgiwCLwsi8AVdCTLorCAeALRkGkNC4iA9XqNTOwrb4Aki5PouCWuTF9jYdYfE4bx7/GnrNGx1O3RAsHMCdaUXd+nhmMolvT5/xrMjdXcfikqhArQHYpN4OWv+dhloHPwx1rvZIqFny4NgqopN+0sSLE/Gsi3GZl2XtE8ZJuGLFCZObUMoB5wHG4hfTeztVFJ09VZCW9E1LVMDhulAJ2aTeDl5ULSNybL2Pl5uzASY2teOGWjaVF12Yg09fNHotfCm5LzZPaCQCZKxQQ4TZzZhFg9pzCTv9k0PPu3WDj8Fjgthpfiy7NA83AFu+tUnhX9DpUQksFrGa07cBmANNyZo+tXLxBAE8E3Lx7i85Mn4duL+xui9p3GIACAQ8iAQ8KEE/wcfA7Lfy8pqam7rmW8QSNcqUCHlwfdBx+zeMJ/Y8+DwROoBH3LkM7dx7noGZwi/ci+LJJOV6OhGeH8cAtGzMzp45AzeA+8Pkt6Ow/lVp1rndCxdcU+ECvdqeSSy5oahcIeNsbRzwffnmCnJljBG7rm2VX3vPxV8fx5td/oeX8w67PRqc19lq+JxAg3pnrf7D7XPi/RgowmCVNImdkG4H8Pp+gcY8VoJKS6jDgPNT0sRXsDQp4vHDLXFsEmwKE0XsHbkbnnldiFQa+ax77wkMIqr3zqmaBAd2a2YWMd07Vj95X3/nNf94fG/kn3dPCrrznzfd/9RVX/kTLnSwdeSbKbmYNd62fNLrtmf/YfS78X1sF6rmpv8O5jfyPDK5Gi0r/hp564hAHOAObv+fdm0/fG2QMngi4xXE2gzsENUKh+3c+HITOb73AHu5wqq5tvEDD3K9AOBWvX9Eg7P5Wf/D5x9zhR7u23IXuKzggAdwfnkmXgU4/gk2+yWbUefDjkiqRcPOOzYNNH3vRW+8ORG0vnG8N96MHqXNzy2RxNQ7eDAo4UMBizFsPdkLOyDJqJhY0Qu/tG45uvO6flPkwtOzezMnF2fWkAZ4ouGWpeAhqdvvn2wNRu/ZzbeD+Mgx3dDFCoutpMS5y0JlQFBRQUUCAPgI6adYU10ws+B2qPjQKXd59lwRwEXTZ7HrSUvRY4eZ3mPFLW/UdGyEjCPib/7oBXdzRHm42g64iO5QBBZKlgNxAONBDkJPGPk/t2Dubkya1k1GHi9aEARddnD2n72Epe9IdPFFwiyk5c+wQ2BTw1968HnXuMsfSufs98hWk5cmKVvhcRQXk6Xk07FGQE4xR7ahbskmr3DJ0/p/mcYBTkHn35h+LLm7m4DEvkcULN3NwfhKNT8cp3KHb3tevw+/+ONa79Y1fgyKHU22C6lJuD/71hKQhQkqu2EPJK2Y62ZK8Q8Inp1qBSFxKIQ9Zkv/e/s0DvVpvQRddMA4dPkz3bDC4zcbjZoAnZJNLIuC2c21fEO6X9w7A+38cY2x69VjdhFlkLM3Vw20wpzqu4PipUUD6JS6DPPxaqHztoMtOCwzq+Q/Ur89ItH8/NTIecLPJNpais3vexcXHynIkEm423mapOH0eApvedr88AL975Elj414RbmuwSd0JJsqNgoKggKUCHumVVmxEi4I9BLSJi/v7XNzEP7T/Z2j4sKFow1q62UUGOD8O5ze+yNLzmFLzRMMtpuQRuHe93B+/z8Fdz7U5xwaggc5UK2D6BVAHuaWL+zue38g/atDPaPa0AjR16tfU1CVpurhcJjo3D7VjwJMFd2SsHXJvH9q1+xr8wdEnjQ17+TF3+PhWYKdbmg5j8lRzmfDj1wPd0sXr0nT/ucHNLjVoe2UBGj78YwFwCrbZUhlz75TCzZbB+CUwHmz6OAT3jt398IFfxhgbXj3GJtMim1XCAEc5drpBnfCQgg9MqQKSL2lzyMU0vQ5wcma2t2ZigQ/tf3MYGnTDPkXAZWPvBndu2eYV0bVDgG974Rr82fEnjaq9Atwy1wawUxrXcHBBAQH0KMiFND0yDicIhdfCTz8V1zxdcBo68vXDqEfXF21SdDaDLrp3SuEW17bZeDvk3Nt3XI0/PTGGgzs6Ja9zbQAb2HKrAhzk9oBHzaKTxo1QzYKHs9A5eRdK4Jal5/wMekwz5vGOuWXLYGy2PBrurTuuxp+fHGNU/Z05tyrcsdTRrdEB9XK3AgruqAB4lHsHp9WDoNbMGJ5HOrRsG4bbboLNanJNScVYwLE6Cyy0Gy361ij4fOv2q/EXtWOM5wBupZ6BQm5QwAL2MORmDi5Jz2tmDM8lHVpeJMDNIOcn2GSpucIXT7RkyYY7lJLT25ZtV+KD/rHWcNdLyWOpnxuCAuqglwImYImAS8ffdel5GO52HNwUbBnc/LnfZhtbbBWOBR4nzh2Be9O2K/G/A2ON9Xss0nKA27bHoECqFJAALkvROcAF966ZMSKPdDinfRhouj2VgS0Czpw7rnF3suGmKXooLafO/WXgKWu4g/MGfJ1iqV+qOh+Oq78C5oDXT8/55bHg45oZ9+eSDud0oA85wOlkGj/+Fi/w4Drn5reehtx747Yr8aHAU0allXMD3PrzkfYtVABc7t41xSPySMeWPNwsLZdNronu7XjGPBZnVEnL68O9YesV+Gs0zqh8xclseSz1S/vogQa4XgEBcIuxN5eah+HuaOLcfGrOuzcVQ7wsk5JAscATG9ybtvTFhzzjjXUAt1LPQCG3K6ACeFRqXjN9RAvSqSWFm4JMU3OWnlsti6UB3Bu29MXfeMcb614C53Z72EL9VBRQgTuUSofcm4Th7hSG+6Qwa87G3uKSmLgsplK3YJmGc+4Nm/rib3wAt3LXQEGXK+AUblQzfXge6dSqs8S1+SUxdnqobMbc0Vp3w8FdtfEv+DvfRGPty0fDJ46o7FCLpX4ujwmonkYKcLCZLosx50Y1RcPzSOdWl3Bw82m5yoy5S+F+bnMf/IPxtLHmJYBbo+jO8KaouHc03N3bdEEnT9KUnAebXZKJAi6eCsqvdbsV7o198A+NAO4Mp0Gz5qvBHRwAe0jQubu3uZSD28y5xQspiptZlGSMJe21my1n+8ujTxyp3NgH/wRwK/UKFEoXBZzBPW14Hundris6duyEybhbvKCi2TZUJX0aDu51G3rj6sbPGKt3Q1qu1DVQKA0UcAZ34X/nkT7tebjZkphsQo3/UUGXO/f6qsvxz00mGasA7jQIWqiimgLO4b6qc3dUXU1/ApgthdmtdbtqzC1Py9dWXY6PNJ1krHoRnFstcKCU+xVQgbturbumcFge6d+9O/r+e83grnyuF64+dTLA7f6IhRoqK+AM7qnD8sgAHeFeU9kLH2022Xh2Fzi3cuxAQZcr4AzuKUPzyE29e6BDh37TKy1f89xl+NhpU4yVALfLAxaqp66Ac7iHXNkTHTxIL++t0Zh7zbrL8LHTAW71wIGS7lcA4A6ez716fU/8a7OpxsqdkJa7P2ihhmoKOIN78tA8cse1PdEnn6Sdc9MroUZ+sjfyO2GhizWsXNsTn2xeaKzY9QvsLVeLHCjlegWcwT3pPgr3ZejTT+nv5aVVWm4N96o1PfCJ7GnG8p0At+tjFiqoqIBzuAuu74U++uioyckjrt2hZg33ijU9cC3ArRg0UCw9FHAI9715ZOjNvdC776YN3HQLq/jzvew3wiK/Ffbs6u74ZE4ROHd6RC3UUkkBp3DnkvsG9UbvvfdLuji3GtzLn+2OA78vMip2QFquFDdQKA0UcAj3PblkRH5v9PbbmsFdsbobJrnFRsULR2BCLQ3CFqqoooAzuJ+5J5c8dEcftG/fkXR37khKTmfLK1Z2w+SMYqNiB8CtEjZQJh0UALiDS2ErVnXFgRYzjGUAdzpELdRRSQFncD99Ty4ZVfAX9MYbh/Vy7mUrumLPH2YYy54H51aKGyiUBgo4hPvuXDLqbg3hXrr8Uuz9r5nGUoA7DYIWqqimgDO4J96dSx6/ry967bVqvZwb4FYLFyiVTgo4hLsgl4y9vy965RXN4F5S0QX7zpplLNkOaXk6hS/U1UoBZ3BPoHCPuALt2fOz4Nx0Zxq7AirbpeaKyyyZrXNHz5YvXtIFn3L2bGPJ84dhKQyI0UQBh3DflUsmPHQF2r1bM7jLl12CG501B+DWJKyhGVQBZ3CPL8ghk0ZehXbu/Ekv515UfglufM4cY8l2cG4AQxcFAO7gOvfipZ1x47PnGuUAty6RDe2IwbmnjroaPf/8j5LrlqfxmHvRkk64yTnzjPJt4NxAhS4KOHPucXflkMJHzOAWr12eNhNqBipd1Bn/7tx5xmKAW5fIhnY4dG4K9/TH+6GtW39Q+KXPNIK7rLwTPrXlfIAbkNBIAWfO/dTfcsisMdegTZu+1wvukrJO+PTz5huLwLk1Cu5MbwrAHby22oKFHXHz1guMRVthzJ3pSOjTfmdwj70zh8wbfy2qqvpOL+emcGe1XmCUAdz6xHbGt8Q53KXPXIvWrdMM7vmlHXB2mxKjbAs4d8YzoY0AzuEuebo/qqz8Nh2dm/0IIN16ym8/NRCFO6dNibEQ4NYmtKEhzuAec2cOKZ3SH1Wu1gzueSUX49wLS42Fm8G5AQpdFHAG95N35JDFUwagNWu+0cu5Z8+7GJ/RrtQoBbh1iWxoh8N1bgr3sqIBaOVKzeCeO789bvHnhQA3IKGRAg6d+/YcsmTGdWjV8q/1cu5Zc9vjM9sD3BpFNjTFoXOPvj2HrJhxHVquG9wzZrfDf+xYZpRsgjE3UKGLAs6c+4m/5pAVc65HK5Ye0su5Q3AvMko2VcPFGnSJ7YxvhzO4R9+eTVbNuwEtXawZ3MWz/ozP6rzYKNkIcGc8E9oI4BzuNXNvROXl/9HFuUPr3QC3NhENDalTwBncT9yeTdaW3IjKF2oG9/SZF+Gzu5QbCzaAcwMduijgDO7H/5pN1i8YiBYt+rdezl04/SLcqlu5Md8R3DQI6AUY4Q8UcKMCzuHeWDYQlZRoBve04gtxy65LAG43xijUKUYFHMJ9WzapKr8JLZz/lQ7OHdlfXji9LW7VbSnAHWMYwdvcqIAzuB+7LZtsKb8JzU8vuDFCiJ40wp84Qh/76m5Titrg1j2WGXOr2Jg7nHKTUNpNWPodfh7pSkjL3RjWUKdQ1Eb9eULPPez18PNgdHtIzWP52WTzskFowdwv08G5KXgUbB5uHnAKd8i9C6e3wed3rzDmANzAhTYKOIP70fxssm35zWje7IM6wB1JyycXtsFtelUYc54D59YmtjO+Ic7h3rH8ZjQ7/eBm7k2BFt3bh6bStLzn8iDcwYQmmH6HU25CExku/YbUPOOxSQ8BnMH9SH42eWHVzWh2MXNuejljer1ydlljeu+a3wrj03LZuDty0YapRRfgCy5bacxeL4cbxt3pEc5QS14Bh3DfmkV2PTsYzZz5BQe16+G2+jHAUGo+bdoF+Pxezxqz19MfQfM42F8enniDqAIFXKeAM7hH3ZpFXlo9BBUXf+5muKnK1KlZai1OqvGpeWhSbVpxa9y6x2pjVhTcJjPmQRsXZ8lh1tx1sQ0Vip4xt5ktHzUki7y0fggqLnQ93CLYPOD1x91Tp7f2dO1X6ZuwjP7aQnj5Sxh3W6fm4ODAkhsV4NzbGu7a/x2SFdiz7lZUVPSZ252bh5uNvdlat7jm7UOnnOJD+98f6fn0p9uMmZXVHn+ATapFuzcA7sYAhjqZK+AA7sFZgT0bbkVFUyjcbDLNdWNu5qIy9+YBZxNqkYm1va8N8vhyHzWeWXHYc+w4sR57S9NzcHBAzS0KOBpz1/7P4KzAqxvzUeHkT9PFuZlry9y7/tibTq5VrOqGLu01xRhfcQJ/8xP9wTMOWHHHmingrINhLO6WUM+seghgB0PYcodaEO7XN+ajye6FW3Rtp+4dmj1/Ysx5aOiDM73T1jbyfnCQpiaRNW8WJNZr35kVStDaVCogGog52CE6wv8Pwh4G3kNqRw7OCryxNR9Nnsicm8Y9+11uV/yErwg3fc5mztmkmtWadyRVv+GGFmheWbG3bMeZ3r3/dxwAT2X8wrHjU8DCtYPEULhvyQrs25aPJk78xCQtZxtY6H1KfsKXH/My15al5iLgsl8jMVCrVk3R7r9PwM+/1clY+/JRe8DrbB3S8fiiEd6dMAXqThAxPWmEHioI91s78tG4cR9zE2qy3Wmug1u25m22JZWBTtfAvcjn86F9+x/wfHFkoDFnfbXHz69xc4+j0nS+Z+qtiSes2+CDQAFzBTiouXQ8gDFCp9DQDv4RT3gsXvvAwOZk3858NO5JCjc/S85Sc1c6N3NzPj2nAItni4mnhPKz6V704isDPU1+/6B30orD+NcTnKYCvKaQQyCCAilSoG6cjZC/X5cm/pFDsqU1KZ7SH40eLcLNj7dpOu4a5xbH4Gb7zcUlMhnoXlRe0Q117TPemFBxHH9XTRtpdUJJ+LsRLsWUopCGw3JQh8TwEH+/S5qaw13UH41+9IDFCSM82BR0NikXmZxTVD3WcSv/Pu7sriBkZpNrsjG4CHjo+eix56J7HijyFq42vAe+4mbSYbyt2K9QLCUKhNJ0S7jnzroWjRr5keRMMHZGGHNu+lkpgZu5teyeh5s/oUSWovM72RjoodcGDsxDcxYWeRdub+F99R2Wo5t8GcGYOyWxDAeNrG1HtCD+fl2a+kcOzpHKUzrnGvTQQ2Zw26XkkiU4ixmBOPrHyr3N9p1bAS5uXfWitm1PRdtfnIi3/Ku9UbXnaHg3G6tyrFlHHE2Gt4IClgqEndsC7rLSfujB4R+GnZum4Pw53GJKzjZ48am5chfEA4gIt+jiqim6FfAYNW1qoH37H/b8ggahY7+xxvL70pUbCwVBgaQq4Aml5aRFcwOdd9Yp0mMtLrsa3T/sg/CkmQi2OJHGp+XBj3ZS/3jg5mE2S9Nlp4WKp4fycMseh8r375+NDMOL/H4cdHD+Fmx2+LXo1sfbPidaQtnMUqBu5xndoFJ3wziAvN4AYveG4UehWwD5fH60efOP6Ntv6TCTX/YSr74i28CSUritxt92Ls6gtroXx/LsOTsuAxmAzizIGrq1NL54B+VTZua0DE42hpaBLK5pq8ySN6hzi+5tB7i4TMZvV5WBLf5fzAR4sGXDhIbueDie/grwcDPYrABn0PLubPbYbMspfxxlhRPlcuLniC7KQ8kDbgY72wDDwy26P20k796yLxZlIaAgKKCogB3c/BKW6OD8bDgPPV+Ofz9LxR2vcctcV7F90mJ2gPMz6LLZdCtXF8Fm7+e/RMC54+k9eG+sCogz2fwkGA+tDHTx/7K1bR5wR3VMlHOzg6oCLoNVNqY2G2fzcJuNtRPdNkfCQuGMUMBs7M2A59NsM9AZ0OKXggi1o/F2op07FsDN3NzMqcX0XubWAHVGcJWSRvKxJY6DrcbfZqm6+Lpsq2lM4+1kwa0yySY6L/9cBrAZ1Ox9Zm0B0FPCQMYcVHRucYxsNtHGO7tVKs4+j79XFjeZwW+XojMgrUC3+x8PtawtyWyfsshQUFsF7OCmDWcbr2T7xFXBdh3cdm4qmwyzgpn/MpA9lkUQwK0tV65omDgOFlNzKydXScFlXx7KDW+I4LdyVHHMLAJv9gUgc+yGaIuysFAw4xSwcnEZ5OJrTDCzMbYrJtTMetUsTRcdXjaOFmfEZTPkAHfG8eS6BsvAtHJzMd1OGNhmaXMyFbMbF1vNfsv+l4o2JFMf+Gw9FLCD3Axqs7G1Y9dOFRhmDmsGr8zZ+RAAx9YDCJ1aYTYWt4I6oWCnCm6741ql72IAANg6IaFfW8wc1wp+XoWYHJt9QKrhUDm+itPrFxbQIl0UUAVcbG9cYNs5aEOLqwI6OHdD9wocLx4FnALqtLxl3WIBKp7GxvredKlnrO2D92WWAgmF2Ew6gCazggpam0EKANwZ1NnQ1MxSAODOrP6G1maQAgB3BnU2NDWzFAC4M6u/obUZpADAnUGdDU3NLAUA7szqb2htBikAcGdQZ0NTM0sBgDuz+htam0EK/D/64St2Tpr+JAAAAABJRU5ErkJggg=='
          var str = `<div style = "background:url(${aaa}) no-repeat;background-size: 100% 100%;height:159px;min-width:220px;color:#FFFFFF;position:relative">
                <div style='padding:0 40px;position:relative;top:50px;'>
                  <div style='display:flex;justify-content: space-between;align-items: center;'>
                    <div>攻击源地域：</div>
                    <div>${params.data.item.name}</div>
                  </div>
                  <div style='display:flex;justify-content: space-between;align-items: center;'>
                    <div>被攻击地域：</div>
                    <div>${params.data.item.dest}</div>
                  </div>
                  <div style='display:flex;justify-content: space-between;align-items: center;'>
                    <div>攻击次数：</div>
                    <div>${bigNumberTransform(params.data.item.count)}次</div>
                  </div>
                </div>
              </div>`;
          return str;
        },
      },
    },
  ],
};
const initChart = () => {
  registerMap("World", worldMap);
  // @ts-ignore
  options.tooltip!.formatter = unref(tooltipFormatter);
  if(unref(visualMapShow)) {
    options.visualMap = { //左下角的渐变颜色条
      seriesIndex:0,
      min: unref(min),
      max: unref(max),
      left: 'left',
      bottom: 20,
      text: ['高','低'],
      textStyle: {
        color: "#fff",
        fontSize: 16
      },
      orient:"horizontal", 
      inRange: {
          color: ['rgba(0,249,255,.3)', 'rgba(0,249,255,1)']
      },
      hoverLink: false,
      show:true
    }
    options.series.forEach((item)=>{
      if(item.type == 'effectScatter') {
        item.symbol =  "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAAXNSR0IArs4c6QAAAwBJREFUOE+FlEtonVUUhdfa+7+5eRFroUHBkoq0dqSFglBxkIGgKIJtcrm5qU5EnDhxVooIQhEpzkoVkQ4EITYmFcSBj4EEFAdKfdCJHYiKAdNGcpNKHs1/zl7y39Jq2zT3jM457POxz157baLL0uhogd09dX7w5Wq3WN4aIICYGDuYyQNSjBhZRABGClRbwC/O+jecmmrf+vYmmCaPjCTZJEI1A1YArUtKIATSKNQhDMI5ZOT3mJr9lEBch96AbTaePehWOwzGZREriLgKM0JiluhmkSPkDkdYP4lhBK/YXb+9y/fOlxWwA1Oz+UBSfsGo+WRY9ggF2QtxkNBuGOuWdSkTi4LW3VQC3sfAvQL/LqZnz3RgAiy1xo+ZtJoUlx1AhO42L54BMAqir/MNqSrnr0R8JOkigHWQA4TtMegTnj33IzcnG494jieF+D1LG5Tt8MJeFvDQlupJVyWcCsTPPWZlRB4GiwE/O3uSqTX+okv9CCxkRg20J0A+v10bEPgrR3pdYNtZDBB5rzGdYtkce9WgqhaV1IM0Pybgwa49pTiZZD85stNsj9E+Z54YPyHhj6x0xcOGUOMbAIe7wQCcyTl95e5gYMSkb7fIzI4L3NsNxtBbCfyhk1klAvEFNXnkpQj2KrCAqmZmTwNsbQsTFkPxmkFLbtYf0j4rcJplq3HIpMcrNSHbIGInzF4RsP8OwJLSaSnOQ1YS2AXXkH/48ZtUo+HJ83ETl0VbzBFWGHaKGAP4GIDaf3bRnxCnJVy41mcxQGDEzD/j1Mx31xzQGtsfwHMQ5iUuA7kyXB9oO0y6H2Rd0CUT5pNizeGbcPRRvAfCPz49+84NO1WbcmL8UaOesk6/2UqOMlU2zAyrXIGgYBZgGGT9VOwKx2ZRX3qb789t3ASrDhvNw/tq7s1IISNWBFsHckY1fkBjoAcWg1XGkl3whcVznJtLt02N6xdVDVHgUCgeDuI+kyJEmcEhrcrsopf8mjMzC9vOs63U09GjQ1hb60W7vfT/LLaK/Rem3YhKp4uO4wAAAABJRU5ErkJggg==";
        item.symbolSize = [12,12]
      }
    })
  }
  setOptions(options);
};
const openAutoTooltip = () => {
  const instance = getInstance();
  useEchartsAutoTooltip(instance, options);
};
watch(
  () => chartData,
  (val, preVal) => {
    initChart();
  }
);
onMounted(() => {
  initChart();
});
</script>
<style lang="scss" scoped>
.echart-ChinaMap {
  width: 100%;
  height: 100%;
  .echart-ChinaMap1 {
    width: 100%;
    height: 100%;
  }
}
</style>
