地图打点下钻

<template>
  <div style="width:100%;height:100%;">
    <div ref="mapChart" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
  import * as  echarts from 'echarts'

  require('echarts/theme/macarons') // echarts theme
  import resize from '../components/mixins/resize'
  import shengming from '@/assets/image/bigScreen/provPlatform/shengming.png'
  import {getSysprovincialArea} from '@/api/system/provincalArea'

  const animationDuration = 6000
  const areaProv = { '山东省': [{ name: '济南市', value: [117.1582, 36.8701] }] }
  const allArea = [{ name: '黑龙江', value: [127.9688, 47.368] }, {
    name: '内蒙古',
    value: [110.3467, 41.4899]
  }, { name: '吉林', value: [125.8154, 44.2584] },
    { name: '北京市', value: [116.4551, 40.2539] },
    { name: '辽宁', value: [123.1238, 42.1216] },
    { name: '河北', value: [114.4995, 38.1006] },
    { name: '天津', value: [117.4219, 39.4189] },
    { name: '山西', value: [112.3352, 37.9413] },
    { name: '陕西', value: [109.1162, 34.2004] },
    { name: '甘肃', value: [103.5901, 36.3043] },
    { name: '宁夏', value: [106.3586, 38.1775] },
    { name: '青海', value: [101.4038, 36.8207] },
    { name: '新疆', value: [87.611053, 43.828171] },
    { name: '西藏', value: [91.117212, 29.646922] },
    { name: '四川', value: [103.9526, 30.7617] },
    { name: '重庆', value: ["108.384366", "30.439702"] },
    { name: '山东省', value: ["117.1582", "36.8701"], id: 2 },
    { name: '河南', value: [113.4668, 34.6234] },
    { name: '江苏', value: [118.8062, 31.9208] },
    { name: '安徽', value: [117.29, 32.0581] },
    { name: '湖北', value: [114.3896, 30.6628] },
    { name: '浙江', value: [119.5313, 29.8773] },
    { name: '福建', value: [119.4543, 25.9222] },
    { name: '江西', value: [116.0046, 28.6633] },
    { name: '湖南', value: [113.0823, 28.2568] },
    { name: '贵州', value: [106.6992, 26.7682] },
    { name: '云南', value: [102.9199, 25.4663] },
    { name: '广东', value: [113.12244, 23.009505] },
    { name: '广西', value: [108.479, 23.1152] },
    { name: '海南', value: [110.3893, 19.8516] },
    { name: '上海', value: [121.4648, 31.2891] }

  ]
  export default {
    mixins: [resize],

    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      chartData: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        domImg: require('@/assets/image/bigScreen/provPlatform/bbgg.jpg'),
        mapDatav: {
          id: 'mapCharts',
          mapAra: require('../components/json/china.json'),
          name: 'china',
          aspectScale: 0.85, //长宽比
          zoom: 1.63,
          top: '27%',
          left: '20%'
        },
        level: 0,
        allAreav: [],
        tempAllArea: [],
        chart: null,
        provinces: {
          '山东区': require('../components/json/山东省.json'),
          '广东区': require('../components/json/guangdong.json'),
          '广西区': require('../components/json/guangxi.json'),
          '河北区': require('../components/json/hebei.json'),
          '河南区': require('../components/json/henan.json'),
          '黑龙江区': require('../components/json/heilongjiang.json'),
          '吉林区': require('../components/json/jilin.json'),
          '辽宁区': require('../components/json/liaoning.json'),
          '内蒙古区': require('../components/json/neimenggu.json'),
          '北京区': require('../components/json/beijing.json'),
          '天津区': require('../components/json/tianjin.json'),
          '山西区': require('../components/json/sanxi.json'),
          '陕西区': require('../components/json/shanxi.json'),
          '江苏区': require('../components/json/jiangsu.json'),
          '安徽区': require('../components/json/anhui.json'),
          '浙江区': require('../components/json/zhejiang.json'),
          '湖北区': require('../components/json/hubei.json'),
          '湖南区': require('../components/json/hunan.json'),
          '上海区': require('../components/json/shanghai.json'),
          '江西区': require('../components/json/jiangxi.json'),
          '福建区': require('../components/json/fujian.json'),
          '贵州区': require('../components/json/guizhou.json'),
          '云南区': require('../components/json/yunnan.json'),
          '海南区': require('../components/json/hainan.json'),
          '重庆区': require('../components/json/chongqing.json'),
          '四川区': require('../components/json/sichuan.json'),
          '甘肃区': require('../components/json/gansu.json'),
          '宁夏区': require('../components/json/ningxia.json'),
          '新疆区': require('../components/json/xinjiang.json'),
          '青海区': require('../components/json/qinghai.json')
        }

      }
    },
    mounted() {
      this.getAllInfo(1)
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.initChart(val)
        }
      }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      /**
       * 全部打点
       * */
      getAllInfo(id) {
        let that = this
        getSysprovincialArea(id).then(response => {
          let data = response.data[0].children
          that.allAreav = data
          that.tempAllArea = data

          that.initChart()
        });
      },
      goBack() {
        let that = this
        that.mapDatav = {
          id: 'mapCharts',
          mapAra: require('../components/json/china.json'),
          name: 'china',
          aspectScale: 0.85, //长宽比
          zoom: 1.63,
          top: '27%',
          left: '20%'
        }
        that.level = 0
        that.allAreav = that.tempAllArea
        let params = { level: that.level, id: 1 }
        that.$emit('chageLevel', params)
        that.initChart()
      },
      initChart() {
        let that = this
        echarts.registerMap(that.mapDatav.name, that.mapDatav.mapAra)
        that.chart = echarts.init(that.$el, 'macarons')
        let data = [{
          name: '景山公园',
          value: ['116.489356', '39.94083'],
          id: 4,
          code: '110000Z0004',
          type: 'Z',
          date: '2019-10-01',
          city: '北京市',
          bg: 'url(\'http://localhost/static/img/bbgg.795949cc.jpg\')'
        }
        ]
        let option = {
          tooltip: {
            show: true,
            triggerOn: 'none',
            padding: 0,
            enterable: true,
            position: 'right',
            className: 'custom-tooltip-box',
            transitionDuration: 1,
            textStyle: {
              color: '#000',
              decoration: 'none'
            },
            formatter: function(params) {
              let data = params.data
              if(data.finalTime){
                data.finalTime = data.finalTime.substring(0,10)
              }
              let bg1
              if (Date.parse(data.finalTime) > new Date()){
                bg1="custom-tooltip-style"
              } else {
                bg1= "custom-tooltip-style2"
              }
/*            <div style="background-image:${bg1}" class="shengImag"></div>*/
              const tipHtml = ` <div  class=${bg1}>
                                <table style="width: 100%;height: 100%">
                                <tr>
                                <td class="titleCss">租赁面积：</td>
                                <td class="numcss">${data.leasedArea}m²</td>
                                <td style="width: 5vw" rowspan="3" ><div class="shengImag"></div></td>
                                </tr>
                                             <tr>
                                <td class="titleCss">租期到期：</td>
                                <td class="numcss">${data.finalTime==null?"无":data.finalTime}</td>
                                </tr>
                                             <tr>
                                <td class="titleCss">人数：</td>
                                <td class="numcss">${null===data.staffNum?0:data.staffNum}人</td>
                                </tr>
                                <tr>
                                <td class="titleCss">租金：</td>
                                <td class="numcss" colspan="4">${data.annualRent}万元/年</td>
</tr>
                                <tr>
                                <td class="titleCss">地址：</td>
                                <td class="numcss" colspan="4">${data.address}</td>
</tr>
</table>

                              </div>`
              return tipHtml
            }
          },
          geo: {
            map: that.mapDatav.name,
            aspectScale: that.mapDatav.aspectScale, //长宽比
            zoom: that.mapDatav.zoom,
            top: that.mapDatav.top,
            left: that.mapDatav.left,
            layoutSize: '100%',
            itemStyle: {
              normal: {
                shadowColor: '#276fce',
                shadowOffsetX: 0,
                shadowOffsetY: 15,
                opacity: 0.5
              },
              emphasis: {
                areaColor: '#276fce'

              }
            },
            regions: [
              {
                name: '南海诸岛',
                value: 0,
                itemStyle: {
                  normal: {
                    opacity: 0,
                    label: {
                      show: false
                    }
                  }
                }
              }
            ]

          },
          series: [
            // 柱状体的底部
            {
              name: '',
              type: 'scatter',
              coordinateSystem: 'geo',
              label: {
                // 这儿是处理的
                formatter: '{b}',
                position: [15, 10],
                color: '#DCE8FF',
                fontSize: 12,
                fontStyle: "oblique",
                fontWeight: "bold",
                fontFamily: "Arial",
                distance: 10,
                show: true
              },
              symbol: 'image://' + shengming,
              symbolSize: [70, 60],
              itemStyle: {
                // color: '#F7AF21',
                color: 'rgb(22,255,255, 1)',
                opacity: 1
              },
              data: that.allAreav
            },
            {
              type: 'map',
              selectedMode: false,
              mapType: that.mapDatav.name,
              aspectScale: that.mapDatav.aspectScale, //长宽比
              top: that.mapDatav.top,
              left: that.mapDatav.left,
              layoutSize: '100%',
              zoom: that.mapDatav.zoom, //当前视角的缩放比例
              // roam: true, //是否开启平游或缩放
              scaleLimit: { //滚轮缩放的极限控制
                min: 1,
                max: 2
              },
              itemStyle: {
                normal: {
                  /*          areaColor: {
                              type: "pattern",
                              image: that.domImg, //配置图片
                              repeat: "no-repeat", //可选值repeat、no-repeat、repeat-x、repeat-y
                            },*/
                  areaColor: '#12235c',
                  borderColor: '#2ab8ff',
                  borderWidth: 1,
                  shadowColor: 'rgba(0,54,255, 0.4)',
                  shadowBlur: 100

                },
                emphasis: {
                  areaColor: '#0980bb',
                  label: {
                    color: '#fff'
                  }

                }
              },
              data: that.allAreav
            }
          ]
        }
        that.chart.on('mouseout', params => {
          if (params.componentType === 'series' && params.componentSubType === 'scatter') {
            // 取消所有散点高亮
            that.chart.dispatchAction({
              type: 'hideTip',
              seriesIndex: 0 //第几条series
            })
          }

        })
        that.chart.on('mouseover', params => {
          if (params.componentType === 'series' && params.componentSubType === 'scatter') {
            const index = params.dataIndex
            // 取消所有散点高亮
            that.chart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0 //第几条series
            })
            // 显示指定data 的tooltip
            that.chart.dispatchAction({
              type: 'showTip',
              seriesIndex: 0, //第几条series
              dataIndex: index //第几个tooltip
            })
            // 高亮指定的散点
            that.chart.dispatchAction({
              type: 'highlight',
              seriesIndex: 0, //第几条series
              dataIndex: index //第几个tooltip
            })
          }
        })
        that.chart.on('click', params => {
          if (that.level == 1) {
            return
          }
          if (that.provinces[params.name]) {
            that.mapDatav.aspectScale = 0.85
            that.mapDatav.zoom = 0.95
            that.mapDatav.top = '10%'
            that.mapDatav.left = '10%'
            that.level = 1
            that.mapDatav.name = params.name
            that.mapDatav.mapAra = that.provinces[params.name]
            that.allAreav = params.data.children
            that.chart.dispatchAction({
              type: 'hideTip',
              seriesIndex: 0 //第几条series
            })
            let paramsv = { level: that.level, id: params.data.id }
            that.$emit('chageLevel', paramsv)
            that.initChart()
          }
        })
        that.chart.setOption(option)
        window.addEventListener('resize', function() {
          that.chart.resize()
        })
      }

    }
  }
