Uni ECharts

https://github.com/xiaohe0601/uni-echarts
Admin
An Apache ECharts component designed for uni-app, offering a user experience similar to Vue ECharts...
Tokens:47,831
Snippets:432
Trust Score:8.8
License:MIT
Update:4 months ago
Show doc for...
Tokens:
Raw
### Complete Uni-Echarts Configuration Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/configuration.md

Demonstrates a full setup of the UniEcharts component with various props for options, themes, initialization, updates, loading states, and event handling.

```vue
<template>
  <view class="chart-wrapper">
    <UniEcharts
      ref="chartRef"
      class="chart"
      :option="chartOption"
      :theme="currentTheme"
      :initOptions="initOpts"
      :updateOptions="updateOpts"
      :autoresize="{ throttle: 300, onResize: handleResize }"
      :loading="isLoading"
      :loadingOptions="loadingOpts"
      :support-hover="true"
      @inited="handleChartInited"
      @click="handleChartClick"
    />
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import { UniEcharts } from 'uni-echarts'

const chartRef = ref(null)
const isLoading = ref(false)
const currentTheme = ref('light')

// Chart option configuration
const chartOption = computed(() => ({
  tooltip: { trigger: 'axis' },
  legend: { data: ['Sales'] },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
  yAxis: { type: 'value' },
  series: [{ name: 'Sales', data: [120, 200, 150], type: 'line' }]
}))

// Initialization options
const initOpts = {
  renderer: 'canvas',
  devicePixelRatio: 2,
  useDirtyRect: true
}

// Update options
const updateOpts = {
  notMerge: false,
  lazyUpdate: false
}

// Loading animation options
const loadingOpts = {
  text: 'Loading data...', 
  textColor: '#333',
  fontSize: 16,
  maskColor: 'rgba(255, 255, 255, 0.8)',
  showSpinner: true,
  color: '#4472ca'
}

function handleChartInited() {
  console.log('Chart initialized')
}

function handleChartClick(params) {
  console.log('Chart clicked:', params)
}

function handleResize() {
  console.log('Chart resized')
}

async function fetchData() {
  isLoading.value = true
  try {
    // Fetch data
    await new Promise(r => setTimeout(r, 1000))
    isLoading.value = false
  } catch (e) {
    isLoading.value = false
  }
}

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

<style scoped>
.chart-wrapper {
  width: 100%;
  height: 500rpx;
  background: #fff;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
```

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

### Uni-Echarts Initialization Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/configuration.md

Example of configuring Uni-Echarts with specific initialization options like renderer, devicePixelRatio, useDirtyRect, and locale.

```vue
<UniEcharts
  :option="chartOption"
  :initOptions="{
    renderer: 'canvas',
    devicePixelRatio: 2,
    useDirtyRect: true,
    locale: 'en-US'
  }"
/>
```

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

### Vue Script Setup for Gradient

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/examples/gradient.md

Vue script setup for ECharts gradient examples. Requires ECharts and Vue.

```vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chart = ref<HTMLElement>()

onMounted(() => {
  const myChart = echarts.init(chart.value)
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  }

  myChart.setOption(option)
})
</script>
```

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

### LoadingOptions Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/types.md

An example of LoadingOptions, configuring the loading text, colors, font, mask, and spinner properties for a visual loading indicator.

```typescript
const loadingOptions: LoadingOptions = {
  text: 'Loading data...',
  textColor: '#333',
  fontSize: 16,
  fontFamily: 'Arial',
  maskColor: 'rgba(255, 255, 255, 0.7)',
  showSpinner: true,
  color: '#4472ca',
  spinnerRadius: 10,
  lineWidth: 4
}
```

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

### UniEcharts Component Usage Examples

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/uni-echarts-component.md

Demonstrates various ways to use the UniEcharts component, including basic setup, manual data updates for performance, applying themes, configuring auto-resize behavior, and utilizing slots for custom content.

```APIDOC
## UniEcharts Component Usage

### Basic Setup

This example shows the fundamental way to integrate `UniEcharts` into your Vue template, providing chart options and handling the `inited` event.

```vue
<template>
  <view class="chart-container">
    <UniEcharts
      ref="chartRef"
      :option="chartOption"
      :autoresize="true"
      @inited="onChartInited"
    />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { UniEcharts } from 'uni-echarts'

const chartRef = ref(null)

const chartOption = computed(() => ({
  tooltip: { trigger: 'axis' },
  legend: { data: ['Sales', 'Expenses'] },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [
    { name: 'Sales', data: [120, 200, 150, 80, 70], type: 'line' },
    { name: 'Expenses', data: [90, 110, 130, 120, 150], type: 'line' }
  ]
}))

