第二篇： VUE使用 Echarts 画关系拓扑图，并带移动迁移特效

第二篇： VUE使用 Echarts 画关系拓扑图，并带移动迁移特效

前言：需求是使用 Echarts 画关系拓扑图，并带箭头迁移特效，为了效果更加明显，已将箭头效果放大，需要使用的话，可自行调整

效果图如下:

 

1.使用 npm 安装 Echarts：

npm install echarts --save

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

<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: [
        {
          coords: [
            [1, 120],
            [0, 0]
          ]
        },
        {
          coords: [
            [1, 240],
            [1, 360]
          ]
        },
        {
          coords: [
            [1, 360],
            [1, 240]
          ]
        },
        {
          coords: [
            [1, 240],
            [0, 0]
          ]
        },
        {
          coords: [
            [0, 0],
            [1, 240]
          ]
        },
        {
          coords: [[360], [0, 0]]
        },
        {
          coords: [
            [0, 0],
            [1, 360]
          ]
        },
        {
          coords: [
            [1, 360],
            [0, 0]
          ]
        }
      ]
    }
  },
  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: {
            //   symbol: 'circle',
            //   show: true,
            //   symbolSize: 20,
            //   trailLength: 0.2,
            //   color: 'red',
            //   smooth: true,
            //   period: 4,
            //   loop: true
            // },
            effect: {
              show: true,
              period: 4,
              smooth: true,
              trailLength: 0.2,
              symbol: 'arrow',
              // symbol: 'circle',
              color: 'rgba(55,155,255,0.5)',
              symbolSize: 20,
              loop: true
            },
            lineStyle: {
              normal: {
                color: '#1DE9B6',
                width: 3, // 线条宽度
                opacity: 0.6, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              }
            },
            data: this.lines
          }
        ]
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.echart-block {
  height: 100vh;
}
</style>

3.您的支持是我最大的动力，有疑问可留言，一起学习一起进步，谢谢🙏🙏