
<template>
  <div style="width: 100%;height: 100%">
    <!--<div  style="height: 40px;"><span v-for="i in list"  @click="selmap(i)">{{i}}———></span></div>-->
    <div :id="idname"  style="text-align: left"></div>
  </div>

</template>

<script>

  import '../../../stores/yulin.js';


  export default {
    name: 'echart-map',
    title:'echart-map',
    props: {
      mode: {
        type:String,
        default:'0'
      },
      idname: {
        type:String,
        default:'ssss'
      },
      index:Number,
    },
    data() {
      return {
        mapdata:[
          {name:'榆林',value:require('../../../../static/yulin.json')}
          ],
        list:[],
        xc:'',
        timer:'',
      }
    },
    mounted() {
      this.drawChinaMap();
    },
    methods: {
      drawChinaMap(mapjson) {
        var oroptionmapjsonr_charts =this.$echarts.init(document.getElementById(this.idname));
        var scale=this.$parent.$parent.$parent.scale
          console.log(scale,'asdasdasd')
        this.xc=oroptionmapjsonr_charts
        var geoCoordMap = {};
        this.$echarts.registerMap(mapjson.name, mapjson.value);
        oroptionmapjsonr_charts.showLoading();
        var mapFeatures = this.$echarts.getMap(mapjson.name).geoJson.features;
        oroptionmapjsonr_charts.hideLoading();
        mapFeatures.forEach(function(v) {
          // 地区名称
          var name = v.properties.name;
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp;

        });
        var convertData = function(data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          return res;
        };
        var colormode=''
        if(this.mode=='0'){colormode="#e7c83c"}
        if(this.mode=='1'){colormode="#66f2de"}
        var data = [
          {name:"榆林市",value:80,sellgas:'80'}
        ];
        var  col=['#2a4096']
        let colors=[]
        for(var i =0;i<data.length;i++){
          var jo={
            name: data[i].name,
            itemStyle: {
              areaColor: col[i] ,
              // color: '#02363f'
              color:  col[i]
            }
          }
          colors.push(jo)
        }
        var option= {
          title : {
            text: '',
              subtext: '',
              x:'center'
          },
          tooltip: {
            show: true,
            alwaysShowContent:false,
            backgroundColor:'rgba(23, 46, 128, 0.7)',
            borderColor :'rgba(13, 109, 180, 0.7)',
            borderWidth:1,
            padding:10*scale,
            hideDelay:100*scale,
            triggerOn:'mousemove',
            enterable:true,
            textStyle:{
              fontSize:18*scale
            },
            position: function(point, params, dom, rect, size) {
              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              var x = point[0]; //
              var y = point[1];
              var viewWidth = size.viewSize[0];
              var viewHeight = size.viewSize[1];
              var boxWidth = size.contentSize[0];
              var boxHeight = size.contentSize[1];
              var posX = 0; //x坐标位置
              var posY = 0; //y坐标位置

              if (x < boxWidth) { //左边放不开
                posX = 5;
              } else { //左边放的下
                posX = x - boxWidth;
              }

              if (y < boxHeight) { //上边放不开
                posY = 5;
              } else { //上边放得下
                posY = y - boxHeight;
              }

              return [posX-10, posY-10];

            },
            extraCssText:'width: auto;height:auto;',
            formatter:function(params, ticket, callback){
              return '<div style=\'text-align: center;height: 1px;margin-bottom: 5px;font-weight: normal!important;\'>'+data[params.dataIndex].name+'</div><br/><span style="font-weight: normal">'
                +'年售气量 &nbsp;&nbsp;<span style="color:#e1e52a;font-weight: bolder">'+data[params.dataIndex].sellgas+'w</span><br/>'+'购&nbsp;气&nbsp;&nbsp;量  &nbsp;&nbsp;<span style="color:#e1e52a;font-weight: bolder">100w</span>'+'</span>';
            }
          },
          dataRange:{
            min: 0,
              max: 2500,
              left: 'left',
              top: 'bottom',
              text: ['高', '低'],
              calculable: true,
              show:false,
              inRange: {
              color: [
                // "#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"
                // "#ff002d"
                // "#ffc188",
                // "#479fd2",
                // "#fba853",
                // "#48c7c0",
                // "#fa8737",
                // "#4bbdd6",
                // "#ff6f5b",
                // "#F4D5B1",
                // "#ADE1E3",
                // "#F4B387",
                // "#F0F3F4"
              ]
            },
          },

          series : [
            {
              type: 'map',
              map: '榆林',
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: false, // 存在legend时显示
              roam: true,
              animation: true,
              data: data
            },
            {  //涟漪点设置
              //文字和标志
              // name: 'light',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: convertData(data.sort(function(a, b) {
                return b.value - a.value;
              }).slice(0, 10)),
              symbolSize: function(val) {
                return val[2]/8 ;
              },
              emphasis: {   //高亮区域样式
                label: {
                  show: true
                },
                itemStyle: {
                    color:'#e8f218',
                    shadowBlur: 10*scale,
                    shadowColor: '#4b5cf2'
                },
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'top',
                  fontSize:10*scale,
                  color:'#ffffff',
                  show: true
                },
              },
              itemStyle: {
                normal: {
                  show:true,
                  color:'#66f2de',
                  shadowBlur: 10*scale,
                  shadowColor: '#66f2de'
                }
              },

              zlevel: 1
            },
          ]
        }
        if(this.mode=='0'){option.geo={  //地图设置
            show: true,
            map: mapjson.name,
            label: {
              show: false
            },
            selectedMode: 'single',
            roam: false,

            emphasis: {   //高亮区域样式
              label: {
                show: false
              },
              itemStyle: {
                areaColor: '#ffff2c'
              },
            },
            itemStyle: {
              normal: {
                borderColor: '#666666',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                    offset: 0,
                    offset: 0,
                    color: '#02363f' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#02363f'
                  }],
                  globalCoord: false // 缺省为 false
                },
                shadowBlur: 0
              },
            },
            regions: colors
          } }
        if(this.mode=='1'){option.geo={  //地图设置
          show: true,
          map: mapjson.name,
          label: {
            show: false
          },
          selectedMode: 'single',
          roam: false,

          emphasis: {   //高亮区域样式
            label: {
              show: false
            },
            itemStyle: {
              areaColor: '#62fff7'
            },
          },
          // itemStyle: {
          //   normal: {
          //     borderWidth:0
          //   }
          //   },
          itemStyle: {
            normal: {
              borderColor: '#21e3dc',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  offset: 0,
                  color: '#02363f' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#02363f'
                }],
                globalCoord: false // 缺省为 false
              },
              // shadowColor: '#21e3dc',
              // // shadowColor: 'rgba(255, 255, 255, 1)',
              // shadowOffsetX: -1,
              // shadowOffsetY: 1,
              shadowBlur: 0
            },
            // emphasis: {
            //   areaColor: '#389BB7',
            //   borderWidth: 0
            // }
          },
          // regions: colors
        }}

        // console.log(this.$shanxi,'测试')
        oroptionmapjsonr_charts.setOption(option)
        // oroptionmapjsonr_charts.on("click", this.eConsole)
        var app = {
          currentIndex: 0,
        };

         var self=this
        this.timer= setInterval(function () {
          var dataLen = option.series[0].data.length;
          // 取消之前高亮的图形
          oroptionmapjsonr_charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 1,
            dataIndex: app.currentIndex
          });

          self.$parent.indexflag=false
          self.$parent.index0=app.currentIndex
          app.currentIndex = (app.currentIndex + 1) % dataLen;
          self.$parent.index=app.currentIndex
          //console.log(app.currentIndex);
          // 高亮当前图形
          oroptionmapjsonr_charts.dispatchAction({
            type: 'highlight',
            seriesIndex: 1,
            dataIndex: app.currentIndex,
          });
          // 显示 tooltip
          oroptionmapjsonr_charts.dispatchAction({
            type: 'showTip',
            seriesIndex: 1,
            dataIndex: app.currentIndex
          });
        }, 3000);
         var highindex=0
        oroptionmapjsonr_charts.on("mouseover", function (param) {
          self.$parent.indexflag=true
          oroptionmapjsonr_charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
          });
          self.$parent.index=param.dataIndex
          // 高亮当前图形
          oroptionmapjsonr_charts.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
          // 显示 tooltip
          oroptionmapjsonr_charts.dispatchAction({
            type: 'showTip',
            seriesIndex: 1,
            dataIndex:param.dataIndex
          });
          highindex=param.dataIndex
        })

        oroptionmapjsonr_charts.on("mouseout", function () {
          oroptionmapjsonr_charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: highindex
          });
        })
      },
      eConsole(data){
        this.selmapdata(data.name)
      },
      selmapdata(name){
        for(var i=0;i<this.mapdata.length;i++){
          if(name==this.mapdata[i].name){
            this.drawChinaMap(this.mapdata[i])
            this.list.push(this.mapdata[i].name)
            break
          }
        }
      },
      selmap(name){
        for(var i=0;i<this.list.length;i++){
          if(i==this.list.length-1){
            break
          }
          if(name==this.list[i]){
           this.list.splice(0,i)
            this.selmapdata(name)
          }
        }
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
      ready(){
      this.list.push(this.mapdata[0].name)
      this.drawChinaMap(this.mapdata[0]);
    }
  };
</script>
