The issue has been closed

vue3 运行官网demo 不显示 #6510

8502596 posted onGitHub

问题描述

使用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>