<template>
  <div id="map" ref="areaRankingAll"></div>
</template>
<script>
import geoList from "./geo"
import * as echarts from "echarts"
import hospital from "./hospital"
import china from "./china.json"
// import allCode from "./allCode.json"
// import data from "./data"
export default {
  data() {
    return {
      echart: null,
      //线上请求JSON文件数据地址
      // publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
      //allCode 区域行政编码信息
      // allCode: allCode,
      locate: [
        {
          name: "安徽省",
          value: 50,
        },
      ],
      hospital: hospital,
    }
  },
  props: {
    mapData: {
      type: Array,
    },
  },
  watch: {
    mapData(v) {
      this.initChart()
    },
  },
  mounted() {
    this.initChart() //初始化地图
  },
  methods: {
    initEcharts(geoJson, name, chart) {
      // console.log(JSON.stringify(geoJson))
      // let handleLocate = (arr) => {
      //   for
      // }
      // 处理data
      let viewHospital = []
      for (let i = 0; i < this.mapData.length; i++) {
        let obj = {}
        this.hospital.forEach((e) => {
          if (e.name == this.mapData[i].name) {
            obj = e
            obj.value = this.mapData[i].value
            viewHospital.push(obj)
          }
        })
      }

      echarts.registerMap(name, geoJson)
      let option = {
        title: {
          text: "", // 地图名称
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            let str =
              params.value === 0 || params.value
                ? params.name + ":" + params.value
                : params.name
            return str
          },
          // textStyle: { fontSize: 14, fontFamily: "fzzz", color: "#fff" },
          // backgroundColor: "rgba(0,0,0,0.3)",
          // borderColor: "rgba(0,0,0,0.3)",
        },
        geo: {
          show: true,
          map: name,
          // roam: true,
          zoom: 1.2,
          center: [105, 36],
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#2197FF",
              borderColor: "#9DCCF5",
              borderWidth: 1,
            },
            emphasis: {
              areaColor: "#4E68FF", //悬浮背景
            },
          },
        },
        series: [
          // 设置地图样式
          {
            type: "map",
            map: "china",
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#FFFFFF",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
            animation: false,
            data: [],
          },
          {
            type: "lines",
            z: 3,
            coordinateSystem: "geo",
            symbol: "circle",
            symbolSize: [6, 0],
            // color: "#17A597",
            opacity: 1,
            // polyline: true,
            label: {
              show: true,
              position: "end",
              formatter: `{value|{c}} {title|{b}} `,
              rich: {
                title: {
                  align: "center",
                  fontSize: 14,
                  color: "#fff",
                },
                value: {
                  fontSize: 14,
                  align: "center",
                  color: "#3DF2CD",
                  backgroundColor: "rgba(61,244,206,0.1)",
                  width: 64,
                  height: 20,
                  lineHeight: 20,
                  borderRadius: [4, 4, 0, 0],
                },
              },
            },
            lineStyle: {
              type: "solid",
              opacity: 1,
              color: "#A6D5FF",
              curveness: 0.1,
            },
            data: viewHospital,
          },
        ],
      }
      chart.setOption(option, true) //加个true解决下钻的视角偏移
      chart.off("click")
      window.addEventListener(
        "resize",
        () => {
          window.onresize = this.echart.resize()
        },
        false
      )
    },
    //带头函数-初始化
    initChart() {
      let chart = echarts.init(this.$refs.areaRankingAll)
      this.echart = chart
      this.initEcharts(china, "中国", chart)
    },
  },
}
</script>
<style lang="scss" scoped></style>