### usePublicAPI Usage Example

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/composables.md

Demonstrates how to use the `usePublicAPI` composable to interact with the ECharts instance. This example shows how to get the chart's data URL for export and retrieve its dimensions.

```vue
<script setup>
const chartRef = ref()

const exportChart = async () => {
  const url = chartRef.value.getDataURL()
  const a = document.createElement('a')
  a.href = url
  a.download = 'chart.png'
  a.click()
}

const getChartSize = () => {
  const width = chartRef.value.getWidth()
  const height = chartRef.value.getHeight()
  console.log(`Chart size: ${width}x${height}`)
}
</script>

<template>
  <VChart ref="chartRef" :option="option" />
  <button @click="exportChart">Export</button>
  <button @click="getChartSize">Get Size</button>
</template>
```

--------------------------------

### Vue Component Usage Example with useLoading

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/composables.md

Demonstrates how to use the `useLoading` composable within a Vue component's script setup. It shows how to provide global loading options and manage local loading state and options.

```vue
<script setup>
import { ref, provide } from 'vue'
import VChart, { LOADING_OPTIONS_KEY } from 'vue-echarts'

provide(LOADING_OPTIONS_KEY, {
  text: 'Please wait...',
  maskColor: 'rgba(255, 255, 255, 0.8)',
  textColor: '#333'
})

const isLoading = ref(false)
const loadingOptions = ref({
  fontSize: 14,
  showSpinner: true,
  color: '#0099cc'
})

const fetchData = async () => {
  isLoading.value = true
  try {
    // fetch data...
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <VChart
    :option="option"
    :loading="isLoading"
    :loading-options="loadingOptions"
  />
  <button @click="fetchData">Load Data</button>
</template>
```

--------------------------------

### Install Dependencies

Source: https://github.com/ecomfe/vue-echarts/blob/main/tests/TESTING.md

Install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Complete Vue-Echarts Configuration Example

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/configuration.md

This example demonstrates global default configurations for theme, initial options, update options, and loading options, along with local state management and event handling.

```vue
<script setup>
import { ref, provide } from 'vue'
import VChart,
  {
    THEME_KEY,
    INIT_OPTIONS_KEY,
    UPDATE_OPTIONS_KEY,
    LOADING_OPTIONS_KEY
  }
 from 'vue-echarts'

// Global defaults
provide(THEME_KEY, ref('dark'))
provide(INIT_OPTIONS_KEY, {
  renderer: 'canvas',
  useDirtyRect: true
})
provide(UPDATE_OPTIONS_KEY, { notMerge: false })
provide(LOADING_OPTIONS_KEY, {
  text: 'Loading data...', 
  maskColor: 'rgba(0, 0, 0, 0.3)'
})

// Local state
const option = ref({...})
const isLoading = ref(false)

const handleDataFetch = async () => {
  isLoading.value = true
  try {
    // Fetch and update
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <VChart
    :option="option"
    :theme="currentTheme"
    :autoresize="{ throttle: 150 }"
    :loading="isLoading"
    :loading-options="{ fontSize: 14 }"
    @click="handleClick"
  />
</template>
```

--------------------------------

### Local Development Commands

Source: https://github.com/ecomfe/vue-echarts/blob/main/README.md

Commands to install dependencies and start the local development server for Vue ECharts.

```shell
pnpm i
pnpm dev
```

--------------------------------

### Manual useAutoresize Example

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/composables.md

Demonstrates how to manually use the useAutoresize composable with custom configurations.

```vue
<script setup>
import { ref } from 'vue'
import VChart, { useAutoresize } from 'vue-echarts'

const chartRef = ref()

// Manual use (if not using VChart):
useAutoresize(
  ref<EChartsType>(),
  ref({ throttle: 200, onResize: () => console.log('resized') }),
  ref<HTMLElement>()
)
</script>

<template>
  <!-- Enable via prop -->
  <VChart
    :option="option"
    :autoresize="{ throttle: 150, onResize: () => console.log('Chart resized') }"
  />

  <!-- Or simple boolean -->
  <VChart :option="option" :autoresize="true" />
</template>
```

--------------------------------

### Install Chromium with System Dependencies for CI

Source: https://github.com/ecomfe/vue-echarts/blob/main/tests/TESTING.md

Install Chromium along with necessary system dependencies for running Playwright tests in a CI environment.

```bash
pnpm exec playwright install --with-deps chromium
```

--------------------------------

### Install Chromium for Browser Tests

Source: https://github.com/ecomfe/vue-echarts/blob/main/tests/TESTING.md

Install the Chromium browser, required for Playwright browser tests.

```bash
pnpm test:setup
```

--------------------------------

### Usage Examples for Theme Type

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/types.md

Demonstrates how to use the Theme type with a theme name or a custom theme object.

```typescript
// Theme by name
const theme: Theme = 'dark'

// Custom theme object
const customTheme: Theme = {
  color: ['#5470c6', '#91419f', '#ee6666'],
  backgroundColor: '#fff'
}
```

--------------------------------

### Set Default Init Options

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/configuration.md

Provide custom initialization options using `INIT_OPTIONS_KEY`. This example sets the renderer to 'canvas' and enables the `useDirtyRect` option for all descendant VChart components.

```typescript
provide(INIT_OPTIONS_KEY, {
  renderer: 'canvas',
  useDirtyRect: true
})
```

