<template>
    <div id="mapDiv">

    </div>
</template>

<script>
    import 'echarts/map/js/china'
    var  dataList = [{
      name: '安徽',value: 5498
    }, {
      name: '澳门',value: 0
    }, {
      name: '北京',value: 0
    }, {
      name: '福建',value: 4111
    }, {
      name: '甘肃',value: 59
    }, {
      name: '广东',value: 1928
    }, {
      name: '广西',value: 4
    }, {
      name: '贵州',value: 52
    }, {
      name: '海南',value: 1284
    }, {
      name: '河北',value: 3151
    }, {
      name: '河南',value: 3814
    }, {
      name: '黑龙江',value: 316
    }, {
      name: '湖北',value: 1724
    }, {
      name: '湖南',value: 33378
    }, {
      name: '吉林',value: 520
    }, {
      name: '江苏',value: 113
    }, {
      name: '江西',value: 961
    }, {
      name: '辽宁',value: 139
    }, {
      name: '内蒙古',value: 0
    }, {
      name: '宁夏',value: 60
    }, {
      name: '青海',value: 0
    }, {
      name: '山东',value: 106
    }, {
      name: '山西',value: 0
    }, {
      name: '陕西',value: 114
    }, {
      name: '上海',value: 1321
    }, {
      name: '四川',value: 7867
    }, {
      name: '台湾',value: 0
    }, {
      name: '天津',value: 1157
    }, {
      name: '西藏',value: 14
    }, {
      name: '香港',value: 0
    }, {
      name: '新疆',value: 115
    }, {
      name: '云南',value: 3811
    }, {
      name: '浙江',value: 0
    }, {
      name: '重庆',value: 886
    }
    ];
  export default {
    name: 'maps',
    data() {
      return {

      }
    },
    mounted() {
      setTimeout(()=>{
        this.init()
      },100)
    },
    methods: {
      init(){
        let option  = {
          tooltip: {
            triggerOn: "click",
            formatter: function(e, t, n) {
              return .5 == e.value ? e.name + "：播放量" : e.seriesName + "<br />" + e.name + "：" + e.value
            }
          },
          visualMap: [{
            dimension: 0,
            right: 20,
            bottom: 20,
            itemWidth: 16,
            itemHeight: '200px',
            orient:'horizontal',
            text: ['由高到低','播放量'],
            backgroundColor:'rgba(0,28,66,0.6)',
            padding:[15,10],
            textStyle: {
              color: 'rgba(255,255,255,1)'
            },
            inRange: {
              color: ['#9B1E23', '#E72128', '#FB8D1F', '#FFCF4E']
            }
          }],
          geo: {
            map: "china",
            roam: !1,
            scaleLimit: {
              min: 1,
              max: 2
            },

            roam: true, //是否开启平游或缩放
            scaleLimit: { //滚轮缩放的极限控制
              min: 1,
              max: 2
            },

            zoom: 1,
            top: 100,
            left:'10%',
            label: {
              normal: {
                show: !0,
                fontSize: "12",
                color: "#fff"
              }
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)"
              },
              emphasis: {
                areaColor: "#f2d5ad",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0
              }
            },
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  }
                },
                label: {
                  show: false // 隐藏文字
                }
              }
            ]
          },
          series: [{
            name: "播放量",
            type: "map",
            geoIndex: 0,
            data: dataList
          }]
        };
        let echartsDiv = this.$echarts.init(document.getElementById('mapDiv'))
        echartsDiv.setOption(option)
      }
    }
  }
</script>

<style lang="less">
    #mapDiv{
        width: 100%;
        height: 100%;
    }
</style>
