Echarts 画关系拓扑图，并带移动迁移特效，基于vue

效果图如下:

1.安装 Echarts：

npm install echarts --save

2.注意：由于关系拓扑图在 echarts配置中
类型 type 是 ‘graph’，其中连接线条是不带有 迁移（effect）特效的
需要配合 type：‘lines’ 同时使用，'lines’是带有 迁移（effect）特效的

vue完整代码如下（内有释义）

<template>
  <div class="echart-block">
    <div style="height:50%" ref="graphchart"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      echart: null,
      nodes: [
        {
          name: 'java',
          value: [0, 0],
          symbol: 'diamond'
        },
        {
          name: 'web',
          value: [1, 120],
          symbol: 'triangle'
        },
        {
          name: 'mysql',
          value: [1, 240]
        },
        {
          name: 'redis',
          value: [1, 360],
          symbol: 'diamond'
        }
      ],
      links: [
        {
          source: 'java',
          target: 'web',
          symbol: ['none', 'arrow'],
          label: {
            show: true,
            formatter: '×',
            padding: [0, 0, -13, 0],
            fontSize: 20
          },
          lineStyle: {
            color: 'blue',
            curveness: 0.1
          }
        }
      ],
      lines: [//箭头流动方向
        {//mysql-redis
          coords: [
            [1, 240],
            [1, 360]
          ]
        },
        {//redis-web
          coords: [
            [1, 360],
            [1, 120]
          ]
        },
        {//web-mysql
          coords: [
            [1, 120],
            [1, 240]
          ]
        },
        {//mysql-java
          coords: [
            [1, 240],
            [0, 0]
          ]
        },
        {//java-web
          coords: [
            [0, 0],
            [1, 120]
          ]
        },
        {//java-redis
          coords: [
            [0, 0],
            [1, 360]
          ]
        },
      ]
    }
  },
  components: {
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
       // 角度
      for (let i = 0; i < this.nodes.length; i++) {
        this.nodes[i].angle = (360 / this.nodes.length) * i
      }
      this.echart = echarts.init(this.$refs.graphchart)
      let option = {
        title: {
          text: 'Graph+lines 拓扑图'
        },
        polar: {},
        radiusAxis: {
          show: false
        },
        angleAxis: {
          type: 'value',
          min: 0,
          max: 360,
          show: false
        },
        series: [
          {
            type: 'graph',
            coordinateSystem: 'polar',
            label: {
              show: true,
              position: 'inside',
              fontSize: 14
            },
            // layout:'circular',
            symbol: 'circle',
            symbolSize: 50,
            symbolPosition: 'start',
            nodes: this.nodes,
            // links: this.links
          },
          {
            name: 'line-echart',
            type: 'lines',
            coordinateSystem: 'polar',
            zlevel: 1,
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            polyline: true,
            effect: {//移动图标设置
              show: true,
              period: 4,
              smooth: true,
              trailLength: 0.2,
              symbol: 'arrow',//箭头
              // symbol: 'circle',//原点
              // symbol: 'image://' + require('@/assets/logo.png'),//自定义图片
              color: 'rgba(55,155,255,0.5)',
              symbolSize: 15,//大小
              loop: true,//循环流动
            },
            lineStyle: {//连接线
              normal: {
                color: '#1DE9B6',
                width: 2, // 线条宽度
                opacity: 0.6, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              }
            },
            data: this.lines
          }
        ]
      }
      this.echart.setOption(option)
    }
  }
}
</script>
 
<style scoped>
.echart-block {
  height: 100vh;
}
</style>