<template>
  <div id="map" ref="areaRankingAll"></div>
</template>
<script>
import geoList from "./geo"
import * as echarts from "echarts"
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,
        },
      ],
    }
  },
  watch: {},
  mounted() {
    this.initChart() //初始化地图
  },
  methods: {
    initEcharts(geoJson, name, chart) {
      // console.log(JSON.stringify(geoJson))
      // let handleLocate = (arr) => {
      //   for
      // }
      echarts.registerMap(name, geoJson)
      let option = {
        title: {
          text: "", // 地图名称
        },
        tooltip: {
          show: false,
          // formatter: function (params) {
          //   if (params.value.length > 1) {
          //     return params.name + "：" + params.value[2] + "人"
          //   }
          //   return `${params.name} ： ${params.value ? params.value : 0}人`
          // },
          // 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.3,
          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: [
              {
                name: "省立医院",
                value: "456",
              },
              {
                name: "安医大",
                value: "123",
              },
            ],
          },
          //小点
          // {
          //   //文字和标志
          //   name: "light",
          //   type: "scatter",
          //   coordinateSystem: "geo",
          //   data: [
          //     [117.29, 32.0581],
          //     [118, 32.0581],
          //   ],
          //   symbolSize: 10,
          //   label: {
          //     normal: {
          //       // formatter: "{b}",
          //       formatter: "",
          //       position: "right",
          //       show: true,
          //     },
          //     emphasis: {
          //       show: true,
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#A6D5FF",
          //     },
          //   },
          // },

          {
            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}} `,
              // backgroundColor: "#eee",
              // borderColor: "#17A597",
              // borderWidth: 1,
              // borderRadius: 4,
              // align: "center",
              // width: 64,
              rich: {
                title: {
                  align: "center",
                  lineHeight: 26,
                  fontSize: 16,
                  color: "#fff",
                },
                value: {
                  fontSize: 16,
                  align: "center",
                  color: "#3DF2CD",
                  backgroundColor: "rgba(61,244,206,0.1)",
                  width: 64,
                  height: 26,
                  borderRadius: [4, 4, 0, 0],
                },
              },
            },
            lineStyle: {
              type: "solid",
              opacity: 1,
              color: "#A6D5FF",
              curveness: 0.1,
            },
            data: [
              {
                coords: [
                  [117.29, 32.0581],
                  [128, 34],
                ],
                name: "省立医院",
                value: "456",
              },
              {
                coords: [
                  [118, 32.0581],
                  [138, 36],
                ],
                name: "安徽医科大学第一附属医院北区",
                value: "4823",
              },
            ],
          },
        ],
      }
      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>
