<template>
  <div>
    <div id="mapChart" style="width: 100%; height: 100%;display: flex;justify-content: center;"></div>
  </div>
</template>

<script setup>
import chinaJson from "@/utils/china.json";
import * as echarts from 'echarts';
const myChart = ref()
const getMapChart = (data) => {
  data.forEach((item) => {
    item.value = item?.num1 + item?.num2 + item?.num3
  })
  myChart.value = echarts.init(document.getElementById("mapChart"));
  // 注册默认全国地图的json，小写的china
  echarts.registerMap("china", chinaJson);
  let option = {
    myChart: null,
    mapName: "china",
    tooltip: {
      trigger: "item",
      borderWidth: 0, //去掉白色边框
      backgroundColor: 'rgba(0, 0, 0, .5)', //tooltip背景色
      borderColor: '#2BEDF6', //tooltip边框颜色
      borderWidth: 0, //去掉白色边框
      formatter: function (params) { // 格式化函数，用于自定义 tooltip 的内容
        var html = '<div style="width:180px;background:rgba(0, 0, 0, .5); font-size: 20px;">';
        html += '<span style="display:block;width:100%;text-align:left;padding:10px 10px 5px 14px; color: #ffffff;border-bottom:1px solid #fff;">' + (params.name) + '</span>'; // 显示名称
        html += '<span style="margin:3px 0 0 0;padding:20px 0 5px 14px ;display:block;width:100%;color: rgba(255, 255, 255, 0.68);font-size: 16px;">' + '统招本科：' + (params.data?.num3 || 0) + '</span>'; // 显示人数
        html += '<span style="margin:0;padding:5px 0 5px 14px ;display:block;width:100%;padding-left:14px;color: rgba(255, 255, 255, 0.68);font-size: 16px;">' + '统招专科：' + (params.data?.num1 || 0) + '</span>'; // 显示人数
        // html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">'+'统招专升本：' + (params.data.num2 || 0) + '</span>'; // 显示人数
        // if (params.num2) {
        html += '<span style="margin:0;padding:5px 0 20px 14px;display:block;width:100%;color: rgba(255, 255, 255, 0.68);font-size: 16px;">' + '统招专升本：' + (params.data?.num2 || 0) + '</span>';
        // }
        html += '</div>';
        return html;
      }
    },
    visualMap: {
      min: 0,
      max: 100000,
      left: 26,
      bottom: 0,
      showLabel: true,
      selectedMode: false,
      textStyle: {
        color: "#fff"
      },
      pieces: [{
        gte: 200,
        lte: 10000,
        label: ">200人",
        color: "#0145b3",

      },
      {
        gte: 100,
        lte: 200,
        label: "100 - 200人",
        color: "#024fcc"
      },
      {
        gte: 80,
        lte: 100,
        label: "80 - 100人",
        color: "#0263ff"
      },
      {
        gte: 60,
        lte: 80,
        label: "60 - 80人",
        color: "#1b73ff"
      }, {
        gte: 40,
        lt: 60,
        label: "40 - 60人",
        color: "#4e92ff"
      }, {
        gte: 20,
        lt: 40,
        label: "20 - 40人",
        color: "#81b1ff"
      },{
        gte: 0,
        lt: 20,
        label: "0 - 20人",
        color: "#b3d0ff"
      }
    ],
      show: true
    },
    geo: {
      map: "china",
      zoom: 1.25,
      roam: false, //放大缩小地图、可拖拽
      label: {
        normal: {
          show: true, //省份名展示
          fontSize: "12", //省份字体大小
          color: "#FFFFFF", //省份字体颜色
        },
        emphasis: {
          show: true,
          textStyle: {
            color: "white", //鼠标移入省份字体颜色变化
            fontSize: "14px", //鼠标移入省份字体大小变化
          },
        },
      },
      itemStyle: {
        borderColor: "#aaaaaa", //地图边框颜色
        // areaColor: "#b4d9f7", //地图背景颜色
        areaColor: {
          type: 'linear-gradient',
          x: 0,
          y: 1000,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0.5,
              color: '#b3d0ff', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#b3d0ff', // 100% 处的颜色
            },
          ],
          global: true, // 缺省为 false
        },
        borderWidth: 1,
        emphasis: {
          show: true,
          areaColor: "#0063ff", //鼠标放到地图上显示的颜色
          borderColor: "#6beaf3",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 10,
          borderWidth: 2,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
      //点击省份后背景颜色改变
      select: {
        itemStyle: {
          // color: "yellow",
          areaColor: "rgba(0, 0, 0, 0.5)", //点击省份后背景颜色改变
        },
      },
    },
    series: [
      {
        type: "map",
        map: "中国",
        mapType: "china",
        geoIndex: 0, // 解决设置geo后地图重影问题
        zoom: 1.25,
        silent: false,
        selectedMode: false,
        itemStyle: {
          areaColor: 'white' // 这里使用了两个颜色值来表示渐变色
        },
        data: data,

        // data:[
        //   {name: '北京', value1: 10,value:5,value:6},
        //   {name: '上海', value: 20},
        //   {name: '广东', value: 30},
        //   {name: '浙江', value: 40},
        //   {name: '江苏', value: 50}
        // ]
      },
      {
        //绘制一个新地图
        type: 'map',
        map: 'china',
        zoom: 1.25,
        // center: [105.194115019531, 35.582111640625],
        z: -1,
        aspectScale: 0.75, //
        itemStyle: {
          normal: {
            areaColor: '#0079bb',
            borderColor: '#0061f4',
            borderWidth: '2',
            shadowColor: '#33434f',
            shadowOffsetX: 0,
            shadowOffsetY: 20,
          },
        },
      }
    ],
  };
  option && myChart.value.setOption(option);
}


// const resize = () => {
//   myChart.value.resize();
// }
onMounted(() => {
  // getMapChart();
  // window.addEventListener('resize', () => { resize(); getRem(1700, 100) })
})

onBeforeUnmount(() => {
  // window.removeEventListener('resize', () => { resize() })
})
defineExpose({
  getMapChart
})
</script>
<style></style>