🐛 [Bug]: 代码活跃度图

[leehoisleeho]

Version

最新的

Angular Version

最新的

Link to minimal reproduction

<template>
  <h1>2024年有105项贡献</h1>
  <div style="width: 100%; overflow: auto" class="heatmap">
    <d-chart :option="option" style="width: 900px; height: 140px"></d-chart>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, nextTick } from "vue";
const _data = ref([]);
const list = ref([]);
const isShow = ref();
// 获取数据
const get = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      _data.value = [
        ["2024-01-01", 5],
        ["2024-02-01", 5],
        ["2024-03-01", 5],
        ["2024-04-01", 5],
        ["2024-06-01", 5],
        ["2024-07-01", 5],
        ["2024-08-01", 5],
        ["2024-09-01", 5],
        ["2024-10-01", 5],
        ["2024-01-01", 5],
      ];
      resolve();
    }, 3000);
  });
};

const getVirtualData = (year) => {
  const date = +new Date(year + "-01-01").getTime();
  const end = +new Date(year + "-12-31").getTime();
  const dayTime = 3600 * 24 * 1000;
  const data = [];
  for (let time = date; time <= end; time += dayTime) {
    let found = false; // 标志变量
    for (let item of _data.value) {
      if (item[0] === new Date(time).toISOString().split("T")[0]) {
        data.push([new Date(time).toISOString().split("T")[0], item[1]]);
        found = true;
        break; // 跳出内层循环
      }
    }
    if (!found) {
      data.push([new Date(time).toISOString().split("T")[0], 0]);
    }
  }
  list.value = data;
};

const option = reactive({
  tooltip: {
    trigger: "item",
    formatter: (param) => {
      return `<b>${param.value[0]}</b> <br/> ${param.value[1]}次提交`;
    },
  },
  visualMap: {
    show: false,
    min: 0,
    max: 10,
    inRange: {
      color: ["#ededed", "#beccfa", "#7693f5", "#526ecc", "#344899"],
    },
  },
  calendar: {
    top: "top",
    right: 20,
    left: 40,
    range: ["2024-01-01", "2024-12-31"],
    cellSize: 15,
    splitLine: {
      show: false,
    },
    yearLabel: {
      show: false,
    },
    monthLabel: {
      nameMap: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      position: "end",
    },
    dayLabel: {
      firstDay: 1,
      fontSize: 10,
      nameMap: ["日", "一", "", "三", "", "五", ""],
    },
    itemStyle: {
      borderWidth: 4,
      borderRadius: 4,
      borderColor: "#fff",
    },
  },
  series: [
    {
      type: "heatmap",
      coordinateSystem: "calendar",
      data: list.value,
      itemStyle: {
        borderRadius: 4,
      },
    },
  ],
});

// 监听 list 的变化，更新 option
watch(
  list,
  (newValue) => {
    console.log(newValue);
    option.series[0].data = newValue;
  },
  { deep: true }
);

onMounted(async () => {
  await get();
  getVirtualData("2024");
});
</script>

<style scoped lang="less">
.heatmap {
  height: 160px;
  padding-top: 0px;
}

h1 {
  padding-left: 40px;
  font-size: 18px;
}
</style>

Step to reproduce

代码活跃度图 ，

series: [
  {
	  type: 'heatmap',
	  coordinateSystem: 'calendar',
	  data: getVirtualData('2022'),
	  itemStyle: {
		  borderRadius: 4
	  }
  }
]

series.data的值变了，是不会重新渲染页面吗？ 还是我操作错了 ，能写个明确的文档吗？

What is expected

我觉的应该是请求到数据后，再去执行getVirtualData('2024'),然后页面重新渲染。

onMounted(async () => {
  await get();
  getVirtualData("2024");
});

What is actually happening

并没有重新渲染页面 。我不知道是不是我逻辑上有错误。请给详细文档。谢谢

Any additional comments (optional)

No response