<template>
  <!-- 中国地图 -->
  <div class="map-ball"></div>
  <div id="mapChart" class="echarts">
    <ECharts :option="option" :resize="false" />
  </div>
</template>

<script setup lang="ts">
import echarts, { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import mapJson from "../assets/china.json";

echarts.registerMap("china", mapJson as Parameters<typeof echarts.registerMap>[1]);

var geoCoordMap = {
    台湾: [121.5135, 25.0308],
    哈尔滨: [127.9688, 45.368],
    内蒙古: [110.3467, 41.4899],
    吉林: [125.8154, 44.2584],
    北京市: [116.4551, 40.2539],
    沈阳: [123.1238, 42.1216],
    石家庄: [114.4995, 38.1006],
    天津: [117.4219, 39.4189],
    山西: [112.3352, 37.9413],
    西安: [109.1162, 34.2004],
    甘肃: [103.5901, 36.3043],
    宁夏: [106.3586, 38.1775],
    青海: [101.4038, 36.8207],
    新疆: [87.9236, 43.5883],
    西藏: [91.11, 29.97],
    成都: [103.9526, 30.7617],
    重庆: [108.384366, 30.439702],
    青岛: [117.1582, 36.8701],
    河南: [113.4668, 34.6234],
    江苏: [118.8062, 31.9208],
    安徽: [117.29, 32.0581],
    武汉: [114.3896, 30.6628],
    浙江: [119.5313, 29.8773],
    福州: [119.4543, 25.9222],
    江西: [116.0046, 28.6633],
    湖南: [113.0823, 28.2568],
    贵州: [106.6992, 26.7682],
    云南: [102.9199, 25.4663],
    广州: [113.12244, 23.009505],
    广西: [108.479, 23.1152],
    海南: [110.3893, 19.8516],
    上海: [121.4648, 31.2891],
  };

  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;
};

  var data = [
    {name:"北京市",value:300},
    {name:"石家庄",value:300},
    {name:"沈阳",value:300},
    {name:"哈尔滨",value:300},
    {name:"青岛",value:100},
    {name:"成都",value:200},
    {name:"武汉",value:250},
    {name:"西安",value:270},
    {name:"广州",value:300},
    {name:"福州",value:300}
    ];
const option: ECOption = {
  tooltip: {
    trigger: "item",
    formatter: function (params, ticket, callback) {
      if (params.seriesType == "effectScatter") {
        console.log('params', params)
          return params.data.name + "："
           + params.data.name + '调解中心' + '<br />'
           + '案件总数：' + params.data.value[2] + '<br />'
            + '案件总金额：' + params.data.value[2];
        } else {
        return params.name;
      }
    }
  },
  grid: {
    left: "0px",
    right: "80px",
    top: "10px",
    bottom: "10px"
  },
  geo: {
    map: "china",
    label: {
      emphasis: {
        show: false,
        color: "#fff"
      },
      normal: {
        show: false,
        color: "#fff"
      },
    },
    roam: true,
    //   放大我们的地图
    zoom: 1.5,
    itemStyle: {
      normal: {
        areaColor: "rgba(43, 196, 243, 0.42)",
        borderColor: "rgba(43, 196, 243, 1)",
        borderWidth: 1
      },
      emphasis: {
        areaColor: "#2B91B7"
      }
    }
  },
  series: [
    {
        name: '散点',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(data),
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
                fontSize: 16,
                color: '#fff'
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#fff'
            }
        }
    },
    {
      name: 'Top 5',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: convertData(data.sort(function(a, b) {
          return b.value - a.value;
      })),
      symbolSize: function(val) {
          return val[2] / 10;
      },
      showEffectOn: 'render',
      rippleEffect: {
          brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
          normal: {
              formatter: '{b}',
              position: 'left',
              show: false
          }
      },
      itemStyle: {
          normal: {
              color: '#fff',
              shadowBlur: 10,
              shadowColor: '#fff'
          }
      },
      zlevel: 1
    }
  ]
};
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
.map-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  img {
    width: 500px;
    height: 500px;
  }
}
</style>
