diff --git a/__tests__/bugs/issue-3749-spec.ts b/__tests__/bugs/issue-3749-spec.ts new file mode 100644 index 0000000000..3c23443ee3 --- /dev/null +++ b/__tests__/bugs/issue-3749-spec.ts @@ -0,0 +1,53 @@ +import { DualAxes } from '../../src'; +import { createDiv } from '../utils/dom'; + +describe('#3749', () => { + it('dual-axes', async () => { + const data = [ + { time: '10:10', call: 4, waiting: 2, people: 2 }, + { time: '10:15', call: 2, waiting: 6, people: 3 }, + { time: '10:20', call: 13, waiting: 2, people: 5 }, + { time: '10:25', call: 9, waiting: 9, people: 1 }, + { time: '10:30', call: 5, waiting: 2, people: 3 }, + { time: '10:31', call: 6, waiting: 3, people: 4 }, + // { time: '10:32', call: 5, waiting: 3, people: 4 }, + // { time: '10:33', call: 5, waiting: 3, people: 4 }, + // { time: '10:34', call: 5, waiting: 3, people: 4 }, + // { time: '10:35', call: 5, waiting: 3, people: 4 }, + // { time: '10:36', call: 5, waiting: 3, people: 4 }, + // { time: '10:37', call: 5, waiting: 3, people: 4 }, + // { time: '10:38', call: 5, waiting: 3, people: 4 }, + // { time: '10:39', call: 5, waiting: 3, people: 4 }, + // { time: '10:40', call: 5, waiting: 3, people: 4 }, + // { time: '10:41', call: 5, waiting: 3, people: 4 }, + // { time: '10:42', call: 5, waiting: 3, people: 4 }, + // { time: '10:43', call: 5, waiting: 3, people: 4 }, + // { time: '10:44', call: 5, waiting: 3, people: 4 }, + ]; + + const dualAxes = new DualAxes(createDiv(), { + data: [data, data], + xField: 'time', + yField: ['waiting', 'people'], + slider: { + start: 0, + end: 1, + }, + tooltip: false, + geometryOptions: [ + { + geometry: 'column', + }, + { + geometry: 'line', + lineStyle: { + lineWidth: 2, + }, + }, + ], + }); + + dualAxes.render(); + console.log('dualAxes: ', dualAxes); + }); +}); diff --git a/src/plots/dual-axes/index.ts b/src/plots/dual-axes/index.ts index 21f0c65736..9e74e7656a 100644 --- a/src/plots/dual-axes/index.ts +++ b/src/plots/dual-axes/index.ts @@ -26,4 +26,18 @@ export class DualAxes extends Plot { protected getSchemaAdaptor(): Adaptor { return adaptor; } + + /** + * 覆写父类的方法 + */ + protected triggerResize() { + if (!this.chart.destroyed) { + // 首先自适应容器的宽高 + this.chart.forceFit(); // g2 内部执行 changeSize,changeSize 中执行 render(true) + this.chart.clear(); + this.execAdaptor(); // 核心:宽高更新之后计算padding + // 渲染 + this.chart.render(true); + } + } } diff --git a/src/plots/dual-axes/util/render-sider.ts b/src/plots/dual-axes/util/render-sider.ts index d8f89b1a65..be75e84e56 100644 --- a/src/plots/dual-axes/util/render-sider.ts +++ b/src/plots/dual-axes/util/render-sider.ts @@ -21,8 +21,8 @@ export const doSliderFilter = (view: View, sliderValue: [number, number]) => { const values = valuesOfKey(data, xScale.field); const xValues = isHorizontal ? values : values.reverse(); const xTickCount = size(xValues); - const minIndex = Math.floor(min * (xTickCount - 1)); - const maxIndex = Math.floor(max * (xTickCount - 1)); + const minIndex = Math.round(min * (xTickCount - 1)); + const maxIndex = Math.round(max * (xTickCount - 1)); // 增加 x 轴的过滤器 view.filter(xScale.field, (value: any) => {