<!--
 * @Description:
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <div class="container">
    <div :id="id" style="width:1200px;height:800px;"></div>
  </div>
</template>

<script>
import 'echarts-gl'
// import 'echarts-bmap'
import {MP} from '@/utils/baidu-map.js'
export default {
  name: 'ExampleMap',
  props: {
    id: {
      type: String,
      default: 'mapContainer'
    }
  },
  data () {
    return {
      options: {
        backgroundColor: 'transparent',
        bmap: {
          center: [116.4, 39.9], // 中心点坐标
          zoom: 12, // 缩放级别
          roam: true, // 用户是否可以拖动和缩放地图
          mapStyle: [
            {
              "featureType": "land",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "color": "#091220ff"
              }
            }, {
              "featureType": "water",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "color": "#113549ff"
              }
            }, {
              "featureType": "green",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "color": "#0e1b30ff"
              }
            }, {
              "featureType": "building",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "building",
              "elementType": "geometry.fill",
              "stylers": {
                "color": "#ffffffb3"
              }
            }, {
              "featureType": "building",
              "elementType": "geometry.stroke",
              "stylers": {
                "color": "#dadadab3"
              }
            }, {
              "featureType": "subwaystation",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "color": "#b15454B2"
              }
            }, {
              "featureType": "education",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "color": "#e4f1f1ff"
              }
            }, {
              "featureType": "medical",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "color": "#f0dedeff"
              }
            }, {
              "featureType": "scenicspots",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "color": "#e2efe5ff"
              }
            }, {
              "featureType": "highway",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "weight": 4
              }
            }, {
              "featureType": "highway",
              "elementType": "geometry.fill",
              "stylers": {
                "color": "#f7c54dff"
              }
            }, {
              "featureType": "highway",
              "elementType": "geometry.stroke",
              "stylers": {
                "color": "#fed669ff"
              }
            }, {
              "featureType": "highway",
              "elementType": "labels",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "highway",
              "elementType": "labels.text.fill",
              "stylers": {
                "color": "#8f5a33ff"
              }
            }, {
              "featureType": "highway",
              "elementType": "labels.text.stroke",
              "stylers": {
                "color": "#ffffffff"
              }
            }, {
              "featureType": "highway",
              "elementType": "labels.icon",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "arterial",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "weight": 2
              }
            }, {
              "featureType": "arterial",
              "elementType": "geometry.fill",
              "stylers": {
                "color": "#d8d8d8ff"
              }
            }, {
              "featureType": "arterial",
              "elementType": "geometry.stroke",
              "stylers": {
                "color": "#ffeebbff"
              }
            }, {
              "featureType": "arterial",
              "elementType": "labels",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "arterial",
              "elementType": "labels.text.fill",
              "stylers": {
                "color": "#525355ff"
              }
            }, {
              "featureType": "arterial",
              "elementType": "labels.text.stroke",
              "stylers": {
                "color": "#ffffffff"
              }
            }, {
              "featureType": "local",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "weight": 1
              }
            }, {
              "featureType": "local",
              "elementType": "geometry.fill",
              "stylers": {
                "color": "#d8d8d8ff"
              }
            }, {
              "featureType": "local",
              "elementType": "geometry.stroke",
              "stylers": {
                "color": "#ffffffff"
              }
            }, {
              "featureType": "local",
              "elementType": "labels",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "local",
              "elementType": "labels.text.fill",
              "stylers": {
                "color": "#979c9aff"
              }
            }, {
              "featureType": "local",
              "elementType": "labels.text.stroke",
              "stylers": {
                "color": "#ffffffff"
              }
            }, {
              "featureType": "railway",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "weight": 1
              }
            }, {
              "featureType": "railway",
              "elementType": "geometry.fill",
              "stylers": {
                "color": "#123c52ff"
              }
            }, {
              "featureType": "railway",
              "elementType": "geometry.stroke",
              "stylers": {
                "color": "#12223dff"
              }
            }, {
              "featureType": "subway",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on",
                "weight": 1
              }
            }, {
              "featureType": "subway",
              "elementType": "geometry.fill",
              "stylers": {
                "color": "#d8d8d8ff"
              }
            }, {
              "featureType": "subway",
              "elementType": "geometry.stroke",
              "stylers": {
                "color": "#ffffff00"
              }
            }, {
              "featureType": "subway",
              "elementType": "labels",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "subway",
              "elementType": "labels.text.fill",
              "stylers": {
                "color": "#979c9aff"
              }
            }, {
              "featureType": "subway",
              "elementType": "labels.text.stroke",
              "stylers": {
                "color": "#ffffffff"
              }
            }, {
              "featureType": "continent",
              "elementType": "labels",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "continent",
              "elementType": "labels.icon",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "continent",
              "elementType": "labels.text.fill",
              "stylers": {
                "color": "#333333ff"
              }
            }, {
              "featureType": "continent",
              "elementType": "labels.text.stroke",
              "stylers": {
                "color": "#ffffffff"
              }
            }, {
              "featureType": "city",
              "elementType": "labels.icon",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "city",
              "elementType": "labels",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "city",
              "elementType": "labels.text.fill",
              "stylers": {
                "color": "#454d50ff"
              }
            }, {
              "featureType": "city",
              "elementType": "labels.text.stroke",
              "stylers": {
                "color": "#ffffffff"
              }
            }, {
              "featureType": "town",
              "elementType": "labels.icon",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "town",
              "elementType": "labels",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "town",
              "elementType": "labels.text.fill",
              "stylers": {
                "color": "#454d50ff"
              }
            }, {
              "featureType": "town",
              "elementType": "labels.text.stroke",
              "stylers": {
                "color": "#ffffffff"
              }
            }, {
              "featureType": "road",
              "elementType": "geometry.fill",
              "stylers": {
                "color": "#12223dff"
              }
            }, {
              "featureType": "poilabel",
              "elementType": "labels",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "districtlabel",
              "elementType": "labels",
              "stylers": {
                "visibility": "off"
              }
            }, {
              "featureType": "road",
              "elementType": "geometry",
              "stylers": {
                "visibility": "on"
              }
            }, {
              "featureType": "road",
              "elementType": "labels",
              "stylers": {
                "visibility": "off"
              }
            }, {
              "featureType": "road",
              "elementType": "geometry.stroke",
              "stylers": {
                "color": "#ffffff00"
              }
            }, {
              "featureType": "district",
              "elementType": "labels",
              "stylers": {
                "visibility": "off"
              }
            }, {
              "featureType": "poilabel",
              "elementType": "labels.icon",
              "stylers": {
                "visibility": "off"
              }
            }, {
              "featureType": "poilabel",
              "elementType": "labels.text.fill",
              "stylers": {
                "color": "#2dc4bbff"
              }
            }, {
              "featureType": "poilabel",
              "elementType": "labels.text.stroke",
              "stylers": {
                "color": "#ffffff00"
              }
            }, {
              "featureType": "manmade",
              "elementType": "geometry",
              "stylers": {
                "color": "#12223dff"
              }
            }, {
              "featureType": "districtlabel",
              "elementType": "labels.text.stroke",
              "stylers": {
                "color": "#ffffffff"
              }
            }, {
              "featureType": "entertainment",
              "elementType": "geometry",
              "stylers": {
                "color": "#ffffffff"
              }
            }, {
              "featureType": "shopping",
              "elementType": "geometry",
              "stylers": {
                "color": "#12223dff"
              }
            }
          ]
        }
        // ,
        // series: [{
        //   type: 'map3D',
        //   map: 'china',
        //   coordinateSystem: 'bmap',
        //   shading: 'realistic',
        //   silent: true,
        //   itemStyle: {
        //     areaColor: '#ff00ff'
        //   },
        //   data: [{
        //     name: 'china',
        //     height: 5.2
        //   }]
        // }]
      }
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      const _div = document.getElementById(this.id)
      this.$nextTick(() => {
        let _this = this
        MP('QL9aqGNjgcRAGkt6F0BrsVmfGGOgjVyr').then(BMap => {
          let myChart = _this.$echarts.init(_div)
          myChart.setOption(_this.options)
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .router-view{
    top:0px !important;
  }
  .container{
    top:0px !important;
    background: url("../../assets/images/background1.jpg") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-color: black;
    .example-row{
      width:100%;
      height:300px;
      display: flex;
      justify-content: space-between;
      .example-block{
        width:300px;
        height: 100%;
        /*height:100px;*/
        padding: 0.1rem;
      }
    }
  }

</style>