如何提高网页中渲染大量图表的性能，尤其是滚动交互时的性能？

Question

我的用例涉及批量渲染大量图表。然而，这些图表表现出某种模式，其中整行或整列由相同类型的图表组成。我可以采取哪些方法来优化性能？当前的问题是，滚动时，图表渲染落后，导致滚动交互不稳定。

Answer 1

解决方案

根据您的用例，我建议使用表格和图表的组合来呈现大量图表。 VTable 组件能够实现这一点。您可以注册 VCharts 以在每个表格单元格内绘制图表。它可能具有内部渲染优化，从而带来流畅的滚动体验。

代码示例

import * as VTable from "@visactor/vtable";
import VChart from '@visactor/vchart';

VTable.register.chartModule('vchart', VChart);
  const records = [];
  for (let i = 1; i <= 10; i++) {
    for (let j = 1; j <= 10; j++) {
      const record = {
        region: 'region' + i,
      };
      record['category'] = 'category' + j;
      record.areaChart = [
        { x: '0', type: 'A', y: 900 + i + j },
        { x: '1', type: 'A', y: '707' },
        { x: '2', type: 'A', y: '832' },
        { x: '3', type: 'A', y: '726' },
        { x: '4', type: 'A', y: '756' },
        { x: '5', type: 'A', y: '777' },
        { x: '6', type: 'A', y: '689' },
        { x: '7', type: 'A', y: '795' },
        { x: '8', type: 'A', y: '889' },
        { x: '9', type: 'A', y: '757' },
        { x: '0', type: 'B', y: '773' },
        { x: '1', type: 'B', y: '785' },
        { x: '2', type: 'B', y: '635' },
        { x: '3', type: 'B', y: '813' },
        { x: '4', type: 'B', y: '678' },
        { x: '5', type: 'B', y: '796' },
        { x: '6', type: 'B', y: '652' },
        { x: '7', type: 'B', y: '623' },
        { x: '8', type: 'B', y: '649' },
        { x: '9', type: 'B', y: '630' },
      ];

      record.lineChart = [
        { x: '0', type: 'A', y: 900 + i + j },
        { x: '1', type: 'A', y: '707' },
        { x: '2', type: 'A', y: '832' },
        { x: '3', type: 'A', y: '726' },
        { x: '4', type: 'A', y: '756' },
        { x: '5', type: 'A', y: '777' },
        { x: '6', type: 'A', y: '689' },
        { x: '7', type: 'A', y: '795' },
        { x: '8', type: 'A', y: '889' },
        { x: '9', type: 'A', y: '757' },
        { x: '0', type: 'B', y: 500 },
        { x: '1', type: 'B', y: '785' },
        { x: '2', type: 'B', y: '635' },
        { x: '3', type: 'B', y: '813' },
        { x: '4', type: 'B', y: '678' },
        { x: '5', type: 'B', y: '796' },
        { x: '6', type: 'B', y: '652' },
        { x: '7', type: 'B', y: '623' },
        { x: '8', type: 'B', y: '649' },
        { x: '9', type: 'B', y: '630' },
      ];
      records.push(record);
    }
  }

const option = {
  records,
  defaultRowHeight:200,
  defaultHeaderRowHeight:50,
  indicators: [
    {
        indicatorKey: 'lineChart',
        title: 'Sales trend chart',
        headerStyle: {
          color: 'blue',
          // bgColor: 'yellow',
        },
        cellType: 'chart',
        chartModule: 'vchart',
        width: 300,
        chartSpec: {
          type: 'common',
          series: [
            {
              type: 'line',
              data: {
                id: 'data',
              },
              xField: 'x',
              yField: 'y',
              seriesField: 'type',
            },
          ],
          axes: [
            { orient: 'left', range: { min: 0 } },
            { orient: 'bottom', label: { visible: true }, type: 'band' },
          ],

        },
    },
      {
        indicatorKey: 'areaChart',
        title: 'Profit trend chart',
        headerStyle: {
          color: 'green',
        },
        cellType: 'chart',
        chartModule: 'vchart',
        width: 300,
        chartSpec: {
          type: 'common',
          series: [
            {
              type: 'area',
              data: {
                id: 'data',
              },
              xField: 'x',
              yField: 'y',
              seriesField: 'type',
              point: {
                style: {
                  fillOpacity: 1,
                  strokeWidth: 0,
                },
                state: {
                  hover: {
                    fillOpacity: 0.5,
                    stroke: 'blue',
                    strokeWidth: 2,
                  },
                  selected: {
                    fill: 'red',
                  },
                },
              },
              area: {
                style: {
                  fillOpacity: 0.3,
                  stroke: '#000',
                  strokeWidth: 4,
                },
                state: {
                  hover: {
                    fillOpacity: 1,
                  },
                  selected: {
                    fill: 'red',
                    fillOpacity: 1,
                  },
                },
              },
            },
          ],
          axes: [
            { orient: 'left', range: { min: 0 } },
            { orient: 'bottom', label: { visible: true }, type: 'band' },
          ],
        },
      },
    ],
    columnTree: [
      {
        dimensionKey: 'region',
        value: 'region1',
        children: [
          {
            indicatorKey: 'areaChart',
          },
          {
            indicatorKey: 'lineChart',
          },
        ],
      },
      {
        dimensionKey: 'region',
        value: 'region2',
        children: [
          {
            indicatorKey: 'areaChart',
          },
          {
            indicatorKey: 'lineChart',
          },
        ],
      },
      {
        dimensionKey: 'region',
        value: 'region3',
        children: [
          {
            indicatorKey: 'areaChart',
          },
          {
            indicatorKey: 'lineChart',
          },
        ],
      },
    ],
    rowTree: [
      {
        dimensionKey: 'category',
        value: 'category1',
      },
      {
        dimensionKey: 'category',
        value: 'category2',
      },
      {
        dimensionKey: 'category',
        value: 'category3',
      },
      {
        dimensionKey: 'category',
        value: 'category4',
      },
      {
        dimensionKey: 'category',
        value: 'category1',
      },
      {
        dimensionKey: 'category',
        value: 'category2',
      },
      {
        dimensionKey: 'category',
        value: 'category3',
      },
      {
        dimensionKey: 'category',
        value: 'category4',
      },
      {
        dimensionKey: 'category',
        value: 'category1',
      },
      {
        dimensionKey: 'category',
        value: 'category2',
      },
      {
        dimensionKey: 'category',
        value: 'category3',
      },
      {
        dimensionKey: 'category',
        value: 'category4',
      },
      {
        dimensionKey: 'category',
        value: 'category1',
      },
      {
        dimensionKey: 'category',
        value: 'category2',
      },
      {
        dimensionKey: 'category',
        value: 'category3',
      },
      {
        dimensionKey: 'category',
        value: 'category4',
      },
    ],
    corner: {
      titleOnDimension: 'row',
    },
    dragHeaderMode: 'all'
};
const tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID),option);

结果

在线演示：https://visactor.io/vtable/demo/cell-type/chart

相关文档

整合图表教程：https://visactor.io/vtable/guide/cell_type/chart

相关api：https://visactor.io/vtable/option/ListTable-columns-chart#cellType

github：https://github.com/VisActor/VTable