vue3 运行官网demo 不显示

[8502596]

问题描述

使用vue3 运行官网demo 不显示

重现链接

No response

重现步骤

<template>
    <div class="app">
        <div class="chart-container">
            <div class="chart-ins" id="chart-body"></div>
        </div>
    </div>
</template>
<script setup>
import { Chart } from "@antv/g2";
import { throttle } from "lodash";
import { onMounted, ref } from "vue";

onMounted(() => {
  const data = {};

  const chart = new Chart({
    container: 'chart-body',
    width: 640,
    height: 480,
    padding: 0,
  });

  chart.style({
    viewFill: '#4e79a7',
  });

  chart.data([]);
  chart.axis(false);

  chart
      .heatmap()
      .encode('x', 'x')
      .encode('y', 'y')
      .encode('color', 'v')
      .scale('x', { domain: [0, 640] })
      .scale('y', { domain: [0, 480], range: [0, 1] })
      .style('opacity', 0)
      .tooltip(false)
      .animate(false);

  chart.on(
      'plot:pointermove',
      throttle((e) => {
        const { x, y } = e;

        const kx = Math.floor(x - (x % 8));
        const ky = Math.floor(y - (y % 8));

        if (!data[kx]) data[kx] = {};
        if (!data[kx][ky]) data[kx][ky] = 0;

        data[kx][ky] += 1;

        const d = transform(data);
        console.log(d)
        chart.changeData(d);
      }),
  );
  chart.render().then(()=>{
    console.log("加载成功！");
  }).catch((err)=>{
    console.log(err.msg);

  });

  function transform(dataMap) {
    const arr = [];
    Object.keys(dataMap).forEach((x) => {
      Object.keys(dataMap[x]).forEach((y) => {
        arr.push({ x, y, v: dataMap[x][y] });
      });
    });
    return arr;
  }
});



</script>

<style lang="scss" scoped>
.app {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .chart-container {
        width: 1000px;
        height: 800px;
        //background-color: aqua;
        .chart-ins {
            width: 100%;
            height: 100%;
        }
    }
}
</style>

预期行为

实际

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[Hideinvirus]

我也遇到类似的问题，指定低版本可以解决，应该是最新版本出了问题

[8502596]

请问哪个版本 是可以的？目前 我试过 V5.2.2 V5.2.7 均不行 也不报错...

[Hideinvirus]

我试了5.1.x的版本是可以的， 可以使用--save-exact，安装具体版本

[hustcc]

我试了5.1.x的版本是可以的， 可以使用--save-exact，安装具体版本

那到底是为啥？

[8502596]

不行啊 我试了 5.2.X 5.1.X 5.0.X 均不行 只有热力图 渲染不成功 其他的很多都可以，换成 4.X 版本测试了 4.X 最后一个版本 是可以的

[Hideinvirus]

不行啊 我试了 5.2.X 5.1.X 5.0.X 均不行 只有热力图 渲染不成功 其他的很多都可以，换成 4.X 版本测试了 4.X 最后一个版本 是可以的

删除本地lock文件和node_modules重装再试试，5.1.x是可以的

[8502596]

#6512 (comment) 能力有限 只能追到这个位置了 不知道怎么构建 g2 测试一下