src/components/chinaMap/index.vue

<template>
  <div class="app-chinaMapBox theme-map">
    <div class="mapTitle eleVerHorCenter-flex">
      <div class="cellBox">
        <table class="parkTotalTb">
          <tr>
            <td><div class="parkTotalImg"></div></td>
            <td><div class="infoBox"><div><countTo :startVal='parkParams.startVal' :endVal='parkParams.endVal' :duration='animationTime'></countTo></div><div>停车场总数</div></div> </td>
          </tr>
        </table>
      </div>
      <div class="cellBox">
        <table class="parkTotalTb">
          <tr>
            <td><div class="memberTotalImg"></div></td>
            <td><div class="infoBox"><div><countTo :startVal='memberParams.startVal' :endVal='getParkingTotal' :duration='animationTime'></countTo></div><div>用户总数</div></div> </td>
          </tr>
        </table>
      </div>
      <div class="cellBox">
        <table class="parkTotalTb">
          <tr>
            <td><div class="dayTotalImg"></div></td>
            <td><div class="infoBox"><div><countTo :startVal='dayParams.startVal' :endVal='getOrderTotal' :duration='animationTime'></countTo></div><div>今日订单数</div></div> </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="mapChart"> </div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import countTo from 'vue-count-to';//通过设置：endVall 和 ：startVall 会自动判断计数和倒数，:duration='3000'是指完成动画的时间。
  import {mapGetters} from 'vuex' //use commit
  import { parkAddress, baiduMapAddress, baiduMapAddressDY, parkAddressDY } from '../../api/api'
  export default {
    name: "chinaMap",
    components: { countTo },
    data() {
      return {
        animationTime:5000,//动画时间
        parkParams:{//parkTotal:738,//停车场总数
          startVal:0,
          endVal: 0
        },
        memberParams:{//memberTotal:738,//会员总数
          startVal:0,
          endVal: 0
        },
        dayParams:{//dayTotal:10000,//今日订单数
          startVal:0,
          endVal: 0
        },
        mapChart: {},
        mapData:[],
        coordinateData:{}
      }
    },
    computed: {
      ...mapGetters(['getParkingTotal','getOrderTotal'])
    },
    mounted() {
      this.parkInit()
      this.baiduMapInit()
    },
    methods: {
      parkInit() {
        // parkAddress({
        //   orgIds: this.GLOBAL.paramsvariables
        // }).then((response)=>{
        //   let  data = response.data.data
        //   console.log(response)
        //   this.parkParams.endVal=data
        // }).catch((response)=>{
        //   console.log(response);
        // })
        this.$axios.all(
          [
            parkAddress({ orgIds: this.GLOBAL.paramsvariables}),
            parkAddressDY({ orgIds: this.GLOBAL.variables})
          ]
        )
        .then(this.$axios.spread((acctWX, acctDY) => {
          let WXdata = acctWX.data.data
          let DYdata = acctDY.data.data
          // this.parkParams.endVal=WXdata.allNum+DYdata.allNum
          this.parkParams.endVal=WXdata.allNum
        }))
      },
      baiduMapInit() {
        this.$axios.all(
          [
            baiduMapAddress({ orgIds: this.GLOBAL.paramsvariables}),
            baiduMapAddressDY({ orgIds: this.GLOBAL.variables})
          ]
        )
        .then(this.$axios.spread((acctWX, acctDY) => {
          let WXdata = acctWX.data.data
          let DYdata = acctDY.data.data
          console.log(WXdata)
          console.log(DYdata)
          //let mapData = [];
          for (let i=0;i<WXdata.length;i++){
            this.mapData.push({
              name:WXdata[i].orgName,
              value:WXdata[i].allBerthNum
            })
            this.coordinateData[WXdata[i].orgName] = [WXdata[i].lonId,WXdata[i].latId]
          }
          // for (let i=0;i<DYdata.length;i++){
          //   this.mapData.push({
          //     name:DYdata[i].orgName,
          //     value:DYdata[i].allBerthNum
          //   })
          //   this.coordinateData[DYdata[i].orgName] = [DYdata[i].lonId,DYdata[i].latId]
          // }
          this.mapData.push({
            name:'丹阳',
            value:12312
          })
          this.coordinateData['丹阳'] = [119.677183,32.022778]
          this.mapData.push({
            name:'北京',
            value:1234
          })
          this.coordinateData['北京'] = [116.298116,39.91845]
          this.mapData.push({
            name:'黄石',
            value:1234
          })
          this.coordinateData['黄石'] = [115.214842,30.32798]
          this.mapData.push({
            name:'兰州',
            value:1234
          })
          this.coordinateData['兰州'] = [103.671786,36.153543]
          //'双流': [103.912493, 30.586969]
          this.mapChart= this.createPie();
          window.addEventListener('resize', function() {
            this.mapChart.resize()
          }.bind(this));
        }))
        //
        // baiduMapAddress({
        //   orgIds: this.GLOBAL.paramsvariables
        // }).then((response)=>{
        //   let  data = response.data.data
        //   console.log(data)
        //   //let mapData = [];
        //   for (let i=0;i<data.length;i++){
        //     this.mapData.push({
        //       name:data[i].orgName,
        //       value:data[i].allBerthNum
        //     })
        //     this.coordinateData[data[i].orgName] = [data[i].lonId,data[i].latId]
        //   }
        //   //'双流': [103.912493, 30.586969]
        //   this.mapChart= this.createPie();
        //   window.addEventListener('resize', function() {
        //     this.mapChart.resize()
        //   }.bind(this));
        // }).catch((response)=>{
        //   console.log(response);
        // })
      },
      /*
       * china地图
       * */
      createPie(){
        let mapChart = echarts.init(document.querySelector('.app-chinaMapBox .mapChart'));
        const series=this._getSeries();
        const option= {
          grid: {
            top: '0%',left: '0%',
            right: '0%',bottom: '3%'
          },
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(6, 75, 140, 0)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            //extraCssText: 'z-index:100',
            formatter: function(params, ticket, callback) {
              if (params.seriesType != "lines") {
                //console.log(params)
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                var value = params.value;
                var numStyle='color:#02C202; font-size: 16px; font-family: display-free;line-height:25px;font-weight:bold;';
                res = "<div style='padding:5px;height:16px;line-height:16px;background:rgba(43, 140, 209, 0.96)'>" + name + "</div>" ;
                res +="<div style='padding:5px;height:25px;background:rgba(6, 75, 140, 0.9);'>"+"泊位总数："+"<span style='"+numStyle+"'>"+ value[2] +"</span></div>";
                return res;
              }
            }
          },
          dataRange: {
            calculable: false,
            color: ['#FFAB00'],
            textStyle: {color: '#fff' },
            show: false,
          },
          geo: {
            map: 'china',
            label: {
              normal: {show: false },
              emphasis: {show: false}
            },
            center: [104.94296,37.433088],
            roam: true,zoom:1.3,
            scaleLimit:{ min:1.1,max:5 },
            itemStyle: {
              normal: {
                areaColor: '#020e33',borderColor: '#404a59'
              },
              emphasis: { areaColor: '#04294A'}
            },
          },
          series: series
        }
        mapChart.setOption(option);
        mapChart.on('click',function (params) {
          console.log(params.name)
          let name = params.name
          switch (name) {
            case '赤峰': window.open('http://www.renniting.cn/cfmonitor/index.html')
              break;
            case '黄石': window.open('http://www.renniting.cn/dymonitor/index.html')
              break;
          }
        })
        return mapChart;
      },
      //设置 series
      _getSeries(){
        //this.coordinateData;
        const geoCoordMap = this.coordinateData;
        const dataFrom = '无锡';
        this.mapData = [
            {name: '赤峰',value: 95},
            {name: '兰州',value: 70},
            // {name: '丹阳',value: 90},
          {name: '北京',value: 190},
          {name: '黄石',value: 290},
        ]
        const data = this.mapData;
        // console.log(data1)
        // const data = [
        //   {name: '赤峰',value: 95},
        //   {name: '无锡',value: 70},
        //   {name: '丹阳',value: 70},
        //   // {name: '丹阳', value: 30}
        // ];
        console.log(data)
        let tmpSeries=[
          {
          //name: '无锡',
          type: 'lines',
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.2, //0-1
            color: '#fff',
            //shadowBlur: 3,
            symbolSize: 6
          },
          lineStyle: {
            normal: {
              color: '#a6c84c',
              width: 0,
              curveness: 0.2
            }
          },
          data: data.map(function(dataItem) {
            return {
              fromName: dataFrom,
              toName: dataItem.name,
              coords: [
                geoCoordMap[dataFrom],
                geoCoordMap[dataItem.name]
              ]
            }
          })
        },
          {
            //name: '无锡',
            type: 'lines',
            //zlevel: 2,
            symbol: 'none',//['none', 'pin'],
            symbolSize: 8,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              color: '#fff',
            },
            lineStyle: {
              normal: {
                color: '#FFAB00', //线颜色
                width: 1,
                opacity: 0.6,
                curveness: 0.2
              }
            },
            data: data.map(function(dataItem) {
              return {
                fromName: dataFrom,
                toName: dataItem.name,
                coords: [
                  geoCoordMap[dataFrom],
                  geoCoordMap[dataItem.name]
                ]
              }
            })
          },
          {
            //name: '无锡',
            type: 'lines',
            //zlevel: 2,
            symbol: 'none',//['none', 'pin'],
            symbolSize: 8,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              color: '#fff',
            },
            lineStyle: {
              normal: {
                color: '#FFAB00', //线颜色
                width: 1,
                opacity: 0.6,
                curveness: 0.2
              }
            },
            data: data.map(function(dataItem) {
              return {
                fromName: dataFrom,
                toName: dataItem.name,
                coords: [
                  geoCoordMap[dataFrom],
                  geoCoordMap[dataItem.name]
                ]
              }
            })
          },
          {
            name: '城市',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            //zlevel: 2,
            rippleEffect: {
              scale: 5,
              brushType: 'stroke'
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                color: '#FFFFFF',
                formatter: '{b}'
              }
            },
            //光圈大小
            symbolSize: function(val) {
              return 10;
            },
            itemStyle: {
              normal: {
                color: '#a6c84c'
              }
            },
            data: data.map(function(dataItem) {
              return {
                name: dataItem.name,
                value: geoCoordMap[dataItem.name].concat([dataItem.value])
              };
            })
          },
          {
            name: '丹阳',
            type: 'scatter',
            coordinateSystem: 'geo',
            label: {
              normal: {
                show: true,
                position: 'bottom',
                formatter: '{b}',
                textStyle: {
                  color: "#ED3D06"
                }
              },
              emphasis: {
                show: true
              }
            },
            symbol: 'circle',
            symbolSize: 5,
            data: [{
              name: dataFrom,
              value: geoCoordMap[dataFrom].concat([100]),
            }],
          }
        ];
        return tmpSeries;
      },
      //测试被父组件调用
      setParkTotal(){
        this.parkParams.startVal=this.parkParams.endVal;
        this.parkParams.endVal=105;
        console.log("停车场总数:root");
      }
    }
  }
