动态数据中心扩散动效

效果

<template>
  <div id="login-box"></div>
</template>
<script>
import { chartData } from './data'
export default {
  data() {
    return {
      option: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  methods: {
    initCharts() {
      this.option = {
        backgroundColor: 'transparent',
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        tooltip: {
          show: false
        },
        series: [
          {
            type: 'graph',
            zlevel: 5,
            draggable: false,
            coordinateSystem: 'cartesian2d', //使用二维的直角坐标系（也称笛卡尔坐标系）
            label: {
              normal: {
                show: false
              }
            },
            data: chartData,
            links: [
              {
                source: '数据中心',
                target: '分数据中心一'
              },
              {
                source: '数据中心',
                target: '分数据中心二'
              },
              {
                source: '数据中心',
                target: '分数据中心三'
              }
            ],
            lineStyle: {
              normal: {
                opacity: 1,
                color: '#53B5EA',
                curveness: 0.5,
                width: 2
              }
            }
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            z: 1,
            zlevel: 2,
            animation: false,
            effect: {
              show: true,
              period: 8,
              trailLength: 0.01,
              symbolSize: 24,
              symbol: 'pin',
              loop: true,
              color: 'pink'
            },
            lineStyle: {
              normal: {
                color: '#22AC38',
                width: 0,
                curveness: 0.5 //值越大，曲度越大
              }
            },

            data: [
              {
                coords: [
                  [170, 200],
                  [400, 200]
                ]
              },
              {
                coords: [
                  [170, 200],
                  [10, 380]
                ]
              },
              {
                coords: [
                  [170, 200],
                  [10, 10]
                ]
              }
            ]
          }
        ]
      }
      const myChart = this.$echarts.init(document.getElementById('login-box'))
      myChart.setOption(this.option)
    }
  }
}
</script>