### Full Configuration Example - Nuxt ECharts

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/1.getting-started/3.configuration.md

A comprehensive example of Nuxt ECharts configuration, including renderer, charts, and components. This configuration is used to generate an optimized ECharts module.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-echarts'],
  echarts: {
    renderer: 'svg',
    charts: ['BarChart'],
    components: ['DatasetComponent', 'GridComponent', 'TooltipComponent'],
  },
})
```

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

### Local Development Commands

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/README.md

Commands for local development, including dependency installation, type generation, running the playground, building, linting, formatting, and testing.

```bash
pnpm install
```

```bash
pnpm run dev:prepare
```

```bash
pnpm run dev
```

```bash
pnpm run dev:build
```

```bash
pnpm run lint
```

```bash
pnpm run format
```

```bash
pnpm run test
```

```bash
pnpm run test:watch
```

```bash
pnpm run release
```

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

### Manually Install Nuxt ECharts

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/1.getting-started/2.installation.md

Install the Nuxt ECharts package manually using your preferred package manager.

```bash
pnpm i nuxt-echarts -D
```

```bash
yarn add nuxt-echarts -D
```

```bash
npm i nuxt-echarts -D
```

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

### VChartLight Component Usage

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/5.v-chart-light.md

Example of how to use the VChartLight component with ECharts options and handling click events.

```APIDOC
## VChartLight Component

### Description

Enables simple client-side interactions on server-side rendered ECharts SVGs using a lightweight client runtime.

### Props

#### `init-options` (object)

Optional chart init configurations. See `echarts.init`'s [`opts` parameter](https://echarts.apache.org/en/api.html#echarts.init).

Note: The `height` and `width` properties must be specified in `init-options` for SSR.

#### `theme` (string | object)

Theme to be applied. See `echarts.init`'s [`theme` parameter](https://echarts.apache.org/en/api.html#echarts.init).

#### `option` (object)

ECharts' universal interface. Modifying this prop will trigger ECharts' `setOption` method.

### Events

#### `click` (params: ECSSRClientEventParams) => void

Emitted when clicking on chart elements. The `params` object contains details about the click event, including `ssrType` which can be 'legend' or 'chart'.

#### `mouseout` (params: ECSSRClientEventParams) => void

Emitted when the mouse leaves chart elements.

#### `mouseover` (params: ECSSRClientEventParams) => void

Emitted when the mouse enters chart elements.

### Event Parameters Interface

```ts
export interface ECSSRClientEventParams {
  type: 'mouseover' | 'mouseout' | 'click';
  ssrType: 'legend' | 'chart';
  seriesIndex?: number;
  dataIndex?: number;
  event: Event;
}
```

### Example Usage

```vue
<script setup>
import { ref } from 'vue';

const option = ref({
  legend: {
    selected: {
      a: true,
      b: true,
      c: true,
    },
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      roseType: 'angle',
      data: [
        { value: 800, name: 'a' },
        { value: 735, name: 'b' },
        { value: 580, name: 'c' },
      ],
    },
  ],
});

function onClick(params) {
  if (params.ssrType === 'legend') {
    const key = Object.keys(option.value.legend.selected)[params.dataIndex];
    // toggle display of the series
    option.value.legend.selected[key] = !option.value.legend.selected[key];
  }
}
</script>

<template>
  <VChartLight :option="option" @click="onClick" />
</template>
```
```

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

### Using VChart Component with ECOption Type

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/2.guides/1.usage.md

Example of using the VChart component in a Vue.js application with a chart option typed as ECOption. This demonstrates dynamic chart rendering with type safety.

```vue
<script setup lang="ts">
const option = ref<ECOption>({
  dataset: {
    dimensions: ['Product', '2015', '2016', '2017'],
    source: [
      {
        Product: 'Matcha Latte',
        2015: 54,
        2016: 42,
        2017: 23,
      },
    ],
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }],
})
</script>

<template>
  <VChart :option="option" />
</template>
```

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

### Generated ECharts Module Example

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/1.getting-started/3.configuration.md

Illustrates the virtual module generated by Nuxt ECharts based on your configuration. This module imports and registers the specified ECharts core, renderers, charts, components, and features.

```typescript
import { use } from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
} from 'echarts/components'

use([
  CanvasRenderer,
  SVGRenderer,
  BarChart,
  DatasetComponent,
  GridComponent,
  TooltipComponent,
])
```

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

### Generated EChartsOption Type

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/2.guides/1.usage.md

This is an example of the TypeScript type definition for ECharts options generated by Nuxt ECharts based on the module configuration. It ensures type safety for your chart configurations.

```ts
// Generated by nuxt-echarts

import type { ComposeOption } from 'echarts/core'
import type { BarSeriesOption } from 'echarts/charts'
import type {
  DatasetComponentOption,
  GridComponentOption,
  TooltipComponentOption,
} from 'echarts/components'

