<template>
  <div id="map" ref="areaRankingAll"></div>
</template>
<script>
import * as echarts from "echarts"
import china from "./china.json"
import allCode from "./allCode.json"
export default {
  data() {
    return {
      //线上请求JSON文件数据地址
      // publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
      //allCode 区域行政编码信息
      allCode: allCode,
      locate: [
        {
          name: "安徽",
          value: [117.29, 32.0581, 0],
        },
      ],
    }
  },
  watch: {},
  mounted() {
    this.initChart() //初始化地图
  },
  methods: {
    initEcharts(geoJson, name, chart) {
      // console.log(JSON.stringify(geoJson))
      let self = this
      echarts.registerMap(name, geoJson)
      let option = {
        title: {
          text: "", // 地图名称
        },
        tooltip: {
          show: true,
          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.5,
          center: [105, 34.0267395887],
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#EDEFFF",
              borderColor: "#7597FA",
              borderWidth: 1,
            },
            emphasis: {
              areaColor: "#4E68FF", //悬浮背景
            },
          },
        },
        series: [
          //小点
          {
            //文字和标志
            name: "light",
            type: "scatter",
            coordinateSystem: "geo",
            data: this.locate,
            symbolSize: function (val) {
              return val[2] / 8
            },
            label: {
              normal: {
                // formatter: "{b}",
                formatter: "",
                position: "right",
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#FFCF4E",
              },
            },
          },
          {
            type: "map",
            map: "china",
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#FFFFFF",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
            animation: false,
            data: [{ name: "安徽省", value: 0 }],
          },
        ],
      }
      chart.setOption(option, true) //加个true解决下钻的视角偏移
      chart.off("click")
    },
    //带头函数-初始化
    initChart() {
      let chart = echarts.init(this.$refs.areaRankingAll)
      this.initEcharts(china, "中国", chart)
    },
  },
}
</script>
<style lang="scss" scoped></style>