ECharts' graphic layer is the right tool for free-form overlays — callouts, annotations, custom shapes, watermarks, hit-testable hotspots drawn on top of (or instead of) a chart. But the raw config is a verbose, deeply nested option.graphic.elements tree with hand-computed coordinates and imperative event wiring, and you re-derive the same boilerplate every time you need a shape on a canvas.

EChartGraphic is a thin, typed React wrapper over that layer: pass a flat elements array of GraphicElement objects — rect, circle, ring, arc, polygon, polyline, path, image, text, or a nested group — each with left/top/right/bottom placement, shape/style objects, optional children, and onclick/onmouseover/onmouseout handlers. An optional option prop merges in axes/series so the drawing can sit over a real chart; the component is theme-aware and resizes automatically.

Build a JSON-friendly elements array and render <EChartGraphic elements={elements} />. To overlay shapes on a live chart, also pass an option with your axes and series; attach an onclick to any element for interaction. Import from @particle-academy/fancy-echarts.