colexiu-website/src/components/map.vue

<template>
  <div class="viewmap">
    <chart
      :options="map"
      :init-options="initOptions"
      ref="map"
      autoresize
      className="chart"
    />
    <!-- <img src="../assets/images/map.png"/>
    <svg class="lines" width="895" height="632">
      <line
        v-for="(item, index) in links"
        :key="index"
        :x2="item[0]"
        :y2="item[1]"
        x1="630"
        y1="288"
        stroke="rgba(45, 199, 170, 0.5)"
        stroke-width="2"
      />
    </svg>
    <div class="icon">
      <div class="dot"></div>
      <div class="pluse"></div>
      <div class="pluse-big"></div>
    </div> -->
  </div>
</template>
<script>
import ECharts from './ECharts.vue'
import 'echarts/lib/component/geo'
import 'echarts/lib/chart/map'
import 'echarts/map/js/china'

import china from './china.json'
import mapOption from './map-data'

// ECharts.registerMap('china', china)

const links = [
  [185, 275],
  [485, 350],
  [770, 235],
  [785, 155],
  [725, 270],
  [522, 573],
  [676, 498],
  [335, 375],
  [432, 470],
  [405, 575],
  [612, 510],
  [185, 440],
  [497, 528],
]
export default {
  name: 'viewmap',
  components: {
    chart: ECharts
  },
  data() {
    return {
      activeName: '北京',
      links,
      start: [190, 440],
      initOptions: {
        renderer: 'canvas'
      },
    }
  },
  computed: {
    map() {
      const { map } = this.$refs
      const option = mapOption(this.activeName)
      if (map && map.chart) {
        map.chart.clear()
        map.chart.setOption(option)
      }
      return option
    }
  },
  mounted() {
    const { map } = this.$refs
    if (map && map.chart) {
      map.chart.on('mousemove', evt => {
        if (evt.name && evt.name !== '南海诸岛') {
          this.activeName = evt.name
        }
      })
    }
  },
}
</script>
<style lang="less" scoped>
  .viewmap{
    width: 1100px;
    margin: auto;
    margin-top: -120px;
    position: relative;
    .chart{
      width: 100%;
      height: 900px;
    }
    img{
      max-width: 100%;
    }
    .lines{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .line{
      position: absolute;
    }
    .icon{
      position: absolute;
      z-index: 999;
      width: 26px;
      height: 26px;
      top: 275px;
      left: 615px;
      .dot{
        position: absolute;
        width: 8px;
        height: 8px;
        left: 9px;
        top: 9px;
        border-radius: 50%;
        background: rgba(45, 199, 170, 0.7);
        animation: shink 1.4s ease-out infinite;
      }
      .pluse{
        position: absolute;
        width: 26px;
        height: 26px;
        border: 2px solid #09f;
        border-radius: 50%;
        z-index: 100;
        opacity: 0;
        background: rgba(45, 199, 170, 0.6);
        animation: warn 1.4s ease-out;
        animation-iteration-count: infinite;
        box-shadow: 1px 1px 30px rgba(45, 199, 170, 1);
      }
      .pluse-big{
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid #09f;
        border-radius: 50%;
        z-index: 100;
        opacity: 0;
        background: rgba(45, 199, 170, 0.6);
        animation: warn1 1.4s ease-out;
        animation-iteration-count: infinite;
        box-shadow: 1px 1px 30px #EF2D02;
      }
    }
    @keyframes warn{
        0% {
            -moz-transform: scale(0);
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }
        100% {
            -moz-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0;
        }
    }
    @-webkit-keyframes warn{
        0% {
            -moz-transform: scale(0);
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }
        100% {
            -moz-transform: scale(1);
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0;
        }
    }
    @keyframes shink{
        0% {
            opacity: 0;
            transform: scale(0.5);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
  }
  line {
    stroke-dashoffset: 0;
    animation: dash 4s;
  }

  @keyframes dash {
    0% {
      stroke-dashoffset: 0;
    }
    1% {
      stroke-dasharray: 800;
      stroke-dashoffset: 800;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
</style>