</script>
<style scoped lang="scss">

  /deep/ .custom-tooltip-box {
    width: 15vw;
    //height: 16vh;
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
    // 给子盒子自定义样式
    .custom-tooltip-style {
      width: 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('../../../assets/image/bigScreen/provPlatform/bianzu.png');
      color: #fff;
      .titleCss {
        text-align: right;
        color: rgba(220, 232, 255, 1);
      }

      .numcss {
        white-space:normal; width:100%;
        color: rgba(0, 251, 240, 1);
      }

      table {
        height: calc(100% - 2vh);
        padding: 1vh;
      }

      table tr td {
        height: 20%;
        width: 25%;
        font-size: 1.2vh
      }

      .shengImag {
        width: 6vw;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
          background-image: url('../../../assets/image/bigScreen/provPlatform/1.png');

      }
    }
    .custom-tooltip-style2 {
      width: 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('../../../assets/image/bigScreen/provPlatform/bianzu2.png');
      color: #fff;
      .titleCss {
        text-align: right;
        color: rgba(220, 232, 255, 1);
      }

      .numcss {
        white-space:normal; width:100%;
        color: rgba(0, 251, 240, 1);
      }

      table {
        height: calc(100% - 2vh);
        padding: 1vh;
      }

      table tr td {
        height: 20%;
        width: 25%;
        font-size: 1.2vh
      }

      .shengImag {
        width: 6vw;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('../../../assets/image/bigScreen/provPlatform/1.png');

      }
    }

  }

  .tipbox {
    width: 28vw;
    background-image: url("../../../assets/image/bigScreen/provPlatform/bianzu.png");
    border: 1px solid rgba(7, 166, 255, 0.7);
  }
</style>