图表自适应有点卡

[yibird]

Version

1.13.0

Link to Minimal Reproduction

图表自适应有点卡

Steps to Reproduce

图表自适应有点卡,当尺寸发生变化时，a图表会自适应,当渲染几个图表时,严重卡顿

Current Behavior

图表自适应有点卡,当尺寸发生变化时，a图表会自适应,当渲染几个图表时,严重卡顿

Expected Behavior

图表自适应有点卡,当尺寸发生变化时，a图表会自适应,当渲染几个图表时,严重卡顿

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[xile611]

@yibird 有没有在线demo

[yibird]

改变尺寸 图表的自适应 都是长任务

[yibird]

这是没有使用图表的 , 这个页面是使用 两个面积图,一个折线图 一个扇形图 一个词图,切换有明显卡顿 ,其中一个代码如下:

<template>
  <div ref="chartRef"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import VChart, { type ISpec } from '@visactor/vchart';

const chartRef = ref<HTMLElement>();
const vChart = ref<VChart>();

const renderChart = (el: HTMLElement | undefined) => {
  const spec = {
    type: 'area',
    data: {
      fields: {
        country: {
          domain: ['China', 'USA', 'EU', 'Africa'],
          sortIndex: 0,
        },
      },
      values: [
        { type: 'Nail polish', country: 'Africa', value: 4229 },
        { type: 'Nail polish', country: 'EU', value: 4376 },
        { type: 'Nail polish', country: 'China', value: 3054 },
        { type: 'Nail polish', country: 'USA', value: 12814 },
        { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
        { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
        { type: 'Eyebrow pencil', country: 'China', value: 5067 },
        { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
        { type: 'Rouge', country: 'Africa', value: 5221 },
        { type: 'Rouge', country: 'EU', value: 3574 },
        { type: 'Rouge', country: 'China', value: 7004 },
        { type: 'Rouge', country: 'USA', value: 11624 },
        { type: 'Lipstick', country: 'Africa', value: 9256 },
        { type: 'Lipstick', country: 'EU', value: 4376 },
        { type: 'Lipstick', country: 'China', value: 9054 },
        { type: 'Lipstick', country: 'USA', value: 8814 },
        { type: 'Eyeshadows', country: 'Africa', value: 3308 },
        { type: 'Eyeshadows', country: 'EU', value: 4572 },
        { type: 'Eyeshadows', country: 'China', value: 12043 },
        { type: 'Eyeshadows', country: 'USA', value: 12998 },
        { type: 'Eyeliner', country: 'Africa', value: 5432 },
        { type: 'Eyeliner', country: 'EU', value: 3417 },
        { type: 'Eyeliner', country: 'China', value: 15067 },
        { type: 'Eyeliner', country: 'USA', value: 12321 },
        { type: 'Foundation', country: 'Africa', value: 13701 },
        { type: 'Foundation', country: 'EU', value: 5231 },
        { type: 'Foundation', country: 'China', value: 10119 },
        { type: 'Foundation', country: 'USA', value: 10342 },
        { type: 'Lip gloss', country: 'Africa', value: 4008 },
        { type: 'Lip gloss', country: 'EU', value: 4572 },
        { type: 'Lip gloss', country: 'China', value: 12043 },
        { type: 'Lip gloss', country: 'USA', value: 22998 },
        { type: 'Mascara', country: 'Africa', value: 18712 },
        { type: 'Mascara', country: 'EU', value: 6134 },
        { type: 'Mascara', country: 'China', value: 10419 },
        { type: 'Mascara', country: 'USA', value: 11261 },
      ],
    },
    title: {
      visible: true,
      text: '销售额统计',
    },
    stack: true,
    xField: 'type',
    yField: 'value',
    seriesField: 'country',
    legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
    tooltip: {
      dimension: {
        updateContent: (data) => {
          if (!data) return;
          let sum = 0;
          data.forEach((datum) => {
            sum += +(datum.value || 0);
          });
          data.push({
            hasShape: false,
            key: 'Total',
            value: sum + '',
          });
          return data;
        },
      },
    },
    line: {
      style: {
        curveType: 'monotone',
      },
    },
  } as ISpec;
  vChart.value = new VChart(spec, { dom: el });
  vChart.value.renderSync();
};

onMounted(() => {
  setTimeout(() => {
    renderChart(chartRef.value);
  });
});

onUnmounted(() => {
  setTimeout(() => {
    vChart.value?.release();
  });
});
</script>

[yibird]

这是用的 anbt g2plot 的图表 改变尺寸 比较流畅 基本没有长任务

[xile611]

改变尺寸 图表的自适应 都是长任务

从这个图看来，性能的卡点似乎是词云图，可以临时去掉词云图测试一下