function onChartInited() {
  console.log('Chart ready')
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400rpx;
}
</style>
```

### Manual Update Mode (Performance Optimization)

For scenarios requiring frequent data updates, `manual-update` can improve performance by preventing automatic re-rendering. You then manually call `setOption` on the chart instance.

```vue
<template>
  <UniEcharts
    ref="chartRef"
    :option="chartOption"
    manual-update
  />
  <button @click="updateData">Update Data</button>
</template>

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

const chartRef = ref(null)
const chartOption = ref(null)

function updateData() {
  const newOption = {
    xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] },
    yAxis: { type: 'value' },
    series: [{ data: [10, 20, 30, 40], type: 'bar' }]
  }
  
  // In manual mode, directly call setOption
  chartRef.value?.setOption(newOption)
}
</script>
```

### With Theme

Apply a predefined theme to your chart by passing the `theme` prop.

```vue
<UniEcharts
  :option="chartOption"
  theme="dark"
/>
```

### Auto-resize with Configuration

Customize the auto-resize behavior by providing a configuration object to the `autoresize` prop, including options like `throttle` and an `onResize` callback.

```vue
<UniEcharts
  :option="chartOption"
  :autoresize="{ throttle: 300, onResize: () => console.log('resized') }"
/>
```

### Using Slots

The `UniEcharts` component supports a default slot, allowing you to inject custom content directly within the chart container.

```vue
<UniEcharts :option="chartOption">
  <view class="overlay">Custom content</view>
</UniEcharts>
```
```

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

### Example Usage of Environment Flags

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/utilities.md

Demonstrates how to use imported environment flags like `isWeb` and `isMpWeixin` to conditionally execute code based on the runtime platform. Includes an example of using `getIsPc`.

```typescript
import { isWeb, isMpWeixin, getIsPc } from 'uni-echarts/shared'

if (isWeb) {
  console.log('Running in web browser')
}

if (isMpWeixin) {
  console.log('Running in WeChat mini-program')
}

const isPc = getIsPc() // Is desktop browser or Windows mini-program
```

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

### InitOptions Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/types.md

An example of InitOptions, specifying the renderer, device pixel ratio, dirty rectangle rendering, and locale for chart initialization.

```typescript
const initOptions: InitOptions = {
  renderer: 'canvas',
  devicePixelRatio: 2,
  useDirtyRect: true,
  locale: 'en-US'
}
```

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

### Complete Uni-Echarts Event Handling Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/events.md

This example demonstrates how to bind and handle a wide range of Uni-Echarts events, from basic initialization and clicks to more complex interactions like data zooming and native touch events. It shows the Vue template setup and the corresponding script logic for each event handler.

```vue
<template>
  <UniEcharts
    ref="chartRef"
    :option="chartOption"
    @inited="handleInit"
    @click="handleChartClick"
    @mouseover="handleMouseOver"
    @mouseout="handleMouseOut"
    @legendselectchanged="handleLegendChange"
    @datazoom="handleDataZoom"
    @rendered="handleRendered"
    @finished="handleFinished"
    @native:tap="handleTap"
    @native:longpress="handleLongPress"
  />
</template>

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

const chartRef = ref(null)

const chartOption = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['Series A', 'Series B'] },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
  yAxis: { type: 'value' },
  series: [
    { name: 'Series A', data: [120, 200, 150], type: 'line' },
    { name: 'Series B', data: [90, 110, 130], type: 'line' }
  ]
})

function handleInit() {
  console.log('Chart initialized')
}

function handleChartClick(params) {
  console.log('Chart element clicked:', {
    series: params.seriesName,
    value: params.value,
    index: params.dataIndex
  })
}

function handleMouseOver(params) {
  console.log('Mouse over:', params.seriesName)
}

function handleMouseOut(params) {
  console.log('Mouse out')
}

function handleLegendChange(params) {
  console.log('Legend changed:', params.selected)
}

function handleDataZoom(params) {
  console.log('Data zoomed:', {
    start: params.start,
    end: params.end,
    startValue: params.startValue,
    endValue: params.endValue
  })
}

function handleRendered(params) {
  console.log(`Render time: ${params.elapsedTime}ms`)
}

function handleFinished() {
  console.log('Animation complete')
}

function handleTap() {
  console.log('Canvas tapped')
  // Could toggle fullscreen, show menu, etc.
}

function handleLongPress() {
  console.log('Canvas long-pressed')
  // Could show options menu
}
</script>
```

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

### UniEcharts Component Instance Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/types.md

Demonstrates how to get a reference to the UniEcharts instance using a template ref and call the setOption method after the component is mounted. Ensure the chartRef is correctly typed.

```typescript
import type { UniEchartsInst } from 'uni-echarts'

const chartRef = ref<UniEchartsInst>(null)

onMounted(() => {
  chartRef.value?.setOption(option)
})
```

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

### Basic UniEcharts Setup

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/uni-echarts-component.md

A basic setup for the UniEcharts component in a Vue application, including chart options, autoresize, and an initialization event handler.

