<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 mapData = [{
          name: "北京",
          devicesCount: 100, //总数
          feiyue1: 40, //肺悦1个数
          feiyue2: 60, //肺悦2个数
          value: 10, //使用个数
          devicesUseLv: '40%', //使用率
      },
      {
          name: "天津",
          devicesCount: 50,
          feiyue1: 40,
          feiyue2: 60,
          value: 20,
          devicesUseLv: '20%',
      },
      {
          name: "上海",
          devicesCount: 80,
          feiyue1: 40,
          feiyue2: 60,
          value: 30,
          devicesUseLv: '20%',
      },
      {
          name: "重庆",
          devicesCount: 90,
          feiyue1: 40,
          feiyue2: 60,
          value: 40,
          devicesUseLv: '20%',
      },
      {
          name: "河北",
          devicesCount: 130,
          feiyue1: 40,
          feiyue2: 60,
          value: 50,
          devicesUseLv: '20%',
      },
      {
          name: "河南",
          devicesCount: 160,
          feiyue1: 40,
          feiyue2: 60,
          value: 80,
          devicesUseLv: '20%',
      },
      {
          name: "云南",
          devicesCount: 110,
          feiyue1: 40,
          feiyue2: 60,
          value: 40,
          devicesUseLv: '20%',
      },
      {
          name: "辽宁",
          devicesCount: 320,
          feiyue1: 40,
          feiyue2: 60,
          value: 120,
          devicesUseLv: '20%',
      },
      {
          name: "黑龙江",
          devicesCount: 80,
          feiyue1: 40,
          feiyue2: 60,
          value: 40,
          devicesUseLv: '20%',
      },
      {
          name: "湖南",
          devicesCount: 60,
          feiyue1: 40,
          feiyue2: 60,
          value: 10,
          devicesUseLv: '20%',
      },
      {
          name: "安徽",
          devicesCount: 300,
          feiyue1: 40,
          feiyue2: 60,
          value: 270,
          devicesUseLv: '20%',
      },
      {
          name: "山东",
          devicesCount: 50,
          feiyue1: 40,
          feiyue2: 60,
          value: 9,
          devicesUseLv: '20%',
      },
      {
          name: "新疆",
          devicesCount: 40,
          feiyue1: 40,
          feiyue2: 60,
          value: 0,
          devicesUseLv: '20%',
      },
      {
          name: "江苏",
          devicesCount: 240,
          feiyue1: 40,
          feiyue2: 60,
          value: 40,
          devicesUseLv: '20%',
      },
      {
          name: "浙江",
          devicesCount: 450,
          feiyue1: 40,
          feiyue2: 60,
          value: 300,
          devicesUseLv: '20%',
      },
      {
          name: "江西",
          devicesCount: 20,
          feiyue1: 40,
          feiyue2: 60,
          value: 4,
          devicesUseLv: '20%',
      },
      {
          name: "湖北",
          devicesCount: 50,
          feiyue1: 40,
          feiyue2: 60,
          value: 40,
          devicesUseLv: '20%',
      },
      {
          name: "广西",
          devicesCount: 10,
          feiyue1: 40,
          feiyue2: 60,
          value: 0,
          devicesUseLv: '20%',
      },
      {
          name: "甘肃",
          devicesCount: 20,
          feiyue1: 40,
          feiyue2: 60,
          value: 1,
          devicesUseLv: '20%',
      },
      {
          name: "山西",
          devicesCount: 230,
          feiyue1: 40,
          feiyue2: 60,
          value: 140,
          devicesUseLv: '20%',
      },
      {
          name: "内蒙古",
          devicesCount: 200,
          feiyue1: 40,
          feiyue2: 60,
          value: 0,
          devicesUseLv: '20%',
      },
      {
          name: "陕西",
          devicesCount: 30,
          feiyue1: 40,
          feiyue2: 60,
          value: 40,
          devicesUseLv: '20%',
      },
      {
          name: "吉林",
          devicesCount: 77,
          feiyue1: 40,
          feiyue2: 60,
          value: 40,
          devicesUseLv: '20%',
      },
      {
          name: "福建",
          devicesCount: 55,
          feiyue1: 40,
          feiyue2: 60,
          value: 8,
          devicesUseLv: '20%',
      },
      {
          name: "贵州",
          devicesCount: 55,
          feiyue1: 40,
          feiyue2: 60,
          value: 7,
          devicesUseLv: '20%',
      },
      {
          name: "广东省",
          devicesCount: 44,
          feiyue1: 40,
          feiyue2: 60,
          value: 6,
          devicesUseLv: '20%',
      },
      {
          name: "青海",
          devicesCount: 33,
          feiyue1: 40,
          feiyue2: 60,
          value: 5,
          devicesUseLv: '20%',
      },
      {
          name: "西藏",
          devicesCount: 10,
          feiyue1: 40,
          feiyue2: 60,
          value: 4,
          devicesUseLv: '20%',
      },
      {
          name: "四川",
          devicesCount: 99,
          feiyue1: 40,
          feiyue2: 60,
          value: 20,
          devicesUseLv: '20%',
      },
      {
          name: "宁夏",
          devicesCount: 145,
          feiyue1: 40,
          feiyue2: 60,
          value: 40,
          devicesUseLv: '20%',
      },
      {
          name: "海南",
          devicesCount: 122,
          feiyue1: 40,
          feiyue2: 60,
          value: 90,
          devicesUseLv: '20%',
      },
      {
          name: "台湾",
          devicesCount: 10,
          feiyue1: 4,
          feiyue2: 6,
          value: 0,
          devicesUseLv: '20%',
      },
      {
          name: "香港",
          devicesCount: 0,
          feiyue1: 0,
          feiyue2: 0,
          value: 0,
          devicesUseLv: '0%',
      },
      {
          name: "澳门",
          devicesCount: 0,
          feiyue1: 0,
          feiyue2: 0,
          value: 0,
          devicesUseLv: '0%',
      }
  ];
