<template>
  <div>
    <div ref="chinaMap" class="chinaMap" style="height: 600px; width: 100%"></div>
  </div>
</template>
<style scoped>
.chinaMap {
  transform: rotate3d(1, 0, 0, 35deg);
}
</style>
<script setup>
import * as echarts from 'echarts'
import jilinJson from '../json/jilin.json'
const chinaMap = ref()
onMounted(() => {
  drawChina()
})
/**************************** series start ************************************/
//中国地理坐标图
var chinaGeoCoordMap = {
  长春市: [125.3245, 43.886841],
  白城市: [122.841114, 45.619026],
  松原市: [124.823608, 45.118243],
  吉林市: [126.55302, 43.843577],
  四平市: [124.370785, 43.170344],
  辽源市: [125.145349, 42.902692],
  白山市: [126.427839, 41.942505],
  延边朝鲜族自治州: [129.513228, 42.904823],
  通化市: [125.936501, 41.721177]
}
var chinaDatas = [
  [
    {
      name: '长春市',
      value: 0
    }
  ],
  [
    {
      name: '延边朝鲜族自治州',
      value: 0
    }
  ],
  [
    {
      name: '白山市',
      value: 0
    }
  ],
  [
    {
      name: '白城市',
      value: 2
    }
  ],
  [
    {
      name: '通化市',
      value: 1
    }
  ],
  [
    {
      name: '辽源市',
      value: 0
    }
  ],
  [
    {
      name: '松原市',
      value: 0
    }
  ],
  [
    {
      name: '吉林市',
      value: 1
    }
  ],
  [
    {
      name: '四平市',
      value: 1
    }
  ]
]
//设置投射点
const scatterPos = [125.3245, 43.886841]

var convertData = function (data) {
  var res = []
  for (var i = 0; i < data.length; i++) {
    var dataItem = data[i]
    var fromCoord = chinaGeoCoordMap[dataItem[0].name]
    var toCoord = scatterPos
    if (fromCoord && toCoord) {
      res.push([
        {
          coord: fromCoord,
          value: dataItem[0].value
        },
        {
          coord: toCoord
        }
      ])
    }
  }
  return res
}

var series = []
;[['长春市', chinaDatas]].forEach(function (item, i) {
  series.push(
    // {
    //   //绘制一个新地图
    //   type: 'map',
    //   map: 'china',
    //   zoom: 4,
    //   center: [125.593273, 44.290795],
    //   z: -1,
    //   aspectScale: 0.75, //
    //   itemStyle: {
    //     normal: {
    //       areaColor: '#f00',
    //       borderColor: '#090438',
    //       borderWidth: '2',
    //       shadowColor: '#090438',
    //       shadowOffsetX: 0,
    //       shadowOffsetY: 15
    //     }
    //   }
    // },
    //设置指向箭头信息
    {
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 8 //图标大小
      },
      lineStyle: {
        normal: {
          color: '#adffd0',
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.3 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    },
    // 发射点位置涟漪等效果
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {
            //圆环显示文字
            return params.data.name
          },
          fontSize: 13
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5 + val[2] * 5 //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f8f9f5'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        }
      })
    },
    //被攻击点
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        //涟漪相关
        period: 2,
        brushType: 'stroke',
        scale: 5
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          // offset:[5, 0],
          color: '#0f0',
          formatter: '{b}',
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        emphasis: {
          show: true,
          color: '#f60'
        }
      },
      itemStyle: {
        normal: {
          color: '#f00'
        }
      },
      symbol: 'circle',
      symbolSize: 10, //圆圈大小
      data: [
        {
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10])
        }
      ]
    }
  )
})

/****************************************************************/
function drawChina() {
  var myChart = echarts.init(chinaMap.value)
  echarts.registerMap('china', jilinJson) //注册可用的地图
  var option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var res = ''
        var name = params.name
        var value = params.value[params.seriesIndex + 1]
        res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
        return res
      }
    },
    geo: {
      show: true,
      center: [125.593273, 44.290795],
      map: 'china',
      roam: true, //是否允许缩放，拖拽
      zoom: 4, //初始化大小
      //缩放大小限制
      scaleLimit: {
        min: 0.1, //最小
        max: 12 //最大
      },
      //设置中心点
      //center: [95.97, 29.71],
      //省份地图添加背景
      //regions: regions,
      itemStyle: {
        normal: {
          areaColor: '#4c60ff',
          borderColor: '#002097'
        },
        emphasis: {
          areaColor: '#293fff'
        }
      },
      label: {
        color: 'rgba(255,255,255,0.5)',
        show: false
      },
      //高亮状态
      emphasis: {
        itemStyle: {
          areaColor: '#ffc601'
        },
        label: {
          show: true,
          color: '#fff'
        }
      },
      z: 10
    },
    //配置属性
    series: series
  }
  myChart.setOption(option)
}
</script>
