<template>
  <div style="width:100%;height:100%" class='chart' id='chart'></div>
</template>

<script>
  // import '../../../../node_modules/echarts/map/js/china.js' // 引入中国地图
  import * as echarts from 'echarts';
  import jtmap from './jtmap.json';

  export default {
    data() {
      return {
        myChart: null,
        hookToolTip: {}
      }
    },
    mounted() {
      this.drawChart()

    },
    created() {

    },
    watch: {
      // hookToolTip: {
      //   handler(newVal, oldVal) {
      //     let tooltipButton = document.querySelector(".mapsshow" + newVal.data.id)
      //     let that = this
      //     tooltipButton.addEventListener('click', function() {
      //       that.showInfo(newVal.data.id)
      //     })

      //   }
      // },
    },
    methods: {
      showInfo(id) {
        console.log("id", id)
      },
      resetCharts() {
        this.myChart.resize()
      },
      drawChart() {
        let that = this
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('chart'))
        echarts.registerMap('GX', jtmap);
        // 绘制图表
        this.myChart.setOption({
          // 提示框组件
          tooltip: {
            trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
            position: 'right',
            enterable: true,
            triggerOn: 'click',
            formatter: function(val) {
              that.hookToolTip = val;
              if (!val.data) {
                return
              }
              return '<div><p>' + val.data.name + '</p><p class="mapsshow' + val.data.id +
                '" style="color:red">查看详情</p><div>'
            }
          },
          series: [{
            map: 'china',
            type: 'map',
            map: 'GX',
            // aspectScale: 0.9,
            roam: false,

            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 12,
              }
            },

            itemStyle: {
              normal: {
                borderColor: '#0AAEB0', // 图形的描边颜色 #0AAEB0
                borderWidth: 1, // 描边线宽。
                borderType: 'solid', // 柱条的描边类型。
                areaColor: '#233F53', // 图形的颜色 #233F53
                shadowBlur: 5, // 图形阴影的模糊大小。
                shadowColor: '#233F53', // 阴影色 #233F53
                shadowOffsetX: 5, // X轴阴影
                shadowOffsetY: 5, // Y轴阴影

                label: {
                  show: false, // 显示区域名称
                  textStyle: {
                    color: '#fff',
                    fontSize: 12,
                  },
                }
              },
              // 鼠标移入时
              emphasis: {
                borderColor: '#2378f7', // 图形的描边颜色 #2378f7
                borderWidth: '1',
                areaColor: '#233F53', // 阴影色 #233F53
                label: {
                  show: false,
                  textStyle: {
                    color: '#fff',
                    fontSize: 14,
                  }
                }
              },
              regions: [{
                name: "指前镇",
                itemStyle: {
                  normal: {
                    areaColor: "red",
                  },
                  emphasis: {
                    areaColor: "red",
                  },
                },
              }],

              effect: {
                show: true,
                shadowBlur: 10,
                loop: true,
              }
            },

            markPoint: {
              symbol: 'image://' + require('@/assets/logo-mini.png'), // 自定义图片路径
              symbolSize: [50, 40], // 图片大小
              symbolOffset: [0, -30],
              label: {
                position: 'bottom',
                color: "#fff",
                textAlign: "center",
                padding: [4, 7],
                borderWidth: 2, // 图形描边的宽度。
                borderColor: "#fff", // 边框颜色
                backgroundColor: 'green', // 背景色
                formatter(val) {
                  return val.name
                }
              },

              // coord数组存放地址坐标
              data: [{
                  name: '张三',
                  coord: [119.420551, 31.600407],
                  value: '2154',
                  id: 1
                },
                {
                  name: '李四',
                  coord: [119.321608, 31.70714],
                  value: '1560',
                  id: 2
                },
                {
                  name: '王伍',
                  coord: [119.3297, 31.724295],
                  value: '2424',
                  id: 3
                }
              ]
            }
          }]
        })

      }
    }
  }
</script>

<style scoped>
  .chart {
    /* width: 100%;
    height: 100%; */
    /* margin: 100px 50px 0; */
    /* border: 1px solid #eeeeee; */
    /* background: url(../../public/static/bg.png) no-repeat; */
    background-size: 100% 100%;
  }
</style>