--------------------------------

### Event System Details

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/REFERENCE_INDEX.md

Details on the event handling system, including listener management, event processing, and usage examples.

```APIDOC
## Event Handling System Details

### Description
Provides an in-depth look at the event handling system, covering listener management, event attribute processing, and lifecycle.

### Event Listener Management
- **useReactiveChartListeners**: Manages reactive event listeners for charts.

### Event Attribute Processing
- **useReactiveEventAttrs**: Processes reactive event attributes.

### Internal Utilities
Includes details on internal utilities like `parseOnEvent`, `isOn`, `omitOn`, and `resolveHandlers`.

### Event Flow and Listener Lifecycle
Explains the event flow and the lifecycle of event listeners.

### Usage Examples
Demonstrates usage with chart events, multiple handlers, the `once` modifier, and ZRender events.

### Performance Considerations
Notes on performance aspects of the event system.

### Limitations
Details any known limitations of the event system.

### Graphic Element Events
Specifics on handling events for graphic elements.
```

--------------------------------

### Vue ECharts useSlotOption Usage Example

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/composables.md

Demonstrates how to use the `useSlotOption` composable within a Vue component to customize ECharts tooltips and data views using slots. This example shows the integration of custom HTML content for tooltips and data views.

```vue
<script setup>
import VChart from 'vue-echarts'
</script>

<template>
  <VChart :option="option">
    <!-- Custom tooltip for all series -->
    <template #tooltip="{ name, value }">
      <div class="custom-tooltip">
        <strong>{{ name }}</strong>
        <p>Value: {{ value }}</p>
      </div>
    </template>

    <!-- Custom tooltip for series at index 0 -->
    <template #tooltip-0="{ value }">
      <div>Series 0: {{ value }}</div>
    </template>

    <!-- Custom data view -->
    <template #dataView="option">
      <pre>{{ JSON.stringify(option, null, 2) }}</pre>
    </template>
  </VChart>
</template>

<style scoped>
.custom-tooltip {
  background: white;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
</style>
```

--------------------------------

### Vue ECharts Slot Usage Example

Source: https://github.com/ecomfe/vue-echarts/blob/main/README.md

Demonstrates how to use various slots in Vue ECharts to customize tooltip formatters, data view content, and global tooltip behavior. This example shows the integration within a Vue template.

```vue
<template>
  <VChart :option="chartOptions">
    <!-- Global `tooltip.formatter` -->
    <template #tooltip="params">
      <div v-for="(param, i) in params" :key="i">
        <span v-html="param.marker" />
        <span>{{ param.seriesName }}</span>
        <span>{{ param.value[0] }}</span>
      </div>
    </template>

    <!-- Tooltip on xAxis -->
    <template #tooltip-xAxis="params">
      <div>X-Axis : {{ params.value }}</div>
    </template>

    <!-- Data View Content -->
    <template #dataView="option">
      <table>
        <thead>
          <tr>
            <th v-for="(t, i) in option.dataset[0].source[0]" :key="i">
              {{ t }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, i) in option.dataset[0].source.slice(1)" :key="i">
            <th>{{ row[0] }}</th>
            <td v-for="(v, i) in row.slice(1)" :key="i">{{ v }}</td>
          </tr>
        </tbody>
      </table>
    </template>
  </VChart>
</template>
```

--------------------------------

### Vue ECharts Usage Example: GRect

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/configuration.md

Example of using the GRect component with common props for positioning, sizing, styling, and interaction. Ensure `id` is provided for stable rendering.

```vue
<GRect
  id="rect-1"
  :x="10"
  :y="10"
  :width="100"
  :height="50"
  fill="blue"
  :opacity="0.7"
  draggable
  cursor="grab"
/>
```

--------------------------------

### Set Application-Wide Defaults with Provide

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/configuration.md

Use Vue's `provide()` function in your application's setup to establish default configurations for theme, init options, update options, and loading options. These defaults apply to all VChart descendants unless explicitly overridden.

```typescript
import { THEME_KEY, INIT_OPTIONS_KEY, UPDATE_OPTIONS_KEY, LOADING_OPTIONS_KEY } from 'vue-echarts'

export default {
  setup() {
    // Theme default
    provide(THEME_KEY, ref('dark'))

    // Init options default
    provide(INIT_OPTIONS_KEY, { renderer: 'canvas' })

    // Update options default
    provide(UPDATE_OPTIONS_KEY, { notMerge: false })

    // Loading options default
    provide(LOADING_OPTIONS_KEY, { text: 'Loading...' })
  }
}
```

--------------------------------

### Dynamic Theme Switching in Vue

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/VChart.md

Demonstrates how to dynamically switch between 'light' and 'dark' themes for a VChart component in a Vue.js application. Requires a Vue setup with `ref` for reactive theme state.

```vue
<script setup>
// Dynamic theme switching
const currentTheme = ref('light')

const switchTheme = () => {
  currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light'
}
</script>

<template>
  <VChart :option="option" :theme="currentTheme" />
  <button @click="switchTheme">Switch Theme</button>
</template>
```

--------------------------------

### Set Default Loading Options

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/configuration.md

Define application-wide loading indicators using `LOADING_OPTIONS_KEY`. This example sets a custom text and mask color for loading states in VChart components. Component-level loading options will merge with these defaults.

