VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Bug] 拖动缩略轴,图表右侧位置变了

Open webiamcome opened this issue 10 months ago • 2 comments

Version

1.10.5

Link to Minimal Reproduction

https://www.visactor.io/vchart/demo/data-zoom/data-zoom-big-data?version=1.10.5

Steps to Reproduce

1、复制如下代码覆盖该链接的代码 https://www.visactor.io/vchart/demo/data-zoom/data-zoom-big-data?version=1.10.5

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: 'bottom',
    type: 'band',
    seriesId: ['area1']
  }],
  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;

2、拖动左侧缩略轴手柄向左侧移动 3、会发现图表右侧向左偏移 image image

Current Behavior

拖动缩略轴左侧手柄向左侧移动时,图表右侧位置发生了变化

Expected Behavior

缩略轴拖动时,不影响视觉效果上的图表大小

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

webiamcome avatar Apr 28 '24 08:04 webiamcome