```vue
<template>
  <view class="chart-container">
    <UniEcharts
      ref="chartRef"
      :option="chartOption"
      :autoresize="true"
      @inited="onChartInited"
    />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { UniEcharts } from 'uni-echarts'

const chartRef = ref(null)

const chartOption = computed(() => ({
  tooltip: { trigger: 'axis' },
  legend: { data: ['Sales', 'Expenses'] },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [
    { name: 'Sales', data: [120, 200, 150, 80, 70], type: 'line' },
    { name: 'Expenses', data: [90, 110, 130, 120, 150], type: 'line' }
  ]
}))

function onChartInited() {
  console.log('Chart ready')
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400rpx;
}
</style>
```

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

### Set Chart Option Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/uni-echarts-component.md

Use the setOption method to initialize or update chart data and configuration. This example demonstrates setting basic line chart data.

```typescript
const chartRef = ref(null)

onMounted(() => {
  chartRef.value?.setOption({
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150], type: 'line' }]
  })
})
```

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

### AutoResize Configuration Examples

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/types.md

Illustrates how to use the AutoResize type, showing both a simple boolean enable/disable and a configuration object with custom throttle and a resize callback.

```typescript
// Simple enable/disable
const autoresize: AutoResize = true

// With configuration
const autoresize: AutoResize = {
  throttle: 500,
  onResize: () => console.log('resized')
}
```

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

### SetOption Examples

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/configuration.md

Demonstrates different ways to use the `setOption` method with update options, including replacing the entire option, performing a lazy update, and selectively merging series.

```javascript
// Replace entire option without merging
chart.setOption(newOption, { notMerge: true })

// Lazy update with deferred rendering
chart.setOption(dataUpdate, { lazyUpdate: true })

// Replace specific series, merge others
chart.setOption(update, { replaceMerge: ['series'] })
```

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

### Chart with Loading State Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/README.md

Shows how to implement a loading state for the UniEcharts component while data is being fetched.

```vue
<template>
  <UniEcharts
    :option="option"
    :loading="isLoading"
    :loadingOptions="{ text: 'Loading...' }"
  />
</template>

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

const isLoading = ref(true)
const option = ref(null)

onMounted(async () => {
  const data = await fetchData()
  option.value = processData(data)
  isLoading.value = false
})
</script>
```

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

### Handle Chart Touch and Mouse Events

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/composables-behavior.md

Manage touch and mouse events for chart interaction. This example sets up event handlers for touch start, move, and end, along with cleanup.

```typescript
const touch = useEchartsTouch({
  vueThis: getCurrentInstance().proxy,
  supportHover: computed(() => props.supportHover),
  isPc: true,
  canvasId: 'my-canvas',
  chart,
  canvasRect: reactive({ top: 0, left: 0, width: 500, height: 400, dpr: 1 }),
  getTouch: (event, touches) => ({
    x: event.clientX - rect.left,
    y: event.clientY - rect.top,
    wheelDelta: event.wheelDelta || 0
  })
})

// In template
@touchstart="touch.onStart"
@touchmove="touch.onMove"
@touchend="touch.onEnd"

// On unmount
onBeforeUnmount(() => touch.cleanup())
```

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

### Script Setup for Action Dispatch

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/examples/action-dispatch.md

This snippet shows the script setup for dispatching actions in a Uni-Echarts component. It imports necessary functions and sets up the component's logic.

```vue
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  getCurrentInstance
} from 'vue';

export default defineComponent({
  name: 'ActionDispatch',
  setup() {
    const chartRef = ref<any>(null);
    const chartInstance = ref<any>(null);
    const option = reactive({
      title: {
        text: 'Action Dispatch Example'
      },
      tooltip: {},
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [
        {
          name: 'Sales',
          type: 'bar',
          data: [5, 20, 36, 10, 75]
        }
      ]
    });

    onMounted(() => {
      const { proxy } = getCurrentInstance();
      chartInstance.value = proxy.$echarts.init(chartRef.value);
      chartInstance.value.setOption(option);
    });

    const dispatchAction = (type: string) => {
      if (chartInstance.value) {
        chartInstance.value.dispatchAction({
          type: type
        });
      }
    };

    return {
      chartRef,
      option,
      dispatchAction
    };
  }
});
```

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

### UniCanvas Usage Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/utilities.md

Demonstrates how to instantiate and use the UniCanvas class for canvas manipulation, including setting dimensions, getting the context, and handling events.

```typescript
import { UniCanvas } from 'uni-echarts/shared'

const canvas = new UniCanvas(
  'my-canvas',
  uni.createCanvasContext('my-canvas'),
  null
)

// Get/set dimensions
canvas.width = 500
canvas.height = 400

// Get context
const ctx = canvas.getContext('2d')

// Listen to events
canvas.addEventListener('click', (event) => {
  console.log('Canvas clicked', event)
})

// Dispatch events
UniCanvas.dispatch(handler, 'click', { x: 100, y: 100 })
```

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

