<template>
  <div>
    <div
      style="width: 100%; height: 100vh; background: linear-gradient(blue, pink);"
      ref="chartsDOM"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

// 借鉴：https://blog.csdn.net/2301_78542842/article/details/139608529

let myChart = false;

//需要在阿里云数据可视化平台得到地图的绘制数据：https://datav.aliyun.com/portal/school/atlas/area_selector
//比如这个链接：https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=510000_full 就可以得到四川地图的绘制json数据
let sichuanGeoData = {...};

export default {
  mounted() {
    // 初始化Echarts元素
    myChart = echarts.init(this.$refs["chartsDOM"]);
    this.renderMap();
  },
  data() {
    return {};
  },
  methods: {
    renderMap() {
      //注册一个地图绘制工具，名称为：sichuanDiTu ，用于绘制出地图
      echarts.registerMap("sichuanDiTu", sichuanGeoData);

      //在地图上绘制标记点的数据
      let geoData = [
        { name: "成都市", value: [104.06531, 30.576208], status: 1 },
        { name: "自贡市", value: [104.78708, 29.334152], status: 2 },
        { name: "攀枝花市", value: [101.70073, 26.565037], status: 1 },
        { name: "泸州市", value: [105.43501, 28.878778], status: 1 },
        { name: "德阳市", value: [104.404526, 31.122791], status: 2 },
        { name: "绵阳市", value: [104.721954, 31.480577], status: 1 },
        { name: "广元市", value: [105.8467, 32.436306], status: 1 },
        { name: "遂宁市", value: [105.56971, 30.519241], status: 1 },
        { name: "内江市", value: [105.06119, 29.609081], status: 1 },
        { name: "乐山市", value: [103.760345, 29.579762], status: 1 },
        { name: "南充市", value: [106.0713, 30.79638], status: 1 },
        { name: "眉山市", value: [103.86413, 30.067642], status: 1 },
        { name: "宜宾市", value: [104.630585, 28.753216], status: 1 },
        { name: "广安市", value: [106.633125, 30.445374], status: 1 },
        { name: "达州市", value: [107.46774, 31.209936], status: 1 },
        { name: "雅安市", value: [103.01266, 29.979443], status: 1 },
        { name: "巴中市", value: [106.76535, 31.85927], status: 1 },
        { name: "资阳市", value: [104.67522, 30.10802], status: 1 },
        { name: "阿坝州", value: [102.225525, 31.90005], status: 1 },
        { name: "甘孜州", value: [101.23, 30.05], status: 1 },
        { name: "凉山州", value: [102.25521, 27.889338], status: 1 },
      ];

      let seriesData = [{"name":"成都市","value":"4062","code":"510100"},{"name":"自贡市","value":"595","code":"510300"},{"name":"攀枝花市","value":"240","code":"510400"},{"name":"泸州市","value":"870","code":"510500"},{"name":"德阳市","value":"517","code":"510600"},{"name":"绵阳市","value":"1093","code":"510700"},{"name":"广元市","value":"639","code":"510800"},{"name":"遂宁市","value":"723","code":"510900"},{"name":"内江市","value":"811","code":"511000"},{"name":"乐山市","value":"762","code":"511100"},{"name":"南充市","value":"1161","code":"511300"},{"name":"眉山市","value":"678","code":"511400"},{"name":"宜宾市","value":"1708","code":"511500"},{"name":"广安市","value":"833","code":"511600"},{"name":"达州市","value":"1091","code":"511700"},{"name":"雅安市","value":"444","code":"511800"},{"name":"巴中市","value":"537","code":"511900"},{"name":"资阳市","value":"684","code":"512000"},{"name":"阿坝藏族羌族自治州","value":"325","code":"513200"},{"name":"甘孜藏族自治州","value":"460","code":"513300"},{"name":"凉山彝族自治州","value":"1420","code":"513400"}];
      var option = {
        //鼠标悬浮在地图上的时候 显示的气泡框信息
        tooltip: {
          show: true,
          trigger: "item",
          formatter: function (params, ticket, callback) {
            console.log("params", params);
            return params.name + "<br/>" + params.data.value;
          },
        },
        // 地图的偏移位置
        layoutCenter: ["50%", "40%"], //位置
        //地图的缩放大小
        layoutSize: "80%",
        //虚拟地图，对应seriesData中的value，使得不同value展示不同颜色
        visualMap: {
            //左上角那个条条是否展示，和条条的边距
            show : true,
            top : 10,
            left : 10,
            min: 0,
            max: 1000,
            calculable: true,
            color : ["#01166B", "#1467D0"]//定制颜色，也可以不定制，
        },
        //数据配置 每一个对象都相当于一个图层，在不同的图层展示数据 series是个列表，每一个项目是一个对象，可以理解成一个图层
        series: [
              {
              name: "图层名称",
              type: "map",
              map: "sichuanDiTu",
              roam: true,
              //基础样式
              itemStyle: {
                areaColor: "#00000000",//地区上不同区域的背景色 00 表示全透明 这里应该也是一个图层
                // // 省份的边框色
                borderColor: "#fff",
                borderWidth: 2,
                // shadowOffsetX: 0,
                // shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              //悬浮时候区域样式
              emphasis: {
                itemStyle: {
                  areaColor: "#09527A33",
                  borderWidth: 4,
                  shadowOffsetX: 2,
                  shadowOffsetY: 2,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
              //标签配置
              label: {
                show: true,
                textStyle: {
                  fontSize: 16,
                  color: "#FFF",
                },
                formatter: function (params, ticket, callback) {
                  console.log("params", params);
                  return params.name + "\r\n" + params.data.value;
                },
                emphasis: {
                  show: true,
                  color: "#fff",
                  fontSize: 20,
                },
              },
              data: seriesData,
            },
        ],
      };

      myChart.setOption(option);

      //单击某个区域
      myChart.on("click", (params) => {
        console.log("echartsMap click", params);

        if (this.map.level == 0) {
          this.map.level++;

          this.map.region.name = params.data.name;
          this.map.region.code = params.data.code;
          this.renderMap();
        }
      });
    },
  },
};
</script>

<style>
</style>