```typescript
provide(LOADING_OPTIONS_KEY, {
  text: 'App-wide loading message',
  maskColor: 'rgba(0, 0, 0, 0.2)'
})
```

--------------------------------

### ZRender Event Handling Examples

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/event-system.md

Illustrates how to bind listeners to ZRender events, which control the canvas and rendering layer. Events are prefixed with 'zr:'.

```typescript
@zr:click="handleCanvasClick"
```

```typescript
@zr:drag="handleCanvasDrag"
```

```typescript
@zr:mousedown="handleCanvasMouseDown"
```

--------------------------------

### Graphic Component Structure

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/graphic-components.md

Each graphic component is created using the `createComponent` factory function, which returns a Vue component with specific properties and setup.

```APIDOC
## Component Structure

Each component is created by `createComponent(name: string, type: GraphicComponentType)` factory function. Returns a Vue component with:

- **name**: Display name (e.g., "GRect")
- **inheritAttrs**: `false` (explicit event binding required)
- **props**: Union of `commonProps` and `shapeProps`
- **emits**: Graphic events (click, hover, etc.)
- **setup**: Registration with graphic collector, parent tracking
```

--------------------------------

### Once Modifier Support Example

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/event-system.md

Shows how to use the 'Once' suffix in event attribute names to ensure a handler is executed only a single time.

```typescript
// Maps to 'clickOnce' attribute
@clickOnce="handler"
```

```typescript
@datazoomOnce="handler"
```

--------------------------------

### Vue ECharts CDN Setup

Source: https://github.com/ecomfe/vue-echarts/blob/main/README.md

Include these script tags in your HTML to use Vue ECharts via CDN. The component will be available globally as `window.VueECharts`.

```html
<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.27"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@8.1.0-beta.2"></script>
```

--------------------------------

### Register Vue ECharts Globally via CDN

Source: https://github.com/ecomfe/vue-echarts/blob/main/README.md

Example of how to register the Vue ECharts component globally after including the CDN scripts.

```js
const app = Vue.createApp(...)

// register globally (or you can do it locally)
app.component('VChart', VueECharts)
```

--------------------------------

### isOn

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/utilities.md

Checks if a given attribute key corresponds to an event handler. It follows the convention of attribute names starting with 'on' followed by an uppercase letter or non-letter.

```APIDOC
## isOn

### Description
Checks if an attribute name is an event handler.

### Function Signature
```typescript
function isOn(key: string): boolean
```

### Pattern
`/^on[^a-z]/` (starts with "on" followed by uppercase or non-letter)

### Returns
`true` if key matches event handler pattern

### Examples
```typescript
isOn('onClick')      // true
isOn('onDatazoom')   // true
isOn('onHTMLChange') // true
isOn('onmouseover')  // false (lowercase after 'on')
isOn('onError')      // true
isOn('class')        // false
isOn('data-x')       // false
```
```

--------------------------------

### Vue ECharts Graphic Usage Example

Source: https://github.com/ecomfe/vue-echarts/blob/main/README.md

Demonstrates how to use the graphic slot to add interactive elements to a Vue ECharts chart. This example creates a draggable overlay with text displaying its coordinates.

```vue
<script setup lang="ts">
import { ref } from "vue";
import type { ElementEvent } from "echarts/core";

const option = {
  xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
  yAxis: { type: "value" },
  series: [{ type: "line", data: [120, 200, 150] }],
};

const overlay = ref({ x: 84, y: 22 });

function onDrag(event: ElementEvent) {
  overlay.value.x = event.offsetX - 44;
  overlay.value.y = event.offsetY - 14;
}
</script>

<template>
  <VChart :option="option">
    <template #graphic>
      <GGroup id="drag-handle" :x="overlay.x" :y="overlay.y">
        <GRect :width="88" :height="28" :r="6" fill="#5470c6" draggable @drag="onDrag" />
        <GText
          :x="10"
          :y="8"
          :text="`x: ${Math.round(overlay.x)} y: ${Math.round(overlay.y)}`"
          text-fill="#fff"
        />
      </GGroup>
    </template>
  </VChart>
</template>
```

--------------------------------

### Run All Tests

Source: https://github.com/ecomfe/vue-echarts/blob/main/tests/TESTING.md

Execute all browser and Node.js tests in the project.

```bash
pnpm test
```

--------------------------------

### Provide Theme in Options API (Object Syntax)

Source: https://github.com/ecomfe/vue-echarts/blob/main/README.md

Provide a theme using the THEME_KEY within the 'provide' object in the Options API.

```javascript
import { THEME_KEY } from 'vue-echarts'

export default {
  { provide: { [THEME_KEY]: 'dark' } }
}
```

--------------------------------

### Update Planning: Incremental Series Addition

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/update-planning.md

Illustrates an efficient series addition scenario using the update planning system. With planning, new series items are appended, avoiding inefficient full array merges.

```typescript
prev = { series: [{ id: 's1' }, { id: 's2' }] }
next = { series: [{ id: 's1' }, { id: 's2' }, { id: 's3' }] }
plan = { notMerge: false }  // Safe merge
```

--------------------------------

### Composable Functions Reference

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/REFERENCE_INDEX.md

Reference for the composable functions provided by vue-echarts, including their purpose and usage examples.

