SocialNetworks_duan/src/views/LinkPrediction/components/userChart.vue

<template>
  <div class="userChart-component">
    <img :src="title" alt="" class="title" />
    <div class="userChart-container">
      <div class="baseLine-back">
        <div class="baseline" v-for="(item, index) in baseLineList" :key="index">
          <div class="baseline-head-number">{{ item }}</div>
          <div class="measure-column-line"></div>
        </div>
      </div>
      <div class="interaction-list">
        <div class="interaction-item" v-for="item in userChartList" :key="item.id">
          <div class="avatar-list">
            <img
              class="avatar-item"
              v-for="child in item.group"
              :key="child.id"
              :src="child.avatar"
            />
          </div>
          <div class="proportion-line-item">
            <div class="proportion-line">
              <div class="reality-ratio-line" :style="`width: ${item.number * 100 - 9}%`">
                <div class="ratio">{{ item.number }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
const baseLineList = [0, 0.2, 0.4, 0.6, 0.8, 1, "数量"];
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  userChartList: {
    type: Array,
    default: []
  }
});
</script>

<style scoped lang="less">
.userChart-component {
  width: 100%;
  height: 100%;
  .title {
    margin-top: -8px;
    margin-left: -2px;
  }
  .userChart-container {
    padding: 0px 20px;

    .baseLine-back {
      width: 218px;
      display: flex;
      position: relative;
      left: 93px;
      display: flex;
      justify-content: space-between;
      top: 17px;
      .baseline {
        display: flex;
        flex-direction: column;
        align-items: center;
        .baseline-head-number {
          font-family: D-DIN;
          font-size: 12px;
          color: #94c1ec;
        }
        .measure-column-line {
          position: absolute;
          height: 170px;
          width: 1px; /* 不建议 0.5px，兼容性差 */
          background-image: repeating-linear-gradient(
            to bottom,
            rgba(57, 69, 106, 0.86) 0,
            rgba(57, 69, 106, 0.86) 4px,
            /* 实线段长度 */ transparent 4px,
            transparent 8px /* 4+4=8px 为一个周期 */
          );
          top: 25px;
        }
      }
    }
    .interaction-list {
      .interaction-item {
        width: 100%;
        height: 30px;
        margin: 30px 0;
        display: flex;
        align-items: center;
        .avatar-list {
          display: flex;
          .avatar-item {
            width: 32px;
            height: 32px;
            margin-right: 10px;
            border-radius: 4px;
          }
        }

        .proportion-line-item {
          width: 100%;
          height: 50px;
          margin-left: 38px;
          overflow: hidden;
          display: flex;
          align-items: center;
          .proportion-line {
            width: 95%;
            background-color: #1b2c3e;
            height: 8px;
            border-radius: 10px;
            .reality-ratio-line {
              width: 70px;
              height: 100%;
              background: linear-gradient(90deg, #2e7cfb 0%, #3adbf3 100%);
              border-radius: 10px;
              position: relative;

              .ratio {
                color: #2ab8fd;
                font-family: D-DIN;
                font-size: 16px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                position: absolute;
                right: -40px;
                top: -10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>