### Install ECharts using npm

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/guide/getting-started.md

Install the ECharts library using your preferred package manager (pnpm, yarn, or npm).

```shell
pnpm add echarts
```

```shell
yarn add echarts
```

```shell
npm install echarts
```

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

### Setup Uni-Echarts with Options API

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/guide/getting-started.md

Demonstrates how to set up Uni-Echarts using Vue's Options API. ECharts instance and theme are provided via the `provide` option.

```vue
<template>
  <uni-echarts custom-class="chart" :option="option"></uni-echarts>
</template>

<script>
import { PieChart } from "echarts/charts";
import { DatasetComponent, LegendComponent, TooltipComponent } from "echarts/components";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import UniEcharts from "uni-echarts";
import { ECHARTS_KEY, THEME_KEY } from "uni-echarts/shared";
import { defineComponent } from "vue";

echarts.use([
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  PieChart,
  CanvasRenderer
]);

export default defineComponent({
  components: {
    UniEcharts
  },
  provide: {
    [ECHARTS_KEY]: echarts,
    [THEME_KEY]: "dark"
  },
  data() {
    return {
      option: {
        legend: {
          top: 10,
          left: "center"
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            // #ifdef MP-WEIXIN
            // 临时解决微信小程序 tooltip 文字阴影问题
            textShadowBlur: 1
            // #endif
          }
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "52%"],
            label: {
              show: false,
              position: "center"
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#ffffff",
              borderRadius: 10
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20
              }
            }
          }
        ],
        dataset: {
          dimensions: ["来源", "数量"],
          source: [
            ["Search Engine", 1048],
            ["Direct", 735],
            ["Email", 580],
            ["Union Ads", 484],
            ["Video Ads", 300]
          ]
        }
      }
    };
  }
});
</script>

<style>
.chart {
  height: 300px;
}
</style>
```

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

### ChartTheme Examples

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/types.md

Demonstrates using a theme by name (e.g., 'dark') or by providing a full theme object with color, background, and text style configurations.

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

// Theme object
const theme: ChartTheme = {
  color: ['#5470c6', '#91419f', '#ee6666'],
  backgroundColor: 'rgba(255, 255, 255, 0)',
  textStyle: { color: '#333' },
  title: { textStyle: { color: '#333' } }
}
```

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

### ChartOption Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/types.md

An example of a complete ChartOption object used for configuring a line chart with tooltips, legends, axes, and series data.

```typescript
const option: ChartOption = {
  tooltip: { trigger: 'axis' },
  legend: { data: ['Series A', 'Series B'] },
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
  yAxis: { type: 'value' },
  series: [
    { name: 'Series A', data: [120, 200, 150], type: 'line' },
    { name: 'Series B', data: [90, 110, 130], type: 'line' }
  ]
}
```

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

### Basic Chart Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/README.md

A simple Vue component demonstrating a basic bar chart using UniEcharts.

```vue
<template>
  <UniEcharts :option="option" autoresize />
</template>

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

const option = ref({
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ data: [10, 20, 30], type: 'bar' }]
})
</script>
```

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

### UniEcharts Component Usage Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/README.md

Demonstrates basic usage of the UniEcharts component with dynamic options and an event handler.

```vue
<UniEcharts
  :option="chartOption"
  :autoresize="true"
  @click="handleClick"
/>
```

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

### Async Data Fetching and Rendering (Vue.js)

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/examples/async-data.md

This script setup in a Vue.js component handles fetching asynchronous data and rendering it using Uni-Echarts. It includes setup for data fetching and chart initialization.

```vue
<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts/theme/macarons"; // Import a theme

const chartInstance = ref<echarts.ECharts | null>(null);
const chartData = ref<any>(null);