```APIDOC
## Composable Functions Reference

### Description
Reference for the composable functions available in vue-echarts, detailing their functionality and integration patterns.

### Composable Functions
- **usePublicAPI**: Exposes ECharts methods for external use.
- **useAutoresize**: Manages automatic chart resizing.
- **useLoading**: Handles the chart's loading state management.
- **useSlotOption**: Implements the formatter slot system.

### Props Integration and Composition Patterns
Explains how these composables integrate with component props and common composition patterns.

### Usage Examples
Provides practical usage examples for each composable function.
```

--------------------------------

### Augment VChartSlotsExtension with Custom Slot

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/types.md

Example of augmenting the VChartSlotsExtension interface to include a custom slot named 'custom-slot'.

```typescript
declare module 'vue-echarts' {
  interface VChartSlotsExtension {
    'custom-slot': (params: any) => any
  }
}
```

--------------------------------

### Basic VChart Usage with Event Handling

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/VChart.md

Demonstrates how to register ECharts components, provide default theme and init options, and handle chart events like click and rendered. This snippet is suitable for general use cases.

```vue
<script setup>
import { ref, provide } from 'vue'
import VChart, { THEME_KEY, INIT_OPTIONS_KEY } from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'

// Register ECharts components
use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, LegendComponent])

// Provide defaults
provide(THEME_KEY, 'light')
provide(INIT_OPTIONS_KEY, { renderer: 'canvas' })

const chartRef = ref()
const option = ref({
  title: { text: 'Sales Data' },
  xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar'] },
  yAxis: { type: 'value' },
  series: [{ data: [120, 200, 150], type: 'bar' }]
})

const handleClick = (params) => {
  console.log('Clicked:', params.name, params.value)
}

const handleRendered = ({ elapsedTime }) => {
  console.log('Frame rendered in', elapsedTime, 'ms')
}
</script>

<template>
  <VChart
    ref="chartRef"
    :option="option"
    :autoresize="true"
    @click="handleClick"
    @rendered="handleRendered"
  />
</template>

<style scoped>
div :deep(.echarts) {
  width: 100%;
  height: 400px;
}
</style>
```

--------------------------------

### Configure for Touch Devices

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/configuration.md

Enable coarse pointer support for touch devices by providing this option.

```typescript
provide(INIT_OPTIONS_KEY, { useCoarsePointer: true })
```

--------------------------------

### Loading Options Injection Key and Usage

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/composables.md

Defines the `LOADING_OPTIONS_KEY` for providing and injecting `LoadingOptions` globally or within a component. Demonstrates how to provide default options.

```typescript
const LOADING_OPTIONS_KEY: InjectionKey<LoadingOptionsInjection> = Symbol()

// Provide globally:
provide(LOADING_OPTIONS_KEY, { text: 'Loading data...', maskColor: 'rgba(0,0,0,0.3)' })
```

--------------------------------

### Utility Functions Reference

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/REFERENCE_INDEX.md

Reference for utility functions, covering environment detection, event handling, type checking, and more.

```APIDOC
## Utility Functions Reference

### Description
Reference for various utility functions provided by the library, including environment detection, event handling, and type checking utilities.

### Environment Detection
- **isBrowser**: Checks if the current environment is a browser.

### Event Handling
- **isOn**: Checks if an event is bound.
- **parseOnEvent**: Parses event attributes.
- **omitOn**: Omits event attributes.

### Array Validation
- **isValidArrayIndex**: Validates if a value is a valid array index.

### Set Comparison
- **isSameSet**: Compares two sets for equality.

### Type Checking
- **isPlainObject**: Checks if a value is a plain object.

### Warning System
- **warn**: Displays warnings.
- **__resetWarnState**: Resets the warning state.

### Type Definitions
Includes definitions for types like `AttrMap`, `ParsedOnEvent`, etc.

### Common Patterns and Usage
Illustrates common patterns and usage scenarios for these utilities.

### Performance Notes
Provides notes on the performance characteristics of the utility functions.
```

--------------------------------

### Update Planning API

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Documentation for the smart update planning algorithm and related functions.

```APIDOC
## Update Planning API

### Description
This section details the smart update planning algorithm used by Vue-ECharts to optimize chart updates, along with related functions and types.

### Algorithm Functions
- **`initOptions(options)`**: Initializes chart options.
- **`updateOptions(options)`**: Updates chart options with planning.
- **`getUpdateInfo()`**: Retrieves information about the planned update.
- ... (5 more documented functions)

### Types
- **`UpdateOption`**: Type for update options.
- **`UpdateInfo`**: Type for update information.
- ... (4 types documented)

### Usage Example
```javascript
import { useUpdate } from 'vue-echarts';

const updateChart = useUpdate();

function handleDataChange(newData) {
  updateChart(newData);
}

```

--------------------------------

### Composition Utilities API

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/README.md

Documentation for the composition utilities that provide reactive handling for common chart functionalities.

```APIDOC
## Composition Utilities

### Description
These utilities leverage Vue's Composition API to provide reusable logic for managing chart states and behaviors.