</script>
<style scoped  lang="scss">
  .app-chinaMapBox{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
  .mapChart{
    position: relative;
    width: 100%;
    height: 100%;
    /*margin-top: 5%;*/
    /*margin-bottom: 5px;*/
    /*height: -webkit-calc(100% - (5% + 5px));*/
    /*height: -moz-calc(100% - (5% + 5px));*/
    /*height: calc(100% - (5% + 5px));*/
    /*top:0;left: 0;*/
    /*bottom: 0;*/
    /*right:0;*/
    /*z-index: -1;*/
  }
  .cellBox{
    width: 33.333%;text-align: center;
  }
  .mapTitle{
    position: absolute;
    top: 0;
    width: 100%;
    height: 70px;
    background-color:RGBA(0, 45, 140, .7);
    z-index: 5;
  }
  .parkTotalImg{
    background: url(../../images/map/parkTotal.svg) no-repeat;
    background-size: 100% 100%;
    width: 45px;height: 45px;
  }
  .memberTotalImg{
    background: url(../../images/map/memberTotal.svg) no-repeat;
    background-size: 100% 100%;
    width: 45px;height: 45px;
  }
  .dayTotalImg{
    background: url(../../images/map/dayTotal.svg) no-repeat;
    background-size: 100% 100%;
    width: 45px;height: 45px;
  }
  .parkTotalTb{
    display: inline-block;
    margin-top:2px;
  }
  .infoBox{
    margin-left: 5px;
    text-align: left;
  }
  /*数字:738*/
  .infoBox>div:first-child{
    font-size: 24px;
  }
  /*文字：会员总数*/
  .infoBox>div:last-child{
    color: #00CFFE;font-size: 14px;
  }
  }
</style>