<template>
  <div style="width:850px;height:600px" ref="chartsDOM"></div>
</template>

<script>
import * as echarts from "echarts";
import GetShandong from "@api/GetShandong";

export default {
  name: "mapData",
  data() {
    return {
      resdata: []
    }
  },
  watch: {
    resultMapData() {
      this.$nextTick(function () {
        this.getPie()
      })
    },
  },

  props: {
    resultMapData: {
      type: Array,
      default: [{name: '济南市', value: 496, ssqy: 200, szdw: 296},
        {name: '青岛市', value: 66, ssqy: 200, szdw: 296},
        {name: '烟台市', value: 222, ssqy: 200, szdw: 296},
        {name: '潍坊市', value: 688, ssqy: 200, szdw: 296},
        {name: '菏泽市', value: 75, ssqy: 200, szdw: 296},
        {name: '日照市', value: 121, ssqy: 200, szdw: 296},
        {name: '威海市', value: 91, ssqy: 200, szdw: 296},
        {name: '枣庄市', value: 479, ssqy: 200, szdw: 296},
        {name: '临沂市', value: 34, ssqy: 200, szdw: 296},
        {name: '滨州市', value: 631, ssqy: 200, szdw: 296},
        {name: '东营市', value: 400, ssqy: 200, szdw: 296},
        {name: '淄博市', value: 988, ssqy: 200, szdw: 296},
        {name: '泰安市', value: 693, ssqy: 200, szdw: 296},
        {name: '聊城市', value: 934, ssqy: 200, szdw: 296},
        {name: '济宁市', value: 748, ssqy: 200, szdw: 296},
        {name: '德州市', value: 900, ssqy: 200, szdw: 296},]
    },
    titles:{
      type: String,
    }
  },
  methods: {
    getPie() {
      var myChart = echarts.init(this.$refs["chartsDOM"]);
      // 显示 loading 动画
      myChart.showLoading();
      myChart.on("click", (params) => {
        /*console.log(444444444444,params)*/
      })
      // 再得到数据的基础上，进行地图绘制
      GetShandong.then(res => {
        // 得到结果后，关闭动画
        myChart.hideLoading();
        // 注册地图(数据放在axios返回对象的data中哦)
        echarts.registerMap('SD', res.data);
        var option = {

          visualMap: {
            min: 100,
            max: 2000,
            realtime: false,
            calculable: true,
            inRange: {
              color: ['#ccdaeb', '#50afe4', '#0e70f1'] // 渐变颜色
            }
          },
          title: {
            text: this.titles,
           /* textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontFamily: 'Arial, Verdana, sans...',
              fontSize: 18,
              fontStyle: 'normal',
              fontWeight: 'normal',
            },*/
          },
          tooltip: {
            formatter: function (params) {
              return params.name + ':' + '</br>' + "地块数量:" + params.value + '块' + '</br>'+"实际占用总面积:"+params.data.value2.toFixed(2)+"亩"
            },
          },

          series: [
            {
              name: '地块数量',
              type: 'map',
              map: 'SD',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
              label: {
                normal: {
                  show: true, //显示省份标签
                },
                emphasis: { //对应的鼠标悬浮效果
                  show: true,
                  textStyle: {
                    color: "#000"
                  }
                }
              },
              itemStyle: {
                emphasis: {
                  areaColor: '#009fe8',
                }
              },
              data: this.resultMapData
            },

          ],

        };
        myChart.setOption(option);
      })
    }

  },
  // mounted() {
  //   this.getPie()
  // },
}

</script>

<style scoped>

</style>