diff --git a/package.json b/package.json index 5c103439b2..a01f17488d 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "lint-md-cli": "^0.1.2", "lint-staged": "^10.2.2", "lodash": "^4.17.15", + "mock-variable": "^0.0.2", "npm-run-all": "^4.1.5", "prettier": "^2.0.5", "react-i18next": "^11.1.0", diff --git a/src/geometry/shape/line/index.ts b/src/geometry/shape/line/index.ts index 682a01f196..c06a6e764a 100644 --- a/src/geometry/shape/line/index.ts +++ b/src/geometry/shape/line/index.ts @@ -124,6 +124,7 @@ each(['line', 'dot', 'dash', 'smooth'], (shapeType) => { type: 'path', attrs, name: 'line', + capture: !smooth, }); return shape; diff --git a/tests/performance/component/tooltip/pick-spec.ts b/tests/performance/component/tooltip/pick-spec.ts new file mode 100644 index 0000000000..9c96d14d4d --- /dev/null +++ b/tests/performance/component/tooltip/pick-spec.ts @@ -0,0 +1,45 @@ +/** + * tooltip hover 的时候拾取性能性能很差,在 2000 条数据的时候,就已经卡的不行了。 + */ +import MV from 'mock-variable'; +import { Chart } from '../../../../src'; +import { createDiv } from '../../../util/dom'; + +const DATA = MV.arrayOf(MV.shape({ + value: MV.number(100, 110), + name: MV.string(8), +}), 20000).mock(); + +describe('benchmark of tooltip', () => { + + it('pick', () => { + const chart = new Chart({ + container: createDiv(), + width: 800, + height: 400, + }); + + chart.scale('value', { + min: 0, + max: 120, + }); + + chart.data(DATA); + chart + .line() + .position('name*value') + .style({ + lineWidth: 3, + }) + .shape('type', ['smooth']); + + chart.tooltip({ + shared: true, + }); + + chart.render(); + + // 不知道怎么写断言,只能手动 hover 到线上面,看卡不卡 + chart.destroy(); + }); +}); \ No newline at end of file