onMounted(() => {
  // Initialize chart
  const chartDom = document.getElementById("async-chart");
  if (chartDom) {
    chartInstance.value = echarts.init(chartDom, "macarons"); // Apply theme
  }

  // Simulate fetching data
  setTimeout(() => {
    chartData.value = {
      title: {
        text: "Async Data Example"
      },
      tooltip: {},
      xAxis: {
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {},
      series: [
        {
          name: "Sales",
          type: "line",
          data: [150, 230, 224, 218, 135, 147, 260]
        }
      ]
    };
    // Set option after data is fetched
    if (chartInstance.value) {
      chartInstance.value.setOption(chartData.value);
    }
  }, 2000); // Simulate 2-second network delay
});
</script>

<template>
  <div id="async-chart" style="width: 600px; height: 400px;"></div>
</template>

```

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

### Setup Uni-Echarts with Composition API

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/guide/getting-started.md

Demonstrates how to set up Uni-Echarts using Vue's Composition API. Ensure to call provideEcharts and register necessary ECharts components.

```vue
<template>
  <uni-echarts custom-class="chart" :option="option"></uni-echarts>
</template>

<script setup>
import { PieChart } from "echarts/charts";
import { DatasetComponent, LegendComponent, TooltipComponent } from "echarts/components";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import UniEcharts from "uni-echarts";
import { provideEcharts, provideEchartsTheme } from "uni-echarts/shared";
import { ref } from "vue";

// 🚨 注意：必须调用 provideEcharts 才能正常运行
provideEcharts(echarts);
// 🤩 自 2.0.0 开始，通过配置 Vite 插件可以省略上述 provideEcharts 的调用

// 此处仅用于演示通过 provide 修改图表 theme 的方式，不是必须的
provideEchartsTheme("dark");

echarts.use([
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  PieChart,
  CanvasRenderer
]);

const option = ref({
  legend: {
    top: 10,
    left: "center"
  },
  tooltip: {
    trigger: "item",
    textStyle: {
      // #ifdef MP-WEIXIN
      // 临时解决微信小程序 tooltip 文字阴影问题
      textShadowBlur: 1
      // #endif
    }
  },
  series: [
    {
      type: "pie",
      radius: ["30%", "52%"],
      label: {
        show: false,
        position: "center"
      },
      itemStyle: {
        borderWidth: 2,
        borderColor: "#ffffff",
        borderRadius: 10
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20
        }
      }
    }
  ],
  dataset: {
    dimensions: ["来源", "数量"],
    source: [
      ["Search Engine", 1048],
      ["Direct", 735],
      ["Email", 580],
      ["Union Ads", 484],
      ["Video Ads", 300]
    ]
  }
});
</script>

<style>
.chart {
  height: 300px;
}
</style>
```

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

### Template for Action Dispatch

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/examples/action-dispatch.md

This template defines the structure for the action dispatch example, including the chart container and buttons to trigger different actions.

```html
<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart-instance"></div>
    <div class="actions">
      <button @click="dispatchAction('legendToggle')">Legend Toggle</button>
      <button @click="dispatchAction('dataZoom')">Data Zoom</button>
      <button @click="dispatchAction('highlight')">Highlight</button>
      <button @click="dispatchAction('downplay')">Downplay</button>
    </div>
  </div>
</template>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chart-instance {
  width: 80%;
  height: 80%;
}
.actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
</style>
```

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

### UpdateOptions Examples

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/types.md

Illustrates using UpdateOptions for replacing the entire chart option with `notMerge: true` and for performing a lazy update with `lazyUpdate: true`.

```typescript
// Replace entire option
chart.setOption(newOption, { notMerge: true })

// Merge with existing, lazy update
chart.setOption(updateOption, { lazyUpdate: true })
```

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

### Handler Usage Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/types.md

Provides an example of using the Handler type to define a function that processes an event object with 'x' and 'y' properties, logging their values.

```typescript
const handler: Handler<{ x: number; y: number }> = (event) => {
  console.log(event.x, event.y)
}
```

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

### getAppBaseInfo Function

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/utilities.md

Get application information, including SDK version and app language.

```APIDOC
## getAppBaseInfo Function

### Description
Retrieves fundamental application information, including the SDK version and the application's language settings.

### Returns
- **UniApp.GetAppBaseInfoResult | UniApp.GetSystemInfoResult**: An object containing application base information.
```

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

### Resize Chart Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/uni-echarts-component.md

Resize the chart to fit its container or to specific dimensions using the resize method. The method is asynchronous and returns a Promise.

```typescript
// Resize to container dimensions
await chartRef.value?.resize()

// Resize to specific dimensions
await chartRef.value?.resize({ width: 600, height: 400 })
```

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

### getVersion Function

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/utilities.md

Get platform-specific SDK version string. For Alipay mini-programs, it returns `my.SDKVersion`; otherwise, it uses `getAppBaseInfo().SDKVersion`.

```APIDOC
## getVersion Function

### Description
Returns the platform-specific SDK version string. It handles different platform conventions for accessing the SDK version.

### Returns
- **string**: The SDK version string (e.g., '2.9.0').
```

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

### Calling Component Methods via Ref

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/apis/component.md

Demonstrates how to get a reference to the Uni-Echarts component instance and call its methods, such as `toTempFilePath`.

```vue
<template>
  <uni-echarts ref="chartEl"></uni-echarts>
</template>

<script lang="ts" setup>
// ⬇️ npm 方式
import type { UniEchartsInst } from "uni-echarts/shared";
// ⬇️ uni-modules 方式
import type { UniEchartsInst } from "@/uni_modules/xiaohe-echarts";
import { shallowRef } from "vue";

const chartEl = shallowRef<UniEchartsInst | null>(null);

