# useCharts

**Repository Path**: QC2168/useCharts

## Basic Information

- **Project Name**: useCharts
- **Description**: Using usecharts can make it easier to create chart components
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-15
- **Last Updated**: 2023-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# useCharts

## 📖 Introduction

Using usecharts can make it easier to create chart components

## 🌈 Feature

- auto resize chart
- Loading effect before rendering
- custom theme
- custom renderer

## 📦 Installation

```
# pnpm (recommend)
pnpm add echarts @qc2168/use-charts

# yarn
yarn add echarts @qc2168/use-charts

# npm
npm install echarts @qc2168/use-charts

```

## 🤖 Usage

```typescript

// template
<!-- width height must be provided for element -->
<div ref = "chartEl"
style = "height:200px;width:200px;" > </div>


// script setup
import useChart from "@qc2168/use-charts"
//  provide a element
const chartEl = ref<HTMLDivElement | null>(null)

const {
    setOption,
    showLoading,
} = useChart(chartEl as Ref<HTMLDivElement>)

onMounted(() => {
    nextTick(() => {
        // turn on chart loading ~
        showLoading()
        // setOption
        setOption({
            /* set data ... */
        })
    })
})
```

> example https://github.com/QC2168/useCharts/tree/main/example

## 🛠️ Argument

| Name    | Description       | Type                  | required |
|---------|-------------------|-----------------------|----------|
| elRef   | echart dom        | `Ref<HTMLDivElement>` | `true`   |
| Options | see options below | `OptionsType`         | `false`  |

### OptionsType

| Name          | Description               | Type                                               | required | Default                  |
|---------------|---------------------------|----------------------------------------------------|----------|--------------------------|
| render        | echart render mode        | `RenderType.SVGRenderer/RenderType.CanvasRenderer` | `false`  | `RenderType.SVGRenderer` |
| autoChartSize | watch chart size changes  | `boolean`                                          | `false`  | `false`                  |
| animation     | Define transition effects | `AnimationType`                                    | `false`  | `{}`                     |
| theme         | echart theme              | `ThemeType.Light/ThemeType.Dark/ThemeType.Default` | `false`  | `ThemeType.Default`      |

### AnimationType

| Name   | Description                                                 | Type      | required | Default |
|--------|-------------------------------------------------------------|-----------|----------|---------|
| enable | set to false to prevent the transition effects from showing | `boolean` | `false`  | `false` |
| styles | styles object                                               | `Object`  | `false`  | `{}`    |