echarts实现地图

一.父组件
1.从子组件导入地图插件

import overMap from '@/views/platform/marketing/testDrive/common/dataoverviewMap';

2.将导入的子组件呈现在父组件上

<overMap style="height: 550px;width: 100%" :month="searchCondition.month" :key="timer" :yearFlag="searchCondition.yearFlag"></overMap>

在这里我需要根据月份和省份以及全年来查询数据，所以需要向子组件传递month等值。
3.通过components传递组件

  components: {
    overMap,
    myCharts
  },

二.子组件

<template>
  <div style="height: 100%">

    <div class="all"  @click="all()" style="text-align: left;font-size: 20px;padding: 10px 40px" >中国</div>
    <div id="map" v-loading="loading" style="height: 100%"></div><!-- -->
  </div>
</template>

<script>
import {
  getHeatMapProvince,
  getHeatMapCity
} from "@/api/report/dataoverview"
import chinaJson from '../../../../../../public/libs/data/china.js'
import provinceObj from '../../../../../../public/libs/data/province.js'
import allProvince from '../../../../../../public/libs/province.js'
import echarts from 'echarts'
export default {
  name: "faultMap",
  props:['month','yearFlag'],
  data(){
    return{
      showTip:null,
      mapIndex:0,
      mapLoading:false,
      preMapList:[],
      allData:[],
      myChart:null,
      preMapCode: chinaJson,
      preName:'china',
      loading:true,
      iftrue:
     {yearFlag:false,
     vehicleModel:'',
     month:'',
     provice:''}
    }
  },
  mounted(){
    //this.onLoad();
    this.onLoad();
    this.clickMap()
  },
  methods: {
    all(){
      this.preMapCode = chinaJson;
      this.onLoad();
    },
    onLoad(){
      var dataList = [];

       this.iftrue.month=this.month;
       this.iftrue.yearFlag=this.yearFlag;

      getHeatMapProvince(this.iftrue).then(res => {
        console.log(res);
        var _data = res.data.data;
        this.loading = false;
        for (var i = 0; i < _data.length; i++) {
          dataList.push({
            name: _data[i].name,
            value: _data[i].value
          })
        };

        this.initMap('china', dataList)
      })
    },
    initMap(name, mapData){

      echarts.registerMap(name, this.preMapCode)
      var option = {
        tooltip: {
          formatter: function(params) {
            if (params.data) {
              return params.name + ':' + params.data.value;
            } else {
              return params.name + ':0'
            }
          }
        },
        visualMap: {
          show:false,
          min: 0,
          max: 10000,
          left: '50',
          text: ['高', '低'],
          inRange: {
            color: ['#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF']
          }
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: {
              readOnly: false
            },
            restore: {},
            saveAsImage: {}
          }
        },
        geo: {
          map: name,
          zoom: 1.2,
          label: {
            normal: {
              show: true,
              color: '#333',
              fontSize:9
            },
            emphasis: {
              show: false,
              color: '#fff'
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#fff',
              borderColor: '#b9b4b7',
            },
            emphasis: {
              areaColor: '#ff0000'
            }
          }
        },
        series: [{
          type: 'map',
          geoIndex: 0,
          map:name,
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true
            }
          },
          data: mapData
        }]
      };
      var myChart = echarts.init(document.getElementById('map'))
      myChart.setOption(option,true);
    },
    clickMap(){
      var myChart = echarts.init(document.getElementById('map'))
      myChart.on("click", param => {

        this.preName  = allProvince.provinces[param.name]; //地区name
        this.preMapCode = allProvince.provinces[param.name]; //地区的json数据
        this.getCity(param.name)
      });
    },
    getCity(name){
      var params={
        province:name,
        yearFlag:false
      }
      var dataList=[];
      getHeatMapCity(params).then(res =>{

        var _data = res.data.data;
        for (var i = 0; i < _data.length; i++) {
          dataList.push({
            name: _data[i].name,
            value: _data[i].value
          })
        }
        this.initMap(name, dataList)
      })
    }
  }
}
</script>

<style scoped>
.g-home {
  height: 100%;
  overflow: hidden;
#map{
  width: 49.5%;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
}
.all{
  cursor: pointer;
}
</style>

我们在props中获取父组件传递过来的值