<template>
  <div class="mapBox">
    <div class="select">搜索框</div>
    <div style="width: 100%; height: 100%" ref="mapdom" id="map-container" class="map-container"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import china from "./ChinaMap.json";
let mapdom = ref(null);
// let option:any
var geoCoordMap = {
  北京: [116.46, 39.92],
  成都: [104.06, 30.67],
  杭州: [120.19, 30.26],
  济南: [117, 36.65],
  福州: [119.3, 26.08],
  上海: [121.48, 31.22],
  重庆: [106.54, 29.59],
  深圳: [114.07, 22.62],
  宁波: [121.56, 29.86],
  南昌: [115.89, 28.68],
  广州: [113.23, 23.16],
  厦门: [118.1, 24.46],
  太原: [112.53, 37.87],
  哈尔滨: [126.63, 45.75],
  西安: [108.95, 34.27],
  沈阳: [123.38, 41.8],
  大连: [121.62, 38.92],
  海口: [110.35, 20.02],
  长沙: [113, 28.21],
  银川: [106.27, 38.47],
  石家庄: [114.48, 38.03],
  昆明: [102.73, 25.04],
  武汉: [114.31, 30.52],
  呼和浩特: [111.65, 40.82],
  天津: [117.2, 39.13],
  贵阳: [106.71, 26.57],
  兰州: [103.73, 36.03],
  青岛: [120.33, 36.07],
  南京: [118.78, 32.04],
  长春: [125.35, 43.88],
  郑州: [113.65, 34.76],
  西宁: [101.74, 36.56],
  合肥: [117.27, 31.86],
  南宁: [108.33, 22.84],
  拉萨: [91.11, 29.97],
  乌鲁木齐: [87.68, 43.77]
};
var data = [
  { name: "ss", value: 88.8 },
  { name: "成都", value: 88.7 },
  { name: "厦门", value: 88.01 },
  { name: "杭州", value: 87.9 },
  { name: "济南", value: 87.48 },
  { name: "福州", value: 87.47 },
  { name: "上海", value: 87.43 },
  { name: "重庆", value: 87.38 },
  { name: "深圳", value: 87.37 },
  { name: "昆明", value: 87.26 },
  { name: "宁波", value: 87.1 },
  { name: "南昌", value: 86.06 },
  { name: "广州", value: 85.89 },
  { name: "太原", value: 84.45 },
  { name: "哈尔滨", value: 83.96 },
  { name: "西安", value: 83.24 },
  { name: "沈阳", value: 82.96 },
  { name: "大连", value: 82.94 },
  { name: "海口", value: 82.88 },
  { name: "长沙", value: 82.85 },
  { name: "银川", value: 82.49 },
  { name: "石家庄", value: 82.24 },
  { name: "武汉", value: 81.68 },
  { name: "呼和浩特", value: 81.61 },
  { name: "天津", value: 80.99 },
  { name: "贵阳", value: 80.71 },
  { name: "兰州", value: 80.69 },
  { name: "南京", value: 80.65 },
  { name: "青岛", value: 80.61 },
  { name: "长春", value: 80.1 },
  { name: "郑州", value: 79.56 },
  { name: "西宁", value: 79.07 },
  { name: "南宁", value: 78.2 },
  { name: "合肥", value: 77.29 },
  { name: "乌鲁木齐", value: 76.91 },
  { name: "拉萨", value: 76.01 }
];
var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      });
    }
  }
  return res;
};
onMounted(() => {
  let myChart = echarts.init(mapdom.value);
  echarts.registerMap("china", china as any);
  //城市经纬度
  let option: any;
  option = {
    // toolbox: {
    //   show: true,
    //   feature: {
    //     dataView: {
    //       show: true,
    //       readOnly: true
    //     },
    //     restore: {
    //       show: true
    //     },
    //     saveAsImage: {
    //       show: true
    //     }
    //   },
    //   top: 40,
    //   right: 40
    // },
    tooltip: {
      // trigger: "item",
      // formatter: "{b}<br/>{c} 111(p / km2)"
    },
    title: {
      //text: '2020年全国大厅监测得分',
      top: 40,
      //subtext: 'from 零点有数',
      left: "center",
      textStyle: {
        color: "#ffffff",
        fontSize: 30
      },
      subtextStyle: {
        fontSize: 20
      }
    },
    legend: {
      left: "left",
      data: ["强", "中", "弱"],
      textStyle: {
        color: "#ccc"
      }
    },
    // backgroundColor: {
    //   type: 'linear',
    //   x: 0,
    //   y: 0,
    //   x2: 1,
    //   y2: 1,
    //   colorStops: [{
    //     offset: 0, color: '#0f2c70' // 0% 处的颜色
    //   }, {
    //     offset: 1, color: '#091732' // 100% 处的颜色
    //   }],
    //   globalCoord: false // 缺省为 false
    // },
    // visualMap: {
    //   min: 75,
    //   max: 90,
    //   left: 40,
    //   bottom: 40,
    //   calculable: false,
    //   text: ['高', '低'],
    //   inRange: {
    //     color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)']
    //   },
    //   textStyle: {
    //     color: '#ffffff',
    //     fontSize: 10
    //   }
    // },
    geo: {
      map: "china",
      show: true,
      roam: true,
      label: {
        emphasis: {
          show: true
        }
      },
      itemStyle: {
        normal: {
          areaColor: "#091632",
          borderColor: "#1773c3",
          shadowColor: "#1773c3",
          shadowBlur: 20
        }
      }
    },
    series: [
      {
        type: "map",
        map: "china",
        geoIndex: 1,
        aspectScale: 0.75, //长宽比
        showLegendSymbol: true, // 存在legend时显示
        label: {
          color: "#fff",
          fontSize: 10,
          normal: {
            show: false
          },
          emphasis: {
            show: false,
            textStyle: {
              color: "#fff"
            }
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: "#031525",
            borderColor: "#3B5077",
            borderWidth: 1.5
          },
          emphasis: {
            areaColor: "#0f2c70"
          }
        }
      },
      {
        name: "城市",
        type: "scatter",
        coordinateSystem: "geo",
        data: convertData(data),
        symbolSize: function (val) {
          return val[2] / 8;
        },
        label: {
          normal: {
            formatter: "{b}",
            position: "bottom",
            textStyle: {
              fontSize: 10,
              fontWeight: "bolder",
              color: "#ffffff"
            },
            show: true
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: "#ddb926"
          }
        }
      }
    ],
    layoutCenter: ["50%", "55%"],
    layoutSize: 550
  };
  myChart.setOption(option);

  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>

<style scoped>
.mapBox {
  width: 100%;
  height: 100%;
  position: relative;
  /* background: green; */
}

.mapBox .select {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>
