<template>
  <div ref="usermap" class="full-size"></div>
</template>
<script>
import map from './geo'
import echarts from 'echarts'
import 'echarts/lib/chart/map'
import 'echarts/lib/component/geo'
import 'echarts/map/js/china'
export default {
  props: {
    mapdata: { type: Array, default: () => [] }
  },
  data() {
    return {
      seriesData: {
        seriesData: [{ name: '南海诸岛', value: 0, itemStyle: { normal: { opacity: 0, label: { show: false }}}}],
        minMaxData: {
          min: 0,
          max: 1000
        }
      }
    }
  },
  watch: {
    mapdata: {
      handler(newVal) {
        if (newVal.length !== 0) {
          this.seriesData = map.getCityGeo(newVal)
          console.log(newVal, 1212)
        } else {
          this.seriesData = {
            seriesData: [],
            minMaxData: { min: 0, max: 0 }
          }
        }
        this.userMap()
      },
      deep: true
    }
  },
  mounted() {
    this.userMap()
  },
  methods: {
    userMap() {
      // const mychart = this.$echarts.init(document.getElementById('user-map'));
      const mychart = echarts.init(this.$refs.usermap)
      // const d = this.seriesData
      const d = map.getCityGeo(this.mapdata)
      // const fontColor = '#bbb';
      // const visualMapColor = ['#ff0030', '#fe00f5', '#fbff04', '#48fe00', '#02fffe'];
      const option = {
        // title: {
        //     left: '5%',
        //     top: '6%',
        //     text: '登录情况分布',
        //     textStyle: {
        //         color: '#fff',
        //         fontSize: '18',
        //         fontWeight: '400'
        //     }
        // },
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut',
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'cubicInOut',
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            let value = params.value
            if (value instanceof Array) value = params.value[2]
            return `${params.name}总登录次数: ${value}次`
          },
          extraCssText: 'width:150px;height:30px;'
        },
        // legend: {
        //     orient: 'vertical',
        //     y: 'bottom',
        //     x: 'right',
        //     data: ['访问次数'],
        //     textStyle: {
        //         color: '#FFFFFF'
        //     }
        // },
        visualMap: [
          // {
          //     show: false,
          //     min: this.seriesData.minMaxData.min,
          //     max: this.seriesData.minMaxData.max,
          //     color: visualMapColor,
          //     dimension: 0,
          //     seriesIndex: 2
          // },
          {
            // min: this.seriesData.minMaxData.min,
            // max: this.seriesData.minMaxData.max,
            // text: ['高', '低'],
            // calculable: true,
            // itemWidth: 10,
            // itemHeight: 100,
            // color: visualMapColor,
            // textStyle: {
            //     color: fontColor
            // },
            // itemSymbol: 'circle',
            // seriesIndex: [0, 1]
            min: d.minMaxData.min,
            max: d.minMaxData.max,
            calculable: true,
            type: 'piecewise',
            itemWidth: 8,
            itemHeight: 8,
            inRange: {
              color: ['#50a3ba', '#eac736', '#d94e5d']
            },
            textStyle: {
              color: '#fff',
              fontSize: 10
            },
            orient: 'horizontal',
            left: '50%',
            itemGap: 5,
            textGap: 5,
            seriesIndex: [0, 1],
            formatter(a, b) {
              const fn = function (v) {
                if (v > 999) {
                  return `${(v / 1000).toFixed(1)}k`
                }
                if (v > 9 && v < 1000) {
                  return Math.floor(v / 10) * 10
                }
                return parseInt(v, 0)
              }
              return fn(b)
            }
          }],
        geo: [{
          map: 'china',
          roam: true,
          scaleLimit: { min: 1, max: 3 },
          z: 1,
          zoom: 1,
          label: {
            emphasis: {
              show: false
            }
          },
          // right: '40%',
          // left: '5%',
          // top: '10%',
          // bottom: '10%',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
              }, {
                offset: 1, color: 'blue' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            },
            borderWidth: 1,
            shadowBlur: 8,
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            areaColor: '#0040b6', // '#0E0930'
            borderColor: '#84a3dd'
          },
          emphasis: {
            show: true,
            // areaColor: '#3369D9',
            // opacity: 0.2
            itemStyle: {
              areaColor: '#034fdb'
            }
          }
        }
        ],
        grid: {
          right: '40%'
          // top: 100,
          // bottom: 40,
          // width: '28%'
        },
        series: [
          {
            name: '访问次数',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: d.seriesData,
            // symbolSize: (val) => {
            //     return Math.max(val[2] / 200, 8);
            // },
            symbolSize: 10,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(7,58,249,1)'
              }
            }
          }
        ]
      }
      mychart.setOption(option, true)
      window.addEventListener('resize', () => { mychart.resize() })
    }
  }
}
</script>