async function download() {
  if (chartEl.value == null) {
    return;
  }

  const { tempFilePath } = await chartEl.value.toTempFilePath();

  // ...
}
</script>
```

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

### Use Autoresize with Throttle and Callback

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/composables-behavior.md

Automatically resize a chart when its container dimensions change. This example configures a throttle delay and a callback for resize events.

```typescript
import { useAutoresize, useEcharts } from 'uni-echarts/shared'
import { ref } from 'vue'

const chart = ref(null)
const root = ref(null)
const echarts = useEcharts()

useAutoresize(chart, {
  echarts,
  autoresize: { throttle: 300, onResize: () => console.log('Chart resized') },
  root
})
```

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

### Type Imports Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/types.md

Shows how to import various types from the 'uni-echarts' package, including component types, shared utility types, and canvas-related types.

```typescript
// Component types
import type { UniEchartsProps, UniEchartsInst, UniEchartsEmits } from 'uni-echarts'

// Composable types
import type {
  ChartOption,
  ChartTheme,
  InitOptions,
  UpdateOptions,
  LoadingOptions,
  EChartsType,
  AutoResize,
  PublicApi
} from 'uni-echarts/shared'

// Utilities
import type { CanvasNode, CanvasContext } from 'uni-echarts/shared'
```

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

### Get Window Information

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/utilities.md

Fetches window or viewport information using `getWindowInfo`. This includes details like pixel ratio and screen dimensions, essential for responsive design.

```typescript
import { getWindowInfo } from 'uni-echarts/shared'

const info = getWindowInfo()
const dpr = info.pixelRatio // Device pixel ratio for retina displays
```

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

### Export Chart to Image Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/uni-echarts-component.md

Export the current chart as a temporary file (e.g., PNG). The toTempFilePath method returns a Promise with the file path.

```typescript
const res = await chartRef.value?.toTempFilePath({
  type: 'png',
  quality: 0.8
})
```

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

### provideEchartsInitOptions

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/composables-core.md

Provides initialization options via context.

```APIDOC
## provideEchartsInitOptions

### Description
Provides initialization options via context.

### Signature
```typescript
function provideEchartsInitOptions(value: InitOptionsInjection): void
```

### Parameters
#### Path Parameters
- **value** (InitOptionsInjection) - Required - Init options to provide
```

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

### Event Handler Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/uni-echarts-component.md

Demonstrates how to handle ECharts and component events like 'click', 'legendselectchanged', and 'inited' using Vue's template and script setup.

```typescript
<template>
  <UniEcharts
    :option="chartOption"
    @click="handleChartClick"
    @legendselectchanged="handleLegendChange"
    @inited="handleChartInited"
  />
</template>

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

function handleLegendChange(params) {
  console.log('Legend selection changed:', params)
}

function handleChartInited() {
  console.log('Chart initialization complete')
}
</script>
```

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

### useEchartsInitOptions

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/composables-core.md

Manages chart initialization options with context injection, providing merged options.

```APIDOC
## useEchartsInitOptions

### Description
Manages chart initialization options with context injection. Provides computed init options that merges local with injected values. Falls back to empty object if none provided.

### Signature
```typescript
function useEchartsInitOptions(
  value: MaybeRefOrGetter<OptionalValue<InitOptions>>
): {
  injectInitOptions: ComputedRef<NullableValue<InitOptions>>,
  innerInitOptions: ComputedRef<InitOptions>
}
```

### Parameters
#### Path Parameters
- **value** (ref | getter | InitOptions) - Required - Init options object

### Returns
- `injectInitOptions` - Injected init options
- `innerInitOptions` - Merged init options

### Example
```typescript
const { innerInitOptions } = useEchartsInitOptions({
  renderer: 'canvas',
  useDirtyRect: true
})
```
```

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

### provideEchartsInitOptions

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/apis/function.md

Provides initialization options for Echarts. These options configure how the chart instance is created.

```APIDOC
## provideEchartsInitOptions

### Description
Provides initialization options for Echarts. These options configure how the chart instance is created.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **value** (InitOptionsInjection) - Required - The initialization options to provide.

### Request Example
```ts
type NullableValue<T> = T | null;

type Injection<T> = MaybeRefOrGetter<NullableValue<T>>;

type InitType = typeof init;
type InitParameters = Parameters<InitType>;

type InitOptions = NonNullable<InitParameters[2]>;
type InitOptionsInjection = Injection<InitOptions>;

declare function provideEchartsInitOptions(value: InitOptionsInjection): void;
```

### Response
#### Success Response (200)
Void

#### Response Example
None
```

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

### provideEchartsInitOptions(value)

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/EXPORTS.md

Provides ECharts initialization options via context.

```APIDOC
## provideEchartsInitOptions(value)

### Description
Provide init options via context.

### Parameters
- **value** (object) - Required - The initialization options object.

### Type
Function
```

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

### isQuickapp

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/EXPORTS.md

Boolean flag indicating if the current environment is a quick application.

```APIDOC
## isQuickapp

