VChart icon indicating copy to clipboard operation
VChart copied to clipboard

缩略轴大数据量场景下,如何支持标签布局(自动省略、自动旋转)且拖动不卡顿?

Open webiamcome opened this issue 10 months ago • 1 comments

需求: 图表数据量很大,且轴标签文本过长,想使用自动省略布局,但需要设置 sampling: false,从而导致缩略轴拖动有卡顿现象。

卡顿 demo: https://codesandbox.io/p/sandbox/hopeful-ritchie-dpr2ld?file=%2Fsrc%2Findex.ts

官方 demo:(缩略轴支持大数据量场景下交互) https://visactor.io/vchart/demo/data-zoom/data-zoom-big-data

spec 参数:

const responseOrder = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/order-count-data.json');
const dataOrder = await responseOrder.json();

const responseProfit = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/profit-count-data.json');
const dataProfit = await responseProfit.json();

const spec = {
  color: [
    '#33ADFF',
    '#FFCF33',
    '#FFA763',
    '#9F97FF',
    '#FF97BC'
  ],
  type: 'common',
  series: [{
    id: 'area1',
    type: 'area',
    dataId: 'areaData1',
    xField: 'time',
    yField: 'value',
    point: {
      visible: false
    },
    area: {
      style: {
        fillOpacity: 0.2,
        lineWidth: 1
      }
    },
    name: '成交订单数'
  }, {
    id: 'area2',
    type: 'area',
    dataId: 'areaData2',
    xField: 'time',
    yField: 'value',
    point: {
      visible: false
    },
    area: {
      style: {
        fillOpacity: 0.2,
        lineWidth: 1
      }
    },
    name: '成交金额'
  }],
  axes: [{
    orient: 'left',
    seriesId: 'area1'
  },{
    orient: 'right',
    seriesId: 'area2'
  },{
    orient: 'bottom',
    type: 'band',
    sampling: false, // 改动的地方
    tick: {visible: false}, // 改动的地方
    label: { // 改动的地方
      autoHide: true,
      autoHideMethod: 'parity',
      autoRotate: true,
      autoLimit: true,
    },
    seriesId: ['area1', 'area2']
  }],
  dataZoom: [
    {
      orient: 'bottom',
      start: 0.95,
      end: 1,
      // maxSpan: 0.05,
      tolerance: 4,
      selectedBackgroundChart: {
        area: {
          visible: false,
          style: {
            visible: false
          }
        },
        line: {
          visible: false,
          style: {
            visible: false
          }
        }
      }
    }
  ],
  data: [
    {
      id: 'areaData1',
      values: dataOrder
    },
    {
      id: 'areaData2',
      values: dataProfit
    }
  ]
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

webiamcome avatar Apr 07 '24 09:04 webiamcome

这个问题有大佬看吗?期望5.1 前修复

webiamcome avatar Apr 24 '24 07:04 webiamcome