
<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/shanxi1.js';

  import china from 'echarts/map/json/china.json';


  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/china.json')}
          // {name:'咸阳市',value:require('../../../static/xianyangshi.json')},
          // {name:'西安市',value:require('../../../static/xianshi.json')}
        ],
        list:[],
        xc:'',
        timer:'',
      }
    },
    mounted() {
      this.drawChinaMap();
    },
    methods: {
      drawChinaMap(mapjson) {
        var oroptionmapjsonr_charts =this.$echarts.init(document.getElementById("idname"));
        this.xc=oroptionmapjsonr_charts
        var getColor = ['#CCFFFF', '#FFCCCC', '#FF6666','#73ACFF', '#FDD56A', '#FD866A', '#9E87FF', '#58D5FF']; // 分界值对应的颜色
        // var getClassification = [10, 20]; // 3个分界值（从小往大排序）
// 后台获取到的数据
        var dates = [
          {
          name: '内蒙古',
          value: 8
         },
          {
            name:'山东',
            value: 20
          },
          {
            name: '广西',
            value: 33
          },
          {
            name: '河北',
            value: 33
          },
          {
            name: '黑龙江',
            value: 33
          },
          {
            name: '吉林',
            value: 33
          },
          {
            name: '江苏',
            value: 33
          },
          {
            name: '辽宁',
            value: 33
          },
          {
            name: '天津',
            value: 33
          }
        ];

        dates.forEach((item,index) => {  // 根据数组中每一项的 value 判断属于哪个等级，对应颜色，从 getColor 中取值
          item.itemStyle = {
                areaColor: getColor[index]
              }
        });
        this.$echarts.registerMap("china", china);
        oroptionmapjsonr_charts.showLoading();
        var mapFeatures = this.$echarts.getMap("china").geoJson.features;
        oroptionmapjsonr_charts.hideLoading();
        var option = {
          tooltip: {
                  trigger: 'item',
                  formatter: '{b}<br/>售气量 <span style="color: #0fa397">{c}</span> (m3)',
                  extraCssText:'width: auto;height:auto;',
                  backgroundColor:"#FFFFFF",
                  textStyle: {
                    color:'#4199FD',
                    fontSize:20
                  }
                },
          series: {
            name: '售气量',
            type: 'map',
            map: 'china',
            data: dates,
            zoom: 1.2,
            scaleLimit: {
              min: 0.5,
              max: 3
            },
            label: { // 地图中各区域的文本标签
              normal: { // 标签显示
                show: true,
                color: '#c0c0c0'
              },
              emphasis: { //鼠标放在对应的地图块中的显示内容
                show: true,
                color: '#fff'
              }
            },
            roam: false,
            itemStyle: {
              normal: {
                borderColor: 'rgba(147, 235, 248, 1)',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
              },
            },
            tooltip: {
              formatter: function(params) {  // 信息提示框（鼠标放在省份上显示数据
                if (params.data == undefined || params.data == null) {
                  return
                } else {
                  var value = (params.value + '').split('.');
                  value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                  return  params.name + '<br/>' + params.seriesName + ': ' + value;
                }

              }
            },
          }
        };

        oroptionmapjsonr_charts.setOption(option)
        let idx = 0;
        var dataLen=dates.length
        this.timer= setInterval(()=>{



          this.$parent.indexflag=false
          this.$parent.index0=idx
          idx = (idx+ 1) % dataLen;
          this.$parent.index=idx
          oroptionmapjsonr_charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
          });

          // 高亮当前图形
          oroptionmapjsonr_charts.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex:idx
          });
          oroptionmapjsonr_charts.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: idx
          });
        }, 3000)



        // var index = 0; //播放所在下标
        // this.timer = setInterval(function() {
        //   oroptionmapjsonr_charts.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   });
        //   index++;
        //   if(index >= dates.length) {
        //     index = 0;
        //   }
        // }, 2000);
      },
      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>