### Utilities
- **usePublicAPI**(): object - Exposes ECharts instance methods.
- **useAutoresize**(): object - Handles automatic container resize.
- **useLoading**(): object - Manages the chart's loading state.
- **useSlotOption**(): object - Processes formatter slot content.
```

--------------------------------

### Event Handler Binding Examples

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/event-system.md

Demonstrates different ways to bind event handlers to ECharts components. Supports single functions, arrays of functions, and the 'once' modifier for single-trigger events.

```typescript
// Single function
@click="handler"
```

```typescript
// Array of functions
@click="[handler1, handler2]"
```

```typescript
// Once modifier
@clickOnce="handler"
```

```typescript
// ZRender layer event
@zr:click="handler"
```

```typescript
// Native DOM event
@native:click="handler"
```

--------------------------------

### planUpdate(prev: Signature | undefined, option: Option): PlannedUpdate

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/update-planning.md

Plans the optimal setOption() strategy by comparing a previous option signature with the new option. It determines whether to merge or replace the option and provides a normalized option.

```APIDOC
## planUpdate(prev: Signature | undefined, option: Option): PlannedUpdate

### Description
Analyzes changes between a previous option signature and a new option to determine the optimal `setOption()` strategy (merge vs. notMerge). It returns a `PlannedUpdate` object containing the normalized option, its signature, and the update plan.

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **prev** (Signature | undefined) - Optional - The previous signature of the option. If undefined, it's treated as the initial state.
- **option** (Option) - Required - The new ECharts option object.

### Response
#### Success Response (200)
- **PlannedUpdate** - An object containing the normalized option, its signature, and the update plan.

### Request Example
```json
{
  "prev": {
    "optionsLength": 0,
    "mediaLength": 0,
    "arrays": {},
    "objects": ["xAxis"],
    "scalars": []
  },
  "option": {
    "series": [
      {
        "name": "Series 1",
        "data": [10, 20, 30, 40]
      }
    ],
    "xAxis": {
      "type": "category"
    }
  }
}
```

### Response Example
```json
{
  "plannedUpdate": {
    "option": {
      "series": [
        {
          "name": "Series 1",
          "data": [10, 20, 30, 40]
        }
      ],
      "xAxis": {
        "type": "category"
      }
    },
    "signature": {
      "optionsLength": 0,
      "mediaLength": 0,
      "arrays": {
        "series": {
          "idsSorted": ["Series 1"],
          "noIdCount": 0
        }
      },
      "objects": ["xAxis"],
      "scalars": []
    },
    "plan": {
      "notMerge": false,
      "replaceMerge": ["series"]
    }
  }
}
```
```

--------------------------------

### Import usePublicAPI

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/composables.md

Import the `usePublicAPI` composable from the `vue-echarts` library.

```typescript
import { usePublicAPI } from 'vue-echarts'
```

--------------------------------

### Interactive Graphics with Vue-Echarts

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/graphic-components.md

An example of creating interactive graphic elements (GRect, GText, GCircle) within a VChart. It uses Vue's ref for state management and click handlers to toggle visual states.

```vue
<script setup>
import { ref } from 'vue'
import VChart from 'vue-echarts'
import { GGroup, GRect, GCircle, GText } from 'vue-echarts/graphic'

const selectedId = ref(null)

const handleRectClick = (id) => {
  selectedId.value = selectedId.value === id ? null : id
}
</script>

<template>
  <VChart :option="option">
    <template #graphic>
      <GGroup>
        <GRect
          id="rect-1"
          :x="50"
          :y="50"
          :width="100"
          :height="100"
          :fill="selectedId === 'rect-1' ? 'red' : 'blue'"
          :stroke="selectedId === 'rect-1' ? 'yellow' : 'none'"
          cursor="pointer"
          @click="handleRectClick('rect-1')"
        />
        <GText
          :x="100"
          :y="100"
          :text="`Rectangle`"
          :text-align="'center'"
          :text-vertical-align="'middle'"
        />
        <GCircle
          id="circle-1"
          :cx="300"
          :cy="100"
          :r="50"
          :fill="selectedId === 'circle-1' ? 'green' : 'orange'"
          cursor="pointer"
          @click="handleRectClick('circle-1')"
        />
      </GGroup>
    </template>
  </VChart>
</template>
```

--------------------------------

### Generate Test Coverage Report

Source: https://github.com/ecomfe/vue-echarts/blob/main/tests/TESTING.md

Generate test coverage reports using Istanbul.

```bash
pnpm test:coverage
```

--------------------------------

### Configure Autoresize with Throttle and Callback

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/configuration.md

Customize autoresize behavior by setting a specific throttle interval and providing a callback function to execute on resize events. The throttle controls how often resize checks occur.

```typescript
autoresize={{
  throttle: 200,
  onResize: () => {
    console.log('Container resized')
  }
}}
```

--------------------------------

### Import useAutoresize and autoresizeProps

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/composables.md

Import the necessary composable and props helper from the vue-echarts library.

```typescript
import { useAutoresize, autoresizeProps } from 'vue-echarts'
```

--------------------------------

### Documentation Structure Reference

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/REFERENCE_INDEX.md

Illustrates the directory structure of the Vue ECharts documentation.

```markdown
output/
├── REFERENCE_INDEX.md        # This file
├── overview.md               # Project overview and architecture
├── types.md                  # Complete type definitions
├── configuration.md          # Configuration options reference
├── api-reference/
│   ├── VChart.md            # Main component documentation
│   ├── graphic-components.md # Graphic component system
│   ├── composables.md       # Composable functions
│   ├── event-system.md      # Event handling system
│   ├── update-planning.md   # Update strategy algorithm
│   └── utilities.md         # Utility functions
└── [This file provides the index]
```

--------------------------------

### Injection Keys

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/VChart.md

Use these keys with Vue's `provide()` to set application-wide defaults for VChart.

```APIDOC
## Injection Keys