declare global {
  export type ECOption = ComposeOption<
    |
      | BarSeriesOption
    | DatasetComponentOption
    | GridComponentOption
    | TooltipComponentOption
  >
}

export {}
```

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

### Basic VChartLight Usage with Click Handler

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/5.v-chart-light.md

Demonstrates how to use VChartLight with a click handler to toggle series visibility based on legend clicks. Ensure the `option` prop is reactive.

```vue
<script setup>
const option = ref({
  legend: {
    selected: {
      a: true,
      b: true,
      c: true,
    },
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      roseType: 'angle',
      data: [
        { value: 800, name: 'a' },
        { value: 735, name: 'b' },
        { value: 580, name: 'c' },
      ],
    },
  ],
})

function onClick(params) {
  if (params.ssrType === 'legend') {
    const key = Object.keys(option.value.legend.selected)[params.dataIndex]
    // toggle display of the series
    option.value.legend.selected[key] = !option.value.legend.selected[key]
  }
}
</script>

<template>
  <VChartLight :option="option" @click="onClick" />
</template>
```

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

### Import ECharts Core and Components

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/2.guides/1.usage.md

Import necessary ECharts core modules, chart types, components, and features for tree-shaking. Register these components with echarts.use() for a minimal bundle.

```ts
import * as echarts from 'echarts/core';

import { BarChart } from 'echarts/charts';

import {
  TooltipComponent,
  GridComponent,
  DatasetComponent,
} from 'echarts/components';

import { LabelLayout, UniversalTransition } from 'echarts/features';

echarts.use([
  BarChart,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  LabelLayout,
  UniversalTransition,
]);
```

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

### Add Nuxt ECharts Module

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/1.getting-started/2.installation.md

Use this command to add the Nuxt ECharts module to a fresh project.

```bash
npx nuxi module add echarts
```

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

### VChartIsland Methods

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/3.v-chart-island.md

Methods available for the VChartIsland component, such as forcing a refresh.

```APIDOC
## Ref

### refresh
- **Type**: `() => Promise<void>`
- **Description**: Force refetch the server component by refetching it.
```

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

### VChartServer Props

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/4.v-chart-server.md

Props available for the VChartServer component.

```APIDOC
## Props

### `init-options`

- **Type**: `object`
- **Description**: Optional chart initialization configurations. Refer to ECharts' `echarts.init` documentation for the `opts` parameter. The injection key for this is `INIT_OPTIONS_KEY`. Note that `height` and `width` must be specified in `init-options` for SSR.

### `theme`

- **Type**: `string | object`
- **Description**: The theme to be applied to the chart. Refer to ECharts' `echarts.init` documentation for the `theme` parameter. The injection key for this is `THEME_KEY`.

### `option`

