自定义渐变色块甘特图

最新推荐文章于 2024-11-15 11:58:50 发布

萌新之路

最新推荐文章于 2024-11-15 11:58:50 发布

阅读量677

点赞数

分类专栏： vue 文章标签：甘特图 vue

本文链接：https://blog.youkuaiyun.com/qq_44162778/article/details/125905802

版权

vue 专栏收录该内容

49 篇文章

订阅专栏

本文展示了如何在Vue中实现父组件向子组件传递数据，并在子组件中进行动态渲染，包括根据数据生成进度条效果和底部颜色标签。利用map函数处理数据，通过计算属性计算最大值来确定进度条宽度，并使用颜色转换函数将十六进制颜色转为rgba。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述

父组件向子组件传入data数据：
（以下数据是用的随机数）

 list: [
        "aa",
        "bb",
        "cc",
        "dd",
        "ee",
        "ff",
        "gg231224342",
      ].map((e) => ({
        address: e,
        data: ["吃饭", "睡觉", "耍手机"].map((i, idx) => ({
          name: i,
          num: Math.floor(Math.random() * 25),
          color: ["#ee736f", "#ffd137", "#1cd0f6"][idx],
        })),
      })),

核心子组件：

<template>
  <div>
    <div class="top">标题：</div>
    <div class="unit" v-for="(i, idx) in data" :key="idx">
      <div class="label" :title="i.address">{{ i.address }}</div>
      <div class="box">
        <div
          class="process_unit"
          v-for="(t, index) in i.data"
          :key="index"
          :style="`flex: 0 0 ${(t.num / unitWidth) * 100}%;`"
        >
          <span>{{ t.num }}</span>
          <div
            class="p_u"
            :style="`background: linear-gradient(to right,${hexToRgba(
              t.color,
              100
            )},${hexToRgba(t.color, 10)});`"
          ></div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div v-for="(item, index) in data[0].data" :key="index">
        <div class="flag" :style="`background: ${item.color}`"></div>
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import hexToRgba from "hex-rgba";//颜色格式 hex 转 rgba
export default {
  name: "List",
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  created() {
    this.hexToRgba = hexToRgba;
  },
  computed: {
    unitWidth() {
      let maxTotal = 0;
      this.data.map((i) => {
        let result = i.data.reduce(
          (total, curr) => total + Number(curr.num),
          0
        );
        if (result > maxTotal) {
          maxTotal = result;
        }
      });
      return maxTotal;
    },
  },
  mounted() {
    console.log("---------------", this.data);
  },
};
</script>

<style lang="scss" scoped>
.top {
  margin-bottom: 15px;
}
.unit {
  display: flex;
  align-items: center;
  height: 38px;
  .label {
    flex: 0 0 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .box {
    display: flex;
    flex: 1;
  }
  .process_unit {
    position: relative;

    span {
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateY(-50%);
    }
    .p_u {
      height: 12px;
    }
  }
}
.footer {
  display: flex;
  justify-content: flex-end;
  & > div {
    display: flex;
    align-items: center;
    margin-right: 15px;
    .flag {
      margin-right: 4px;
      height: 6px;
      width: 6px;
    }
  }
}
</style>