Used with Vue's `provide()` to set application-wide defaults:

```typescript
import { THEME_KEY, INIT_OPTIONS_KEY, UPDATE_OPTIONS_KEY, LOADING_OPTIONS_KEY } from 'vue-echarts'

// Provide theme for all descendants
provide(THEME_KEY, 'dark')

// Provide init options
provide(INIT_OPTIONS_KEY, { renderer: 'canvas' })

// Provide update options
provide(UPDATE_OPTIONS_KEY, { replaceMerge: ['series'] })

// Provide loading options
provide(LOADING_OPTIONS_KEY, { text: 'Loading...', maskColor: 'rgba(0,0,0,0.5)' })
```

| Key | Type | Description |
|---|---|---|
| `THEME_KEY` | `InjectionKey<ThemeInjection>` | Provides default theme for chart instances. Accepts ref, computed, or direct value. |
| `INIT_OPTIONS_KEY` | `InjectionKey<InitOptionsInjection>` | Provides default initialization options for `echarts.init()`. |
| `UPDATE_OPTIONS_KEY` | `InjectionKey<UpdateOptionsInjection>` | Provides default `setOption()` behavior configuration. |
| `LOADING_OPTIONS_KEY` | `InjectionKey<LoadingOptionsInjection>` | Provides default loading mask customization. |
```

--------------------------------

### Enable Autoresize with Defaults

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/configuration.md

Enable chart autoresize using the default settings. This allows the chart to adapt to its container's size changes automatically.

```typescript
autoresize={true}
```

--------------------------------

### Define InitOptions Type

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/types.md

Options passed to echarts.init(). Includes renderer, locale, and performance optimizations.

```typescript
type InitOptions = NonNullable<Parameters<typeof init>[2]>
```

--------------------------------

### Configure for High-DPI Displays

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/configuration.md

Set the device pixel ratio to 2 for high-DPI displays.

```typescript
provide(INIT_OPTIONS_KEY, { devicePixelRatio: 2 })
```

--------------------------------

### Utility Functions

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/REFERENCE_INDEX.md

A collection of utility functions for common tasks such as environment detection, event parsing, and data validation.

```APIDOC
## Utility Functions

### Description
This module provides various helper functions for common tasks related to ECharts integration and general JavaScript utilities.

### Available Functions:
- **isBrowser**: Detects if the current environment is a browser.
- **isOn**: Checks if an attribute is an event attribute.
- **parseOnEvent**: Parses event attributes from options.
- **omitOn**: Removes event attributes from options.
- **isValidArrayIndex**: Validates if a value is a valid array index.
- **isSameSet**: Compares two sets for equality.
- **isPlainObject**: Checks if a value is a plain object.
- **warn**: Emits deduped warnings.

### Usage Example (isBrowser)
```javascript
import { isBrowser } from 'vue-echarts/utils';

if (isBrowser()) {
  console.log('Running in a browser environment.');
}
```
```

--------------------------------

### Provide Reactive Theme in Options API

Source: https://github.com/ecomfe/vue-echarts/blob/main/README.md

Make theme injections reactive in the Options API by providing a computed property that references a data property.

```javascript
import { THEME_KEY } from 'vue-echarts'
import { computed } from 'vue'

export default {
  data() {
    return {
      theme: 'dark'
    }
  },
  provide() {
    return {
      [THEME_KEY]: computed(() => this.theme)
    }
  }
}
```

--------------------------------

### VChart Component API

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Documentation for the main VChart component, including its props, configuration options, and exposed methods.

```APIDOC
## VChart Component API

### Description
This section details the API for the main `VChart` component, covering all its props, initialization options, update options, and methods delegated from ECharts.

### Props
- **`option`** (object) - Required - The ECharts option object.
- **`autoresize`** (boolean) - Optional - Whether to enable autoresize.
- **`loading`** (boolean) - Optional - Whether to show the loading state.

### Methods
- **`resize()`**: Resizes the chart.
- **`showLoading()`**: Shows the loading state.
- **`hideLoading()`**: Hides the loading state.
- **`dispose()`**: Disposes the chart instance.
- ... (10 more ECharts delegated methods)

### Events
- **`'rendered'`**: Emitted when the chart is rendered.
- **`'finished'`**: Emitted when the chart rendering is finished.
- ... (22+ chart events)

### Usage Example
```vue
<template>
  <VChart :option="chartOptions" autoresize />
</template>

<script setup>
import { ref } from 'vue';
import VChart from 'vue-echarts';

const chartOptions = ref({
  // ECharts options here
});
</script>

```

--------------------------------

### useSlotOption

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/composables.md

Processes formatter slots (tooltip, dataView) into ECharts callbacks. It injects Vue component renderers as ECharts formatter callbacks and handles slot changes.

