前端绘制一个好看炫酷的流程图

---

一、效果图

因为是图片，所以不能展示动画效果，你们要看具体效果，就复制下面的代码到自己的项目里面去

二、直接上代码

<template>
  <div class="part">
    <div class="line_box">
      <svg height="505" width="450">
        <defs>
          <linearGradient id="lineGradient" x1="0" y1="0" x2="1" y2="1">
            <stop  offset="0%" stop-color="#70e9ff"></stop>
            <stop  offset="100%" stop-color="#07b6ff"></stop>
          </linearGradient>
        </defs>
        <image id="line_img" width="37" height="33" x="210" y="165" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAhCAYAAABeD2IVAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVBSURBVHgBpZhPixxFFMBf9fT823WibMCowYAfwJvgxcN6MqCIizmq4EWyK6gHwVNOi4IXwc3s6kFBEMRDQA/iOZ7EHP0EkU3UUXbdzZid2ZnpLt979V53dXdN74x5UFRNd/359atX770aAwuLNfDAYuxCvWA5AHP22OJEc9r+NLZukRCMKdTrXv/hAlA9D+Rm1i7XFTgzByiHURCCGEl7IvWsBiyWRVtSd7FWSAcYgHNgISgzF+YEogzmApZpDVQTFxtgUbgVSGvgbADqDCDSDIGcR6iptBMpJKkHF8kCDawbAkWAB9iL2qS5M8BimCcKRNohiDWsRwIyxTaB9DwwXwhmiCVioBTHWziH/Q6lDaK1Xtj4fU3lWvI1NMapCegUS8JainArHJQWngJrI4tEAkTlhDWUMmgb60PRGG2naqygrXma8rdMgVQ7K6w5AoxwUsN1VVMpzmG5XgGyRdKNA17Dcg9H6WEJaCsqnDrVEonakNoPAXVwmQmWlpQJfnPCwI2s0G96nvdp8LhU5vHnVTNZLx64uLqVkB/5qQe0wotFvNBUNNXiDTKdKB87NryRluegcS3WOp0+i6ZgxSZz19LNNGVkCyEObp1+zUiMmr50xrXbxhlrIeogmMWFrc2h2ghkEHXcFBMg6TCkxRqpwR0Emv+At9mUtzCuaEnF11IqtpM4oE4TGhYh0SIbYt7G07dFg7DtGSQGwcZTcIafiOGn2QkO+TjWVq4ptSc1cJKkuG0fvw8XX7kMV45QW8dY9g9hsPka/FCG2vgQXopSdK9DSJP7kN7+FW7c+hnuIojlbZyIS5jJes6uslA030/NSscd2x98BIONF6Bz6SK8e5QArD4OsPsdPPX2FfhMh735OVxtPQRbkyP8Jpx9eAKf3voJfXvsaTT1PjwgUfDphZK37sqEbTBPPw87d+7Cde362JOwuf0NbKFtRVtfwuYjT8CWvvv3EPrf92GHxvH4rvehiYSqhaEGUJv3PHcZ+r/tw24Gdgmubv8IX5xHQH02PEAlfpLDLyMKZb3UwknD884jOean7mRR++UXob9/G/a0e2cVntH28QD2blyDPshJpHE8fiTGrvMPKqmN9aGc9CRgxlJ0AiNt9UFTSHGx9I0N6P/uaYzk6A/Y+/Y96NN76peN0fH6obpGywvOJU2FpSGxK+ITk5BfxiOeGPLjdOTRf7/zKlz/+44D++dP2P3qLdih5/we+1F/9ucTdihuvka9eRQD8joOo+N5jPXDOHSE9VjChIaXmQsl7KtomabTwevb8OzX1+CXTJPyAQwUc6xLcHyC8yU4X4JGn+I6CWvqUWzfZDfBATkMpSnLOZzylAOyA5sKmDhSAiMg6+VTanMZkGqpKUBtLikH5WKmkEEV/RQZ2zpAlmlScjbz8qJU4lhbFqZ34iqy1EWNOhagU6mbDOcSv6a3fb3qIfOhbLadXYlVFJsoOaMJ7+PzVQD2yi6O5WHDd4R6QAhkLDBuvKtjLwvtQvC2U/boDqwnx3cm2eKavFWwSMAS0EuBc4rqPkgIqiVGrUB5kgelU1fQVPniUM0+ybY0N9fskwBWvUy0LLEHE8mWtRnMaakm6wxBQQHsL1nQz9P9S4NmED3w74N5KuxfHvw0mMSduOBtxts+emBN3gEXooEuE005mt+TLdXrlQJOPC21AQq3GL1mdaB6kwkAlTRVozGnger9j2RWCqz+XY9kifteDVQFDApwZcA66ZZCSPBmfOZ/CUEwqACSrC8AtcT/B6GFYAm4RcfXxDezSOz7v1IHvNh/USH5D8fM0/nzbT+DAAAAAElFTkSuQmCC"></image>
        <image id="line_img" width="37" height="33" x="210" y="295" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAhCAYAAABeD2IVAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVBSURBVHgBpZhPixxFFMBf9fT823WibMCowYAfwJvgxcN6MqCIizmq4EWyK6gHwVNOi4IXwc3s6kFBEMRDQA/iOZ7EHP0EkU3UUXbdzZid2ZnpLt979V53dXdN74x5UFRNd/359atX770aAwuLNfDAYuxCvWA5AHP22OJEc9r+NLZukRCMKdTrXv/hAlA9D+Rm1i7XFTgzByiHURCCGEl7IvWsBiyWRVtSd7FWSAcYgHNgISgzF+YEogzmApZpDVQTFxtgUbgVSGvgbADqDCDSDIGcR6iptBMpJKkHF8kCDawbAkWAB9iL2qS5M8BimCcKRNohiDWsRwIyxTaB9DwwXwhmiCVioBTHWziH/Q6lDaK1Xtj4fU3lWvI1NMapCegUS8JainArHJQWngJrI4tEAkTlhDWUMmgb60PRGG2naqygrXma8rdMgVQ7K6w5AoxwUsN1VVMpzmG5XgGyRdKNA17Dcg9H6WEJaCsqnDrVEonakNoPAXVwmQmWlpQJfnPCwI2s0G96nvdp8LhU5vHnVTNZLx64uLqVkB/5qQe0wotFvNBUNNXiDTKdKB87NryRluegcS3WOp0+i6ZgxSZz19LNNGVkCyEObp1+zUiMmr50xrXbxhlrIeogmMWFrc2h2ghkEHXcFBMg6TCkxRqpwR0Emv+At9mUtzCuaEnF11IqtpM4oE4TGhYh0SIbYt7G07dFg7DtGSQGwcZTcIafiOGn2QkO+TjWVq4ptSc1cJKkuG0fvw8XX7kMV45QW8dY9g9hsPka/FCG2vgQXopSdK9DSJP7kN7+FW7c+hnuIojlbZyIS5jJes6uslA030/NSscd2x98BIONF6Bz6SK8e5QArD4OsPsdPPX2FfhMh735OVxtPQRbkyP8Jpx9eAKf3voJfXvsaTT1PjwgUfDphZK37sqEbTBPPw87d+7Cde362JOwuf0NbKFtRVtfwuYjT8CWvvv3EPrf92GHxvH4rvehiYSqhaEGUJv3PHcZ+r/tw24Gdgmubv8IX5xHQH02PEAlfpLDLyMKZb3UwknD884jOean7mRR++UXob9/G/a0e2cVntH28QD2blyDPshJpHE8fiTGrvMPKqmN9aGc9CRgxlJ0AiNt9UFTSHGx9I0N6P/uaYzk6A/Y+/Y96NN76peN0fH6obpGywvOJU2FpSGxK+ITk5BfxiOeGPLjdOTRf7/zKlz/+44D++dP2P3qLdih5/we+1F/9ucTdihuvka9eRQD8joOo+N5jPXDOHSE9VjChIaXmQsl7KtomabTwevb8OzX1+CXTJPyAQwUc6xLcHyC8yU4X4JGn+I6CWvqUWzfZDfBATkMpSnLOZzylAOyA5sKmDhSAiMg6+VTanMZkGqpKUBtLikH5WKmkEEV/RQZ2zpAlmlScjbz8qJU4lhbFqZ34iqy1EWNOhagU6mbDOcSv6a3fb3qIfOhbLadXYlVFJsoOaMJ7+PzVQD2yi6O5WHDd4R6QAhkLDBuvKtjLwvtQvC2U/boDqwnx3cm2eKavFWwSMAS0EuBc4rqPkgIqiVGrUB5kgelU1fQVPniUM0+ybY0N9fskwBWvUy0LLEHE8mWtRnMaakm6wxBQQHsL1nQz9P9S4NmED3w74N5KuxfHvw0mMSduOBtxts+emBN3gEXooEuE005mt+TLdXrlQJOPC21AQq3GL1mdaB6kwkAlTRVozGnger9j2RWCqz+XY9kifteDVQFDApwZcA66ZZCSPBmfOZ/CUEwqACSrC8AtcT/B6GFYAm4RcfXxDezSOz7v1IHvNh/USH5D8fM0/nzbT+DAAAAAElFTkSuQmCC"></image>
        <polyline stroke="#07b6ff" points="110,110 110,140 229,140" class="edge"></polyline>
        <polyline stroke="#07b6ff" points="340,110 340,140 229,140" class="edge"></polyline>
        <polyline stroke="#07b6ff" points="229,140 229,172" class="edge"></polyline>
        <polyline stroke="#07b6ff" points="229,240 229,300" class="edge"></polyline>
      </svg>
    </div>
    <div class="step step1">{{ dataList[0].name }}</div>
    <div class="step step2">{{ dataList[1].name }}</div>
    <div class="step step3">{{ dataList[2].name }}</div>
    <div class="step step4">{{ dataList[3].name }}</div>
    <div @click="pgOpenWin" class="step5">开始评估</div>
  </div>
