<template>
  <div class="map-view">
    <div id="main" style="width: 100vw;"></div>
  </div>
</template>
<script>
import geoJson from './china.json' //引入地图数据
export default {
  data() {
    return {
      mapData: [
        {
          name: '新疆维吾尔自治区',
          value: 0
        },
        {
          name: '西藏自治区',
          value: 0
        },
        {
          name: '内蒙古自治区',
          value: 0
        },
        {
          name: '青海省',
          value: 0
        },
        {
          name: '四川省',
          value: 0
        },
        {
          name: '黑龙江省',
          value: 0
        },
        {
          name: '甘肃省',
          value: 0
        },
        {
          name: '云南省',
          value: 4
        },
        {
          name: '广西壮族自治区',
          value: 40
        },
        {
          name: '湖南省',
          value: 89
        },
        {
          name: '陕西省',
          value: 40
        },
        {
          name: '广东省',
          value: 54
        },
        {
          name: '吉林省',
          value: 15
        },
        {
          name: '河北省',
          value: 81
        },
        {
          name: '湖北省',
          value: 82
        },
        {
          name: '贵州省',
          value: 32
        },
        {
          name: '山东省',
          value: 11
        },
        {
          name: '江西省',
          value: 64
        },
        {
          name: '河南省',
          value: 38
        },
        {
          name: '辽宁省',
          value: 82
        },
        {
          name: '山西省',
          value: 50
        },
        {
          name: '安徽省',
          value: 45
        },
        {
          name: '福建省',
          value: 76
        },
        {
          name: '浙江省',
          value: 30
        },
        {
          name: '江苏省',
          value: 9
        },
        {
          name: '重庆市',
          value: 91
        },
        {
          name: '宁夏回族自治区',
          value: 17
        },
        {
          name: '海南省',
          value: 27
        },
        {
          name: '台湾省',
          value: 79
        },
        {
          name: '北京市',
          value: 40
        },
        {
          name: '天津市',
          value: 33
        },
        {
          name: '上海市',
          value: 69
        },
        {
          name: '香港特别行政区',
          value: 23
        },
        {
          name: '澳门特别行政区',
          value: 37
        }
      ]
    }
  },
  props: {
    data: {
        type: Array,
        default: () => []
    }
  },
  mounted() {
    let myChart = this.$echarts.init(document.getElementById('main'))
    this.$echarts.registerMap('china', geoJson)
    console.log(this.data, 'data')
    let option = {
      geo: {
        map: 'china',
        aspectScale: 0.75,
        zoom: 1.1,
        itemStyle: {
          normal: {
            areaColor: 'transparent',
            borderColor: 'transparent',
            borderWidth: 2,
            shadowColor: 'rgba(63, 218, 255, 0.5)',
            shadowBlur: 30
          },
          emphasis: {
            areaColor: '#2B91B7'
          }
        }
      },
      visualMap: {
        type: 'piecewise',
        show: false,
        pieces: [
          {
            max: 1,
            label: '安全',
            color: 'transparent',//'#56997A',//
          },
          {
            min: 1,
            max: 60,
            label: '警告',
            color: 'RGBA(247, 238, 167, .5)'
          },
          {
            min: 60,
            label: '危险',
            color: 'RGBA(247, 238, 167, 1)'
          }
        ],
        color: 'transparent',
        textStyle: {
          color: '#fff'
        },
        visibility: 'off'
      },
      series: [
        {
          type: 'map',
          zoom: 1.2,
          map: 'china',
          data: this.data,
          itemStyle: {
            normal: {
              show: true,
              areaColor: 'transparent',
              borderColor: 'transparent',
              borderWidth: '1'
            }
          },
          label: {
            normal: {
              show: false, //显示省份标签
              textStyle: {
                color: 'rgb(249, 249, 249)', //省份标签字体颜色
                fontSize: 12
              },
              formatter: p => {
                let val = p.value
                if (window.isNaN(val)) {
                  val = 0
                }
                //
                switch (p.name) {
                  case '内蒙古自治区':
                    p.name = '内蒙古'
                    break
                  case '西藏自治区':
                    p.name = '西藏'
                    break
                  case '新疆维吾尔自治区':
                    p.name = '新疆'
                    break
                  case '宁夏回族自治区':
                    p.name = '宁夏'
                    break
                  case '广西壮族自治区':
                    p.name = '广西'
                    break
                  case '香港特别行政区':
                    p.name = '香港'
                    break
                  case '澳门特别行政区':
                    p.name = '澳门'
                    break
                  default:
                  // code
                }
                if (p.name === '内蒙古自治区') {
                  p.name = '内蒙古'
                }
                let txtCon = p.name
                return txtCon
              }
            },
            emphasis: {
              //对应的鼠标悬浮效果
              show: true,
              textStyle: {
                color: '#000'
              }
            }
          }
        }
      ]
    }
    myChart.setOption(option)
  }
}
</script>
<style lang="scss">
.map-view {
  width: 100%;

  #main {
    width: 100%;
    height: 600px;
  }
}
</style>