@echarts-extension/fractal

Language: English | 中文

ECharts extension chart for zoomable fractal rendering. Import this package for side effects to register series.type = 'fractal'.

Install

npm install echarts @echarts-extension/fractal

Basic Usage

import * as echarts from 'echarts';
import '@echarts-extension/fractal';

const chart = echarts.init(document.getElementById('main'));

chart.setOption({
  series: [
    {
      type: 'fractal',
      fractalType: 'mandelbrot',
      roam: true,
      viewport: {
        center: [-0.743643887037151, 0.13182590420533],
        viewWidth: 3.2,
        scale: 1
      },
      baseIterations: 180,
      iterationBoost: 42,
      iterationLimit: 2400,
      maxPixelCount: 420000
    }
  ]
});

Zooming Detail

The renderer does not scale a fixed bitmap. Wheel zoom and drag pan update the complex-plane viewport and recompute the fractal at the current display resolution. During interaction it first transforms the previous image for immediate visual feedback, renders a bounded preview on the main thread, then sends the full-resolution refinement to a cancellable Web Worker. scale has no built-in upper cap when maxZoom is null, so zooming can continue until normal floating-point precision or the configured iteration budget becomes the limiting factor.

Useful controls:

• viewport.center, viewport.viewWidth, viewport.scale: initial complex-plane camera.
• roam: enables wheel zoom and drag pan.
• baseIterations, iterationBoost, iterationLimit: increase escape iterations as zoom grows.
• pixelRatio, maxPixelCount: control render density and performance.
• interactivePixelRatio, interactiveMaxPixelCount, interactiveIterationScale, refineDelay: keep wheel zoom and drag pan responsive, then refine the image after interaction pauses.
• worker: enabled by default for final high-detail renders; set false to force the old synchronous path.
• workerUrl: optional self-hosted worker script URL for deployments that disallow inline Blob workers.
• fractalType: mandelbrot, julia, or burningShip.
• juliaConstant: complex constant for Julia sets.
• insideColor, backgroundColor, colorStops: palette controls.

Options

This table is generated by scripts/sync-options-from-readmes.mjs --write-readmes. Update the English README option table, then run npm run docs:sync-options to refresh the docs page.

| Option | Description | Values | | --- | --- | --- | | type | Registers this package series with ECharts. | 'fractal' | | silent | Disables mouse events for the series when true. | boolean | | width | Series box width. | number \| string (pixel or percent) | | height | Series box height. | number \| string (pixel or percent) | | top | Distance from the top of the chart container. | number \| string (pixel or percent) | | right | Distance from the right of the chart container. | number \| string (pixel or percent) | | bottom | Distance from the bottom of the chart container. | number \| string (pixel or percent) | | left | Distance from the left of the chart container. | number \| string (pixel or percent) | | name | Series name used by ECharts. | string | | fractalType | Fractal formula to render. | 'mandelbrot' \| 'julia' \| 'burningShip' | | viewport | Nested viewport controls. | Object | | viewport.center | Fractal-plane center point. | [number, number] | | viewport.viewWidth | Width of the visible fractal plane. | number | | viewport.scale | Viewport scale multiplier. | number | | viewport.zoom | Current zoom value. | number | | center | Fractal-plane center point. | [number, number] | | viewWidth | Width of the visible fractal plane. | number | | scale | Viewport scale multiplier. | number | | zoom | Current zoom value. | number | | roam | Allows pan and zoom interaction. | boolean | | minZoom | Minimum allowed zoom. | number | | maxZoom | Maximum allowed zoom, or unlimited when null. | number \| null | | zoomStep | Zoom multiplier per wheel or control step. | number | | pixelRatio | Render pixel ratio, or auto when null. | number \| null | | maxPixelCount | Maximum pixel budget for a full render. | number | | fallbackMaxCells | Fallback render cell budget when pixel budget is exceeded. | number | | interactivePixelRatio | Pixel ratio used during interaction renders. | number | | interactiveMaxPixelCount | Pixel budget used during interaction renders. | number | | interactiveIterationScale | Iteration multiplier used during interaction renders. | number | | minInteractiveIterations | Minimum iterations during interaction renders. | number | | refineDelay | Delay before refining after interaction. | number | | worker | Enables worker-based rendering when true. | boolean | | workerUrl | Custom worker script URL. | string | | baseIterations | Base iteration count before zoom boosts. | number | | iterationBoost | Additional iteration factor as zoom increases. | number | | iterationLimit | Hard cap for computed iteration count. | number | | maxIterations | Explicit maximum iteration count, or auto when null. | number \| null | | escapeRadius | Escape radius used by the fractal formula. | number | | juliaConstant | Complex constant used by Julia sets. | [number, number] | | insideColor | Color used for points inside the set. | string | | backgroundColor | Canvas background color. | string | | colorStops | Gradient stops for escaped points. | Array<[number, string] \| object> | | colorStops.offset | offset field. | unknown | | colorStops.color | color field. | string \| number | | tooltip | Controls ECharts tooltip behavior. | Object | | tooltip.trigger | ECharts tooltip trigger mode. | string |