</template>

<script>
  export default {
    name: 'part1_2',
    components: {},
    data () {
      return {
        dataList: [
          {name: '设置资金'},
          {name: '资金分配'},
          {name: '模型分析'},
          {name: '预估结果'},
        ],
      }
    },
    watch: {},
    mounted () {
      this.init()
    },
    methods: {
      // 初始化加载
      async init () {
        this.$nextTick(() => {
        })
      },
      //开始评估按钮
      pgOpenWin(){
        // this.$emit('pgOpenWin')
      },
    },
  }
</script>

<style scoped lang="less" type="text/less">
  .part {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 450px;
    height: 505px;
    .line_box{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      svg{
        position: absolute;
        top: 0px;
        left: 0px;
        polyline {
          animation: dash 15000s linear infinite;
        }
        @keyframes dash {
          to {
            stroke-dashoffset: -600000;
          }
        }
      }
      .edge {
        stroke-width: 2.5px;
        stroke-linecap: round;
        stroke-dashoffset: 0;
        stroke-dasharray: 8;
        stroke-opacity: 1;
        fill: none;
      }
      .edge.gray {
        stroke: #b2cdeb;
      }
    }
    .step{
      width: 164px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      font-family: SourceHanSansCN-Medium;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #fefeff;
      position: absolute;
      text-shadow-shadow: 0px 1px 10px rgba(6, 48, 113, 1);
    }
    .step1,.step2,.step3,.step4,.step5,.step6,.step7,.step8,.step9,.step10,.step11{
      position: absolute;
      background: url("../img/22.png");
      //background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAAA0CAYAAAAE05MCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU3MzI4NEI1MTc1MzExRUY4Q0E0Q0FGQThCQzBDRDgzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU3MzI4NEI2MTc1MzExRUY4Q0E0Q0FGQThCQzBDRDgzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTczMjg0QjMxNzUzMTFFRjhDQTRDQUZBOEJDMENEODMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTczMjg0QjQxNzUzMTFFRjhDQTRDQUZBOEJDMENEODMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4cmyICAAACZklEQVR42uzdQUvbYBjA8adNqggbzIOOfZzuNEdyHMObDD3K8Au4dew85obIPoGX3dIxdtGPM2wPilS3Vmv3PNpoUt9GahOr7P+DYEhrD+HP8/KiNKWtw544vNPjvQDFsb5qgxf9ITG+0mNejyb3DQWwtnb657WsIOMYq8SIAjX0eO6K0nfFuL5NjBjdh8Xxo/SJEROelLYa78ZR+jfF+G1FAv0Rcu+Qg2ivJfWBa81klH5/t3O+gSmX0u/cWpbg976En36ItP5yN3F7j2dE1l5K+GxWJCPKhp+4IOXy1Ts231zE+PmnyHEn/RowqqO2yIa29HYhM8r0LtvrR/dlSWM8kPDrL5E/navrwDhssFlTqy80yifOKNNBJpbscFN/8bidugaMH6U2ZW19fH2+L8kOMjkJmYwoirU1zNAgiRGTQJC4v0H6nvscYEKCIP2y+xxgyQZBEiRYsgEmJB5EkBXPfQ4wIUGQBAmWbIAJCSYkwIQEExIgSLBkA0xI/F8Tkn+uAEs2wJINJiRAkGBTAzAhwYQECg7S89znABMSBMlXqeDeBmmbml6PG4T8lUqjB1mfmZKgc6JRcv+QZ4x6TFUuGrsxyPiL7dunEk3rK9MVCU66RIn8YrQ/SeuErO+1JMoKck6PppcYpaddiWzZ1g8IumfcTIzPVuCMGOfiIO2RXvbQmqpOyNSDk856EtmX3muYAbcTOciK0RqsxQ9OMrvNI6k+fXTtaV5R/wAyaWy3Ecf43VqMl+zLKPVDeRIs7koqxsFNzWWUwuOJMYEYr+2yiRKTjNEVZDLKBvcNBaoNxmj+CTAATzSa/mRIA9oAAAAASUVORK5CYII=") no-repeat center center;
      background-size: 100% 100%;
    }
    .step1{
      top: 60px;
      left: 30px;
    }
    .step2{
      top: 60px;
      right: 30px;
    }
    .step3{
      top: 190px;
      left: calc((100% - 164px) / 2);
    }
    .step4{
      top: 320px;
      left: calc((100% - 164px) / 2);
    }
    .step5{
      width: 164px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      font-size: 18px;
      font-family: SourceHanSansCN-Medium;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #fff;
      background: url("../img/21.png");
      background-size: 100% 100%;
      position: absolute;
      left: calc((100% - 164px) / 2);
      bottom: 50px;
      cursor: pointer;
    }
  }
</style>

代码里面的图片我放在下面，你们也可以用其他好看的图片：