### Description
Is quick app.

### Type
Platform Detection Flag
```

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

### Import Vite Build Tools

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/README.md

Demonstrates importing Vite-specific plugins and resolvers for build-time integration.

```typescript
// Vite plugin for code transformation
import { UniEcharts } from 'uni-echarts/vite'

// Component resolver for auto-import
import { UniEchartsResolver } from 'uni-echarts/resolver'
```

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

### useEchartsInitOptions(value)

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/EXPORTS.md

Manages ECharts initialization options with context injection.

```APIDOC
## useEchartsInitOptions(value)

### Description
Manage init options with context injection.

### Parameters
- **value** (object) - Required - The initialization options object.

### Type
Composable Function
```

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

### getConnectedDataURL

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/apis/component.md

Gets the data URL for connected charts.

```APIDOC
## getConnectedDataURL

### Description
Gets the data URL for connected charts.

### Method
(Not specified, typically called directly on the component instance)

### Endpoint
(Not applicable, method call on component instance)

### Parameters
(None)

### Request Example
(Refer to Vue component example in source)

### Response
#### Success Response (string)
- **dataURL** (string) - The data URL of the connected charts image.

#### Response Example
(None)
```

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

### getOption

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/apis/component.md

Gets the current option of the ECharts instance.

```APIDOC
## getOption

### Description
Gets the current option of the ECharts instance.

### Method
(Not specified, typically called directly on the component instance)

### Endpoint
(Not applicable, method call on component instance)

### Parameters
(None)

### Request Example
(Refer to Vue component example in source)

### Response
#### Success Response (object)
- **options** (object) - The current chart configuration options.

#### Response Example
(None)
```

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

### getDom

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/apis/component.md

Gets the DOM element of the ECharts instance.

```APIDOC
## getDom

### Description
Gets the DOM element of the ECharts instance.

### Method
(Not specified, typically called directly on the component instance)

### Endpoint
(Not applicable, method call on component instance)

### Parameters
(None)

### Request Example
(Refer to Vue component example in source)

### Response
#### Success Response (HTMLElement)
- **dom** (HTMLElement) - The DOM element.

#### Response Example
(None)
```

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

### getHeight

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/apis/component.md

Gets the current height of the ECharts instance.

```APIDOC
## getHeight

### Description
Gets the current height of the ECharts instance.

### Method
(Not specified, typically called directly on the component instance)

### Endpoint
(Not applicable, method call on component instance)

### Parameters
(None)

### Request Example
(Refer to Vue component example in source)

### Response
#### Success Response (number)
- **height** (number) - The height of the chart in pixels.

#### Response Example
(None)
```

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

### getWidth

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/apis/component.md

Gets the current width of the ECharts instance.

```APIDOC
## getWidth

### Description
Gets the current width of the ECharts instance.

### Method
(Not specified, typically called directly on the component instance)

### Endpoint
(Not applicable, method call on component instance)

### Parameters
(None)

### Request Example
(Refer to Vue component example in source)

### Response
#### Success Response (number)
- **width** (number) - The width of the chart in pixels.

#### Response Example
(None)
```

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

### getDataURL

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/apis/component.md

Gets the data URL of the chart, allowing it to be exported as an image.

```APIDOC
## getDataURL

### Description
Gets the data URL of the chart, allowing it to be exported as an image.

### Method
(Not specified, typically called directly on the component instance)

### Endpoint
(Not applicable, method call on component instance)

### Parameters
#### Path Parameters
(None)

#### Query Parameters
(None)

#### Request Body
- **options** (object) - Optional - Configuration options for generating the data URL (e.g., type, pixel ratio).

### Request Example
(Refer to Vue component example in source)

### Response
#### Success Response (string)
- **dataURL** (string) - The data URL of the chart image.

#### Response Example
(None)
```

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

### Provide Echarts Init Options

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/apis/function.md

Provides initialization options for Echarts. Use this to configure how the Echarts instance is initialized.

```typescript
type NullableValue<T> = T | null;

type Injection<T> = MaybeRefOrGetter<NullableValue<T>>;

type InitType = typeof init;
type InitParameters = Parameters<InitType>;

type InitOptions = NonNullable<InitParameters[2]>;
type InitOptionsInjection = Injection<InitOptions>;

declare function provideEchartsInitOptions(value: InitOptionsInjection): void;
```

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

### provideEchartsLoadingOptions

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/composables-core.md

Provides loading options via context for child components to use via `useLoading`.

```APIDOC
## provideEchartsLoadingOptions

### Description
Provides loading options via context. Sets up loading options injection for child components to use via `useLoading`.

### Signature
```typescript
function provideEchartsLoadingOptions(value: LoadingOptionsInjection): void
```

