@echarts-extension/fisheye

Language: English | 中文

Reusable fisheye magnifier component for ECharts. Import it once, then add a top-level fisheye option to any chart.

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

const chart = echarts.init(document.getElementById('main'));
chart.setOption({
  fisheye: {
    show: true,
    radius: 140,
    scale: 2.4
  },
  xAxis: {},
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [[1, 2], [2, 3], [3, 1]]
    }
  ]
});

The component listens to the chart's zrender pointer events and applies a temporary lens transform to display elements near the pointer. Set show: false or remove the component to disable it.

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 | | --- | --- | --- | | fisheye | Top-level component option added to an ECharts option object. | Object \| Object[] | | fisheye.labelScale | Label magnification factor near the lens center. | number | | fisheye.type | Component type marker. | 'fisheye' | | fisheye.show | Shows and enables the magnifier when true. | boolean | | fisheye.enabled | Alias for enabling the magnifier. | boolean | | fisheye.radius | Lens radius around the pointer. | number \| string (pixel or percent) | | fisheye.scale | Magnification factor at the lens center. | number | | fisheye.magnification | Alias for scale. | number | | fisheye.stroke | Lens outline color. | string | | fisheye.borderColor | Alias for lens outline color. | string | | fisheye.strokeWidth | Lens outline width. | number | | fisheye.borderWidth | Alias for lens outline width. | number | | fisheye.opacity | Lens outline opacity. | number | | fisheye.preview | Runs an initial preview pulse when available. | boolean |