```APIDOC
## useSlotOption

Processes formatter slots (tooltip, dataView) into ECharts callbacks.

### Description

This composable is designed to integrate custom Vue slot content with ECharts components, specifically for `tooltip` and `dataView` formatters. It detects valid slot names, injects Vue component renderers as ECharts formatter callbacks, and manages the rendering and updating of this content.

### Module

`src/composables/slot.ts`

### Import

```typescript
import { useSlotOption } from 'vue-echarts'
```

### Function Signature

```typescript
function useSlotOption(
  slots: Slots,
  onSlotsChange: () => void
): {
  render: () => VNode | undefined
  patchOption: (src: Option) => Option
}
```

### Parameters

#### Parameters

- **slots** (`Slots`) - Required - Vue slots object.
- **onSlotsChange** (`() => void`) - Required - Callback when slots change.

### Return Object

#### Return Object

- **render** (`() => VNode | undefined`) - Render function for slot content (via Teleport).
- **patchOption** (`(src: Option) => Option`) - Transform option object to inject formatters.

### Supported Slot Names

- `tooltip` or `tooltip-<index>` — Custom tooltip renderer
- `dataView` or `dataView-<index>` — Custom data view renderer

### Slot Parameter Types

- `tooltip` slot: `TooltipComponentFormatterCallbackParams`
- `dataView` slot: `Option`

### Limitations

- Only supports formatter-type slots.
- Content rendered outside Vue component tree (in detached div).
- Teleported DOM may affect CSS scoping.

### Usage Example

```vue
<script setup>
import VChart from 'vue-echarts'
</script>

<template>
  <VChart :option="option">
    <!-- Custom tooltip for all series -->
    <template #tooltip="{ name, value }">
      <div class="custom-tooltip">
        <strong>{{ name }}</strong>
        <p>Value: {{ value }}</p>
      </div>
    </template>

    <!-- Custom tooltip for series at index 0 -->
    <template #tooltip-0="{ value }">
      <div>Series 0: {{ value }}</div>
    </template>

    <!-- Custom data view -->
    <template #dataView="option">
      <pre>{{ JSON.stringify(option, null, 2) }}</pre>
    </template>
  </VChart>
</template>

