多色折线图鼠标移动导致的浏览器崩溃问题

[qingyunian220]

G2 5.0.18
window11 谷歌浏览器最新版
使用“多色折线图”，在鼠标在坐标轴上快速移动时会导致浏览器崩溃，示意图如下：

精简后的代码如下：

<template>
  <div class="ele-body">
    <div class="block-interval">
      <a-spin size="large" tip="Loading..." :spinning="state.spinning">
         <div>
          <div >
            <a-card :bordered="true" :style="{marginTop: '10px'}" >
              <div :style="{fontSize:'20px'}">氨氮（mg/L）</div>
              <div :id="'container0'"></div>
            </a-card>
          </div>
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script setup>
import {nextTick, onMounted, reactive} from 'vue';
import {Chart} from "@antv/g2";

const state = reactive({

  //加载状态
  spinning: false,

  //是否可见
  visible: true,

  // 表格搜索条件
  where: {},
  lineList: [],
  dataList: [],

});

// 组件挂载完成后
onMounted(async () => {
  reload();

});

/**
 * 搜索按钮
 *
 * @author liuzhong
 * @date 2023/01/11 15:35
 */
const reload = () => {

  //每次加载图前先销毁组件
  state.visible = false;
  state.lineList = [];
  state.spinning = true;
  console.log("初始化前数据")
  console.log(state.dataList);
  state.dataList = [
    {
      "data": [
        {
          "date": "2023-08-07 00:20:00",
          "condition": "未审核",
          "sortTime": "2023-08-07 00:20:00.000",
          "value": 0.42
        },
        {
          "date": "2023-08-07 04:20:00",
          "condition": "未审核",
          "sortTime": "2023-08-07 04:20:00.000",
          "value": 0.65
        },
        {
          "date": "2023-08-07 08:20:00",
          "condition": "已审核",
          "sortTime": "2023-08-07 08:20:00.000",
          "value": 0.64
        },
        {
          "date": "2023-08-07 12:20:00",
          "condition": "已审核",
          "sortTime": "2023-08-07 12:20:00.000",
          "value": 0.79
        },
        {
          "date": "2023-08-07 16:20:00",
          "condition": "已审核",
          "sortTime": "2023-08-07 16:20:00.000",
          "value": 0.82
        },
        {
          "date": "2023-08-07 20:20:00",
          "condition": "未审核",
          "sortTime": "2023-08-07 20:20:00.000",
          "value": 0.69
        },
        {
          "date": "2023-08-08 00:20:00",
          "condition": "未审核",
          "sortTime": "2023-08-08 00:20:00.000",
          "value": 0.91
        },
        {
          "date": "2023-08-08 04:20:00",
          "condition": "未审核",
          "sortTime": "2023-08-08 04:20:00.000",
          "value": 0.96
        }
      ],
      "decimalDigits": 2,
      "title": "氨氮（mg/L）"
    }
  ]

  if (state.dataList?.length > 0) {
    state.visible = true;
    nextTick(() => loadTrendQuery());
  }
  state.spinning = false;
};


//加载图
const loadTrendQuery = () => {

  console.log("数据")
  console.log(state.dataList);
  let data = state.dataList[0].data;
    state.lineList[0] = new Chart({
      container: 'container' + 0,
      theme: 'classic',
      // autoFit: true
    });
    state.lineList[0].line()
      .data({
        type: 'inline',
        value: data,
      })
      .scale('y', {nice: true})
      .scale('color', {
        domain: ['未审核', '已审核'],
        range: [
          '#858685',
          '#30cb13'
        ],
      })
      .encode('x', (d) => new Date(d.date))
      .encode('y', 'value')
      .encode('shape', 'hvh')
      .encode('color', 'condition')
      .encode('series', () => 'a')
      .style('gradient', 'x')
      .style('lineWidth', 2)
      .axis('x', { title: 'date' });
    state.lineList[0].render();


};

</script>
<script>
export default {
  name: 'TrendQuery'
};
</script>

<style lang="less">
.trend-query-ant-cascader-menu-wrapper {
  .ant-cascader-menu {
    height: 10%;
  }
}
</style>

[qingyunian220]

如果只是单纯的将数据复制出来在官网上进行渲染是复现不出来的。

[pearmini]

如果只是单纯的将数据复制出来在官网上进行渲染是复现不出来的。

可以提供一个复现的 live demo 吗？

[qingyunian220]

bug.mp4

[qingyunian220]

我这里演示用的前端框架用的是“ant design vue v3.1.1”，用纯vue项目也会有这种bug，基本排除了框架的影响。
刚不久尝试使用“chart.tooltip(false)”关闭提示框，发现还是会出现卡死的问题。

[pearmini]

可以像这个一样：https://codesandbox.io/s/funny-liskov-xmp3fj 把上面的情况复现一下吗？（这样排查起来会快一点！）

[qingyunian220]

问题已解决，这行代码“state.lineList[0] = new Chart({”里面的“state.lineList[0]”用一个新变量命名就好了，感谢！