Frontend

A Draggable Bezier Curve Editor for ECharts That Exports Reusable Configs

By 知了清语 · Jul 6, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

ECharts configurations are normally static JSON blobs; adding direct manipulation turns the library into a visual design tool. The export step closes the loop — a designer or developer can shape a curve by eye, then drop the exact math into production code without manual fitting or guesswork.

Summary

A single-file HTML tool wraps ECharts with a full direct-manipulation editor for cubic Bezier curves. Four draggable points — start, end, and two intermediate controls — plus two rotatable handles give fine-grained control over the curve shape. Every drag fires a re-render so the curve updates in real time.

Hit-testing on the canvas detects which element the cursor is over, and mouse events translate pixel coordinates back into data space. The tool clamps all coordinates to [0,1] and uses a 0.8 damping factor when dragging handles to keep movement stable.

Two export paths cover different workflows. “Export Code” produces a commented JavaScript snippet with the control-point coordinates, the cubic Bezier function, a curve generator, and an ECharts usage example. “Export Data” dumps a JSON object containing the coordinates, the expanded polynomial coefficients, and the parametric formulas for x(t) and y(t). Both can be copied to the clipboard or downloaded as a file.

Takeaways

— Four draggable points (start, control A, control B, end) and two handles define a cubic Bezier curve inside an ECharts chart.

— Hit-testing uses a pixel-distance threshold to determine which control element the cursor is over.

— Dragging a handle moves the associated control point with a 0.8 damping factor to keep the interaction stable.

— All coordinates are clamped to the [0, 1] range to keep the curve within the chart bounds.

— Export produces either a ready-to-use JavaScript snippet with the Bezier function and ECharts config, or a JSON object with control points, polynomial coefficients, and parametric formulas.

— Both export formats can be copied to the clipboard or downloaded as a .js or .json file.

Conclusions

ECharts is rarely used for interactive editing, but its pixel-to-data coordinate conversion API makes direct manipulation feasible without external geometry libraries.

The handle-dragging implementation uses a damping factor rather than a fixed-length constraint, which feels more forgiving but means the handle length changes during drag — a trade-off between mathematical purity and UX smoothness.

Exporting the expanded polynomial coefficients alongside the control points is a practical touch: it saves the consumer from re-deriving the math when they need to evaluate the curve outside a Bezier function.

Concepts & terms

Cubic Bezier Curve

A parametric curve defined by four points: start, end, and two control points. The curve begins at the start point, ends at the end point, and is pulled toward — but does not pass through — the control points. The formula is B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3 for t in [0,1].

Control Polygon

The dashed line connecting the four control points in order (start → control A → control B → end). It provides a visual scaffold that shows how the control points influence the curve's shape.

Hit Testing

A technique that determines which on-screen element a user clicked or is hovering over by measuring the pixel distance between the cursor and each candidate element's screen position, then checking against a threshold.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