yudao-init/src/views/copilot/components/charts/base/DoubleRingChart.vue

<!-- 
    filename: DoubleRingChart.vue
    author: liubin
    date: 2024-04-17 11:01:55
    description: 
-->

<template>
  <div class="double-ring-chart">
    <div ref="chart" class="double-ring-chart__container"></div>
    <!--   :style="{ height: vHeight + 'vh' }" -->
    <div class="double-ring-chart__legend">
      <div v-for="item in legendItems" :key="item.label" class="legend-item">
        <span class="legend-item__label">{{ item.label }}</span>
        <span class="legend-item__value">{{
          item.value.toLocaleString()
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import chartMixin from "@/mixins/chart.js";
import fullscreenMixin from "@/mixins/fullscreen.js";
import getOptions from "./double-ring-chart-options";

export default {
  name: "DoubleRingChart",
  mixins: [chartMixin, fullscreenMixin],
  props: {
    vHeight: {
      type: Number,
      default: 24,
    },
    period: {
      type: String,
      default: "日",
    },
    dataSource: {
      type: String,
      default: null,
    },
  },
  data() {
    return {};
  },
  computed: {
    legendItems() {
      return calculateItems(this.period);
    },
    options() {
      // TODO: 此处更新数据
      let titleValue = "10%",
        subtitle = "测试子标题",
        previousSum = 10,
        currentSum = 0,
        targetSum = 100;

      return getOptions({
        titleValue,
        subtitle,
        previousSum,
        currentSum,
        targetSum,
      });
    },
  },
  mounted() {
    this.initOptions(this.options);
  },
  methods: {
    // fullscreen mixin 需要的回调
    fullscreenCallback(isFullscreen) {
      console.log("isFullscreen--->", isFullscreen);
    },
  },
};

function calculateItems(period) {
  let items = [];
  const today = new Date().getDate();
  const month = new Date().getMonth() + 1;
  const year = new Date().getFullYear();
  switch (period) {
    case "日":
      items = [
        { label: `${month}月${today}日累计`, value: 24 },
        { label: `去年${month}月${today}日累计`, value: 33 },
      ];
      break;
    case "周":
      items = [
        { label: `本周累计`, value: 32 },
        { label: `去年本周累计`, value: 12 },
      ];
      break;
    case "月":
      items = [
        { label: `${month}月累计`, value: 24 },
        { label: `去年${month}月累计`, value: 33 },
        { label: `${month}月目标`, value: 12334 },
      ];
      break;
    case "年":
      items = [
        { label: `${year - 1}年累计`, value: 23234 },
        { label: `${year}年累计`, value: 4324 },
        { label: `${year}年目标`, value: 12334 },
      ];
      break;
  }
  return items;
}
</script>

<style scoped>
.double-ring-chart {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.double-ring-chart__container {
  flex: 1;
  height: 0;
}

.double-ring-chart__legend {
  padding: 12px;
  color: #fff;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.legend-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.legend-item__label {
  position: relative;
}

.legend-item__label::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 2px;
  top: 6px;
  left: -18px;
}

.legend-item:nth-child(1) .legend-item__label::before {
  background: #12fff5;
}
.legend-item:nth-child(1) .legend-item__value {
  color: #12fff5;
}

.legend-item:nth-child(2) .legend-item__label::before {
  background: #0f65ff;
}
.legend-item:nth-child(2) .legend-item__value {
  color: #0f65ff;
}

.legend-item:nth-child(3) .legend-item__label::before {
  background: #003982;
}
</style>