const option: ECOption = {
  tooltip: {
        show: true,
        formatter: function(params) {
            if(params.value){
                return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '个&nbsp;&nbsp;';
            }else{
                return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;0个&nbsp;&nbsp;';
            }
        }
    },
    visualMap: {
        min: 0,
        left: 26,
        bottom: 40,
        showLabel: !0,
        text: ["高", "低"],
        pieces: [{
            gt: 200,
            label: "1 - 9 人",
            color: "#8616fe"
        }, {
            gt: 100,
            lt: 200,
            label: "疑似",
            color: "#6b1dfd"
        }, {
            value: 0,
            color: "rbga(255, 255, 255, 0.5)"
        }],
        show: !0
    },
    geo: {
      map: 'china',
      show: true,
      roam: false,
      label: {
          emphasis: {
              show: false
          },
          normal: {
              show: false
          }
      },
      itemStyle: {
          normal: {
              show: false
          }
      }
  },
  series: [
  {
        name: "确诊病例",
        type: "map",
        map: 'china',
        aspectScale: 0.75,
        zoom:1.3,
        label: {
            normal: {
                formatter: function(para) {
                    return '{name|' + para.name + '}'
                },
                rich: {
                    cnNum: {
                        fontSize: 11,
                        color: '#333333',
                        align: 'center',
                    },
                    name: {
                        fontSize: 11,
                        color: '#333333',
                        align: 'center',
                        lineHeight: 20,
                    },
                },
                //formatter: '{b}',
                color: '#333333',
                show: true
            },
            emphasis: {
                show: true,
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#D9EEFF',
                borderColor: '#fff',
                borderWidth: 1,
            },
            emphasis: {
                areaColor: '#FFAE00',
            }
        },
        data: mapData
    }
  ]
};
</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>