### Parameters
#### Path Parameters
- **value** (LoadingOptionsInjection) - Required - Loading options to provide
```

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

### Vite Configuration with UniEchartsResolver

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/resolver-vite.md

Integrates UniEchartsResolver into Vite for automatic component imports. Ensure `@uni-helper/vite-plugin-uni-components` is installed.

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { UniEchartsResolver } from 'uni-echarts/resolver'
import UniComponents from '@uni-helper/vite-plugin-uni-components'

export default defineConfig({
  plugins: [
    vue(),
    UniComponents({
      resolvers: [
        UniEchartsResolver()
      ]
    })
  ]
})
```

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

### isQuickappUnion

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/EXPORTS.md

Boolean flag indicating if the current environment is a Quick App Union application.

```APIDOC
## isQuickappUnion

### Description
Is quick app union.

### Type
Platform Detection Flag
```

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

### getWindowInfo Function

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/utilities.md

Get window/viewport information, including pixelRatio and viewport dimensions. It uses the newer API if available.

```APIDOC
## getWindowInfo Function

### Description
Retrieves window or viewport information, such as pixel ratio and dimensions. This function utilizes the latest available API for accurate results.

### Returns
- **UniApp.GetWindowInfoResult | UniApp.GetSystemInfoResult**: An object containing window information like `pixelRatio`, `screenWidth`, and `screenHeight`.
```

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

### Using ECharts Core Static Methods

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/apis/component.md

Shows how to import and use static methods from ECharts core, such as `use`, for advanced configurations.

```js
import { use } from "echarts/core";

use([
  // ...
]);
```

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

### NullableValue Usage Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/types.md

Illustrates the NullableValue type by creating a type alias 'MaybeChart' which can hold an EChartsType instance or be null.

```typescript
type MaybeChart = NullableValue<EChartsType> // EChartsType | null
```

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

### provideEchartsOption(key, value)

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/EXPORTS.md

Provides named chart options via context, allowing you to manage multiple distinct option sets.

```APIDOC
## provideEchartsOption(key, value)

### Description
Provide named option via context.

### Parameters
- **key** (string) - Required - The key for the option.
- **value** (object) - Required - The chart option object.

### Type
Function
```

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

### getIsPc()

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/EXPORTS.md

Checks if the current environment is a desktop (PC) device.

```APIDOC
## getIsPc()

### Description
Check if running on desktop.

### Type
Device Detection Function
```

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

### OptionalValue Usage Example

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/types.md

Demonstrates the usage of the OptionalValue type by creating a type alias 'MaybeString' which can hold either a string or be undefined.

```typescript
type MaybeString = OptionalValue<string> // string | undefined
```

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

### isApp

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/EXPORTS.md

Boolean flag indicating if the current environment is a native application.

```APIDOC
## isApp

### Description
Is native app.

### Type
Platform Detection Flag
```

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

### mitt

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/utilities.md

A minimal and lightweight event emitter implementation for custom event handling.

```APIDOC
## mitt

### Description
Minimal event emitter implementation.

Lightweight event emitter for custom event handling.

### Example
```typescript
import { mitt } from 'uni-echarts/shared'

type Events = {
  'update': { data: any }
  'error': Error
}

const emitter = mitt<Events>()

emitter.on('update', (event) => {
  console.log('Update:', event.data)
})

emitter.emit('update', { data: [1, 2, 3] })

// Wildcard listener
emitter.on('*', (type, event) => {
  console.log(`Event ${type}:`, event)
})
```
```

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

### provideEchartsOption

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/api-reference/composables-core.md

Provides a chart option via context injection, supporting global or named key provision for hierarchical component trees.

```APIDOC
## provideEchartsOption

### Description
Provides a chart option via context injection. Can provide an option globally or with a named key for hierarchical component trees.

### Signature
```typescript
function provideEchartsOption(value: ChartOptionInjection): void
function provideEchartsOption(key: string, value: ChartOptionInjection): void
```

### Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| value | ChartOptionInjection | The option value to provide |
| key | string | Optional key for named injection |

### Example
```typescript
// Global provision
provideEchartsOption({
  xAxis: { type: 'category' }
})

// Named provision
provideEchartsOption('chart1', {
  xAxis: { type: 'value' }
})

// With ref/getter
provideEchartsOption(computed(() => ({
  xAxis: { type: 'category' }
})))
```
```

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

### getVersion()

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/_autodocs/EXPORTS.md

Retrieves the platform SDK version.

```APIDOC
## getVersion()

### Description
Get platform SDK version.

### Type
Utility Function
```

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

### Enable Shameful Hoisting for PNPM

Source: https://github.com/xiaohe0601/uni-echarts/blob/dev/docs/guide/faq.md

When using PNPM to install echarts, enable shamefully hoist in your .npmrc file to correctly resolve zrender dependencies.

```dotenv
# .npmrc

shamefully-hoist=true
```
Tokens:
Raw