<style scoped>
.custom-tooltip {
  background: white;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
</style>
```
```

--------------------------------

### Set Global Loading Options

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/configuration.md

Define global default options for the loading mask using `provide` and `LOADING_OPTIONS_KEY`. This applies the specified options to all charts unless overridden locally.

```typescript
provide(LOADING_OPTIONS_KEY, {
  text: 'Please wait...',
  maskColor: 'rgba(0, 0, 0, 0.3)'
})
```

--------------------------------

### Dependency Injection for Defaults

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/overview.md

Provide application-wide defaults for theme, initialization options, update options, and loading options using Vue's provide/inject API. These can accept refs or computed values for reactivity.

```typescript
provide(THEME_KEY, 'dark')
provide(INIT_OPTIONS_KEY, { renderer: 'canvas' })
provide(UPDATE_OPTIONS_KEY, { notMerge: false })
provide(LOADING_OPTIONS_KEY, { text: 'Loading...' })
```

--------------------------------

### createBoundHandler

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/event-system.md

Creates an appropriate handler wrapper, either a normal handler or a one-time handler that unregisters after its first invocation.

```APIDOC
## createBoundHandler

### Description
Creates an appropriate handler wrapper, either a normal handler or a one-time handler that unregisters after its first invocation.

### Function Signature
```typescript
function createBoundHandler(
  emitter: EventEmitter,
  event: string,
  value: unknown,
  once: boolean
): EventHandler | undefined
```

### Parameters
#### Path Parameters
- **emitter** (EventEmitter) - Required - The event emitter instance.
- **event** (string) - Required - The name of the event.
- **value** (unknown) - Required - The handler value, which can be a function or an array of functions.
- **once** (boolean) - Required - If true, the handler will only be called once.

### Returns
- **EventHandler | undefined** - The bound event handler, or undefined if no handlers are resolved.

### Logic
1. Resolve handlers from value using `resolveHandlers()`.
2. If no handlers, return undefined.
3. Create invoke function calling all handlers.
4. If once=true, wrap in one-time handler that unregisters after call.
5. Return bound handler.

### Once Wrapper Behavior
- Tracks `called` state.
- On first invocation: calls all handlers, unregisters, sets called=true.
- On subsequent: no-op (already called).
```

--------------------------------

### Event System API

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/COMPLETION_SUMMARY.txt

Documentation for the event system, including chart events, graphics events, and ZRender events.

```APIDOC
## Event System API

### Description
This section describes the event handling capabilities of Vue-ECharts, covering various types of events that can be listened to and emitted.

### Event Types
- **Mouse Events**: `click`, `mouseover`, `mouseout`, etc. (9 types)
- **Chart Events**: `rendered`, `finished`, `legendselectchanged`, etc. (22+ types)
- **Graphics Events**: Events related to graphic elements. (15+ types)
- **Special Events**: `rendered`, `finished`.
- **ZRender Events**: Prefixed with `zr:` (e.g., `zr:click`).

### Event Binding
Events can be bound using the `VChart` component's event listeners or the `useEvent` composable.

### Usage Example
```vue
<template>
  <VChart @click="handleClick" />
</template>

<script setup>
function handleClick(params) {
  console.log('Chart clicked:', params);
}
</script>

```

--------------------------------

### ECharts Instance Methods

Source: https://github.com/ecomfe/vue-echarts/blob/main/README.md

This section lists the methods available on an ECharts instance that can be directly invoked by the user. These methods allow for interaction and retrieval of information from the chart.

```APIDOC
## Methods

- `setOption`: Sets or merges the ECharts option.
- `getWidth`: Gets the width of the ECharts instance.
- `getHeight`: Gets the height of the ECharts instance.
- `getDom`: Gets the DOM element of the ECharts instance.
- `getOption`: Gets the current ECharts option.
- `resize`: Resizes the ECharts instance.
- `dispatchAction`: Dispatches a chart action.
- `convertToPixel`: Converts coordinate system pixel to data value.
- `convertFromPixel`: Converts data value to coordinate system pixel.
- `containPixel`: Checks if a pixel is within the chart's coordinate system.
- `getDataURL`: Exports the chart as a data URL.
- `getConnectedDataURL`: Exports connected charts as a data URL.
- `clear`: Clears the chart instance.
- `dispose`: Disposes of the chart instance.
```

--------------------------------

### Provide Injection Keys for Global Defaults

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/VChart.md

Use Vue's `provide()` with `vue-echarts` injection keys to set application-wide defaults for theme, initialization options, update options, and loading options.

```typescript
import { THEME_KEY, INIT_OPTIONS_KEY, UPDATE_OPTIONS_KEY, LOADING_OPTIONS_KEY } from 'vue-echarts'

// Provide theme for all descendants
provide(THEME_KEY, 'dark')

// Provide init options
provide(INIT_OPTIONS_KEY, { renderer: 'canvas' })

// Provide update options
provide(UPDATE_OPTIONS_KEY, { replaceMerge: ['series'] })

// Provide loading options
provide(LOADING_OPTIONS_KEY, { text: 'Loading...', maskColor: 'rgba(0,0,0,0.5)' })
```

--------------------------------

### Import VChart and Constants

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/VChart.md

Import the main VChart component and related constants for theme and option management. These are essential for setting up charts and applying configurations.

```typescript
import VChart, { THEME_KEY, INIT_OPTIONS_KEY, UPDATE_OPTIONS_KEY, LOADING_OPTIONS_KEY } from 'vue-echarts'
```

--------------------------------

### Update Planning Algorithm

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/REFERENCE_INDEX.md

Details the option update strategy algorithm, including core types, public functions, and usage in VChart.

```APIDOC
## Option Update Strategy Algorithm

### Description
Details the algorithm behind the option update strategy, including core types, public functions, and its application within VChart.

### Core Types
- **UpdatePlan**
- **ArraySummary**
- **Signature**
- **PlannedUpdate**

### Public Functions
- **buildSignature**: Builds a signature for update planning.
- **planUpdate**: Plans the update based on the signature.

### Internal Functions
Includes details on internal functions such as `readId`, `summarizeArray`, `diffKeys`, and `shouldForceNotMerge`.

### Usage in VChart
Explains how the update planning algorithm is utilized within the VChart component.

### Performance Characteristics and Accuracy
Discusses the performance and accuracy of the update strategy.

### Optimization Scenarios
Highlights scenarios where the update planning can be optimized.

### Extension Points
Information on potential extension points for the algorithm.

### Testing Examples
Provides examples for testing the update planning functionality.
```

--------------------------------

### Raw Options

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/graphic-components.md

Merge raw options for shape and style properties.

```APIDOC
## Raw Options

### Description
These properties allow you to provide raw options that are merged with shape-specific or style-specific props.

### Properties
- `shape` (Record<string, unknown>) - Raw shape options that will be merged with shape-specific props.
- `style` (Record<string, unknown>) - Raw style options that will be merged with style props.
```

--------------------------------

### Public Methods (from ECharts)

Source: https://github.com/ecomfe/vue-echarts/blob/main/_autodocs/api-reference/VChart.md

Methods delegated to the underlying ECharts instance, accessible via template refs.

```APIDOC
## Public Methods (from ECharts)

Delegates to underlying ECharts instance:

| Method | Signature | Description |
|---|---|---|
| `getWidth` | `() => number` | Get chart container width in pixels. |
| `getHeight` | `() => number` | Get chart container height in pixels. |
| `getDom` | `() => HTMLElement` | Get the DOM element containing the chart. |
| `getOption` | `() => Option` | Get the current chart option. |
| `resize` | `(opts?: ResizeOpts) => void` | Manually trigger chart resize. |
| `dispatchAction` | `(action: any) => void` | Dispatch ECharts action (e.g., highlights, selections). |
| `convertToPixel` | `(finder: any, value: any) => any` | Convert coordinate system values to pixel coordinates. |
| `convertFromPixel` | `(finder: any, value: any) => any` | Convert pixel coordinates to coordinate system values. |
| `containPixel` | `(finder: any, value: any) => boolean` | Check if pixel is within a graphic element. |
| `getDataURL` | `(opts?: any) => string` | Get canvas data URL (PNG). |
| `getConnectedDataURL` | `(opts?: any) => string` | Get combined data URL for connected charts. |
| `appendData` | `(opts: any) => void` | Append data to existing series without replacing. |
| `clear` | `() => void` | Clear all graphics on the chart. |
| `isDisposed` | `() => boolean` | Check if chart instance has been disposed. |
| `dispose` | `() => void` | Dispose the chart and release resources. |
```