- **Type**: `object`
- **Description**: ECharts' universal interface. Modifying this prop will trigger ECharts' `setOption` method. More details can be found [here](https://echarts.apache.org/en/option.html).
```

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

### Import All ECharts Functionality

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/2.guides/1.usage.md

This method imports the entire ECharts bundle. It is not recommended for production due to potential bundle size increases.

```ts
import 'echarts'
```

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

### Provide ECharts Options in Vue

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/2.guides/3.provide-inject.md

Use Vue's `provide` function with specific injection keys to set ECharts options. Injection keys like `THEME_KEY` are auto-imported. Note that `UPDATE_OPTIONS_KEY` and `LOADING_OPTIONS_KEY` are only effective for `<VChart>`, not server-rendered components.

```vue
<script setup lang="ts">
import { provide } from 'vue'

/* Injection keys like `THEME_KEY` are auto-imported */

// provide theme
provide(THEME_KEY, 'dark')

// provide init-options
const renderer = ref('svg')
const initOptions = computed(() => ({
  height: 300,
  width: 600,
  renderer: renderer.value,
}))
provide(INIT_OPTIONS_KEY, initOptions)

// provide update-options
provide(UPDATE_OPTIONS_KEY, {})

// provide update-options
provide(LOADING_OPTIONS_KEY, {})
</script>
```

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

### VChartIsland Props

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/3.v-chart-island.md

Props available for the VChartIsland component, including initialization options, theme, and chart data.

```APIDOC
## Props

### init-options
- **Type**: `object`
- **Description**: Optional chart init configurations. See `echarts.init`'s [`opts` parameter](https://echarts.apache.org/en/api.html#echarts.init). Injection key: `INIT_OPTIONS_KEY`.
  - **Note**: The `height` and `width` property must be specified in `init-options` for SSR.

### theme
- **Type**: `string | object`
- **Description**: Theme to be applied. See `echarts.init`'s [`theme` parameter](https://echarts.apache.org/en/api.html#echarts.init). Injection key: `THEME_KEY`.

### option
- **Type**: `object`
- **Description**: ECharts' universal interface. Modifying this prop will trigger ECharts' `setOption` method. Read more [here →](https://echarts.apache.org/en/option.html).
```

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

### VChart Props

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/1.v-chart.md

This section details the available props for the VChart component, which allow for customization of chart initialization, theming, data, and behavior.

```APIDOC
## VChart Component Props

### Props

- **init-options** (object) - Optional chart init configurations. See `echarts.init`'s [`opts` parameter](https://echarts.apache.org/en/api.html#echarts.init). Injection key: `INIT_OPTIONS_KEY`.
- **theme** (string | object) - Theme to be applied. See `echarts.init`'s [`theme` parameter](https://echarts.apache.org/en/api.html#echarts.init). Injection key: `THEME_KEY`.
- **option** (object) - ECharts' universal interface. Modifying this prop will trigger ECharts' `setOption` method. Read more [here →](https://echarts.apache.org/en/option.html).
  - **Smart update**: If you supply `update-options` (via prop or injection), Vue ECharts forwards it directly to `setOption` and skips the planner. Manual `setOption` calls (only available when `manual-update` is `true`) behave like native ECharts, honouring only the per-call override you pass in and are not carried across re-initializations. Otherwise, Vue ECharts analyses the change: removed objects become `null`, removed arrays become `[]` with `replaceMerge`, ID/anonymous deletions trigger `replaceMerge`, and risky changes fall back to `notMerge: true`.
- **update-options** (object) - Options for updating chart option. If supplied (or injected), `<VChart>` forwards it directly to `setOption`, skipping the **smart update**. See `echartsInstance.setOption`'s [`opts` parameter](https://echarts.apache.org/en/api.html#echartsInstance.setOption). Injection key: `UPDATE_OPTIONS_KEY`.
- **group** (string) - Group name to be used in chart [connection](https://echarts.apache.org/en/api.html#echarts.connect). See [`echartsInstance.group`](https://echarts.apache.org/en/api.html#echartsInstance.group).
- **autoresize** (boolean | { throttle?: number, onResize?: () => void }) - Default to `false` - Whether the chart should be resized automatically whenever its root is resized. Use the options object to specify a custom throttle delay (in milliseconds) and/or an extra resize callback function.
- **loading** (boolean) - Default to `false` - Whether the chart is in loading state.
- **loading-options** (object) - Configuration item of loading animation. See `echartsInstance.showLoading`'s [`opts` parameter](https://echarts.apache.org/en/api.html#echartsInstance.showLoading). Injection key: `LOADING_OPTIONS_KEY`.
- **manual-update** (boolean) - Handy for performance-sensitive charts (large or high-frequency updates). When set to `true`, Vue only uses the `option` prop for the initial render; later prop changes do nothing and you must drive updates via `setOption` on a template ref. If the chart re-initializes (for example due to `init-options` changes, flipping `manual-update`, or a remount), the manual state is discarded and the chart is rendered again from the current `option` value.
```

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

### Customizing Tooltip and Data View with Slots

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/1.v-chart.md

Demonstrates how to use Vue slots to customize the tooltip formatter and data view content for the VChart component. This allows for complex HTML rendering within ECharts using Vue's templating.

```vue
<template>
  <v-chart :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>
  </v-chart>
</template>
```

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

### Binding Native DOM Events

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/1.v-chart.md

To bind native DOM events to the `<VChart>` component, prefix the event name with `native:`.

```APIDOC
## Binding Native DOM Events

As `<VChart>` binds events to the ECharts instance by default; there is a caveat when using native DOM events. You need to prefix the event name with `native:` to bind native DOM events.

```vue
<template>
  <v-chart @native:click="handleClick" />
</template>
```
```

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

### Configure ECharts Options

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/1.getting-started/2.installation.md

Add an 'echarts' section to your nuxt.config.ts to customize module options. Refer to the configuration documentation for available settings.

```typescript
echarts: {
  // Options
}
```

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

### VChartServer Events

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/4.v-chart-server.md

Events emitted by the VChartServer component.

```APIDOC
## Events

### `error`

- **Type**: `(error: unknown) => void`
- **Description**: Emitted when `NuxtIsland` fails to fetch the new island.
```

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

### VChartIsland Events

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/3.v-chart-island.md

Events emitted by the VChartIsland component, including error handling.

```APIDOC
## Events

### error
- **Type**: `(error: unknown) => void`
- **Description**: Emitted when `NuxtIsland` fails to fetch the new island.
```

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

### Basic Nuxt ECharts Configuration

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/1.getting-started/3.configuration.md

Configure the echarts module by adding the `echarts` property to your `nuxt.config.ts`. This is the primary way to customize the module's behavior.

```typescript
export default defineNuxtConfig({
  modules: ['nuxt-echarts'],
  echarts: {
    // Options
  }
})
```

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

### Register Components - Nuxt ECharts

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/1.getting-started/3.configuration.md

Register ECharts components that will be available for use with the `<VChart>` component. This helps in including only necessary components for tree-shaking.

```typescript
export default defineNuxtConfig({
  echarts: {
    components: ['DatasetComponent', 'GridComponent', 'TooltipComponent']
  }
})
```

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

### Add Module to nuxt.config.ts

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/1.getting-started/2.installation.md

Configure your Nuxt project to use the nuxt-echarts module by adding it to the 'modules' array in your nuxt.config.ts file.

```typescript
export default defineNuxtConfig({
  modules: [
    'nuxt-echarts',
  ]
})
```

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

### Nuxt ECharts Module Configuration

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/2.guides/1.usage.md

Configure the Nuxt ECharts module in nuxt.config.ts to specify which charts and components to include. This enables automatic generation of a stricter EChartsOption type.

```ts
export default defineNuxtConfig({
  modules: ['nuxt-echarts'],
  echarts: {
    charts: ['BarChart'],
    components: ['DatasetComponent', 'GridComponent', 'TooltipComponent'],
  },
})
```

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

### Configure Renderer - Nuxt ECharts

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/1.getting-started/3.configuration.md

Specify the renderer for ECharts components. Supports 'svg' and 'canvas', or an array to include both. Server-side components always render as SVG.

```typescript
export default defineNuxtConfig({
  echarts: {
    renderer: ['svg', 'canvas']
  }
})
```

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

### Register Charts - Nuxt ECharts

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/1.getting-started/3.configuration.md

Register specific ECharts chart types to be used by the `<VChart>` component. This allows for selective bundling of chart functionalities.

```typescript
export default defineNuxtConfig({
  echarts: {
    charts: ['BarChart', 'LineChart', 'PieChart']
  }
})
```

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

### Binding ECharts Instance Events

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/1.v-chart.md

You can bind ECharts instance events using Vue's `v-on` directive. Note that only the `.once` event modifier is supported.

```APIDOC
## Binding ECharts Instance Events

You can bind events with Vue's `v-on` directive.

```vue
<template>
  <VChart :option="option" @highlight="handleHighlight" />
</template>
```

::note
Only the `.once` event modifier is supported as other modifiers are tightly coupled with the DOM event system.
::

### Supported Events

- `highlight`
- `downplay`
- `selectchanged`
- `legendselectchanged`
- `legendselected`
- `legendunselected`
- `legendselectall`
- `legendinverseselect`
- `legendscroll`
- `datazoom`
- `datarangeselected`
- `timelinechanged`
- `timelineplaychanged`
- `restore`
- `dataviewchanged`
- `magictypechanged`
- `geoselectchanged`
- `geoselected`
- `geounselected`
- `axisareaselected`
- `brush`
- `brushEnd`
- `brushselected`
- `globalcursortaken`
- `rendered`
- `finished`

### Mouse Events

- `click`
- `dblclick`
- `mouseover`
- `mouseout`
- `mousemove`
- `mousedown`
- `mouseup`
- `globalout`
- `contextmenu`

### ZRender Events

- `zr:click`
- `zr:mousedown`
- `zr:mouseup`
- `zr:mousewheel`
- `zr:dblclick`
- `zr:contextmenu`
```

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

### ECSSRClientEventParams Interface

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/5.v-chart-light.md

Defines the structure of parameters passed to client-side ECharts events when using server-side rendering.

```typescript
export interface ECSSRClientEventParams {
  type: 'mouseover' | 'mouseout' | 'click';
  ssrType: 'legend' | 'chart';
  seriesIndex?: number;
  dataIndex?: number;
  event: Event;
}
```

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

### Bind Native DOM Events

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/1.v-chart.md

To bind native DOM events to the VChart component, prefix the event name with `native:`. This is necessary because the component binds events to the ECharts instance by default.

```vue
<template>
  <v-chart @native:click="handleClick" />
</template>
```

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

### Register Features - Nuxt ECharts

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/1.getting-started/3.configuration.md

Register ECharts features like animations and transitions to be used within your charts. This ensures that only the required features are bundled.

```typescript
export default defineNuxtConfig({
  echarts: {
    features: ['LabelLayout', 'UniversalTransition']
  }
})
```

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

### Bind ECharts Events with V-on

Source: https://github.com/kingyue737/nuxt-echarts/blob/main/docs/content/3.components/1.v-chart.md

Bind ECharts events using Vue's v-on directive. Only the `.once` modifier is supported due to its coupling with the DOM event system.

```vue
<template>
  <VChart :option="option" @highlight="handleHighlight" />
</template>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.