<template>
  <!-- <div class="map-ball"></div> -->
  <div class="ditrict-chart">
    <h1>50283份简历</h1>
    <div class="echarts" id="nanshanDistrict"></div>
    <el-descriptions title="" direction="vertical" :column="5" border>
      <el-descriptions-item align="center" label="网格员"
        >4358人</el-descriptions-item
      >
      <el-descriptions-item align="center" label="海外引进人才"
        >988人</el-descriptions-item
      >
      <el-descriptions-item align="center" label="企业中高层管理人员"
        >1999人</el-descriptions-item
      >
      <el-descriptions-item align="center" label="医生"
        >6973人</el-descriptions-item
      >
      <el-descriptions-item align="center" label="教师"
        >2938人</el-descriptions-item
      >
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import JSON from "../../../Json/NanshanDistrict.json";
import * as turf from "@turf/turf";

function transFormGeoJson(map: any) {
  const multiPolygon = turf.multiPolygon(
    map.geometry.geometries.map((geometry: any) => {
      return geometry.coordinates;
    })
  );
  multiPolygon.properties = map.properties;
  return multiPolygon;
}

function toSplit(map: any) {
  let tempArr = map.features.map((i: any) => {
    if (i.geometry.type != "GeometryCollection") {
      return i;
    } else {
      return transFormGeoJson(i);
    }
  });
  return turf.featureCollection(tempArr);
}

const init = () => {
  let myChart = echarts.init(document.getElementById("nanshanDistrict") as any);
  let map = eval(JSON as any);
  map = toSplit(map);
  echarts.registerMap("南山区", map as any, {});
  let option = {
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{c} (p / km2)",
    },
    series: [
      {
        name: "南山区地图",
        type: "map",
        mapType: "南山区", // 自定义扩展图表类型
        label: {
          show: true,
        },
        data: [
          { name: "南山街道", value: 50 },
          { name: "南头街道", value: 100 },
          { name: "前海合作区", value: 150 },
          { name: "沙河街道", value: 200 },
          { name: "蛇口街道", value: 250 },
          { name: "桃源街道", value: 300 },
          { name: "西丽街道", value: 350 },
          { name: "粤海街道", value: 400 },
          { name: "招商街道", value: 800 },
        ],
        nameMap: {
          南山街道: "南山街道",
          南头街道: "南头街道",
          前海合作区: "前海合作区",
          沙河街道: "沙河街道",
          蛇口街道: "蛇口街道",
          桃源街道: "桃源街道",
          西丽街道: "西丽街道",
          粤海街道: "粤海街道",
          招商街道: "招商街道",
        },
      },
    ],
  };
  myChart.setOption(option);
};

defineExpose({
  init,
});
</script>

<style lang="scss" scoped>
.ditrict-chart {
  display: flex;
  flex-direction: column;

  h1 {
    width: 100%;
    height: 50px;
    color: #fff;
    text-align: center;
    margin: 0;
  }
  .el-descriptions {
    width: 100%;
    flex: 1;
  }
  .echarts {
    width: 968px;
    height: 580px;
  }
}
</style>
