# @vue-chart/echart

> 适用于 vue2.x, 3.x 的 echart 图表工具

Latest version **1.0.0-beta.1** (published 2022-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vue-chart/echart
pnpm add @vue-chart/echart
yarn add @vue-chart/echart
bun add @vue-chart/echart
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.1 |
| Published | 2022-09-13 |
| First published | 2022-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | halo951 |
| Maintainers | halo-951 |
| Keywords | vue, echart, common-chart |

## Links

- npm: https://www.npmjs.com/package/@vue-chart/echart
- Repository: https://github.com/halo951/vue-chart
- Homepage: https://www.npmjs.com/org/vue-chart
- Issues: https://github.com/halo951/vue-chart/issues
- npm.io page: https://npm.io/package/@vue-chart/echart

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.0-beta.1 (latest) — 2022-09-13
- 0.1.7 — 2022-09-08
- 0.1.6 — 2022-09-06
- 0.1.5 — 2022-09-06
- 0.1.4 — 2022-09-06
- 0.1.3 — 2022-09-06
- 0.1.2 — 2022-09-06
- 0.1.1 — 2022-09-05

## README

# @vue-chart/echart

[![npm version](https://badge.fury.io/js/%40vue-chart%2Fechart.svg)](https://www.npmjs.com/package/@vue-chart/echart)
[![npm downloads](https://img.shields.io/npm/dm/%40vue-chart%2Fechart.svg?style=flat)](https://www.npmjs.com/package/@vue-chart/echart)
[![GitHub stars](https://img.shields.io/github/stars/halo951/vue-chart?style=social&label=@vue-chart/echart)](https://github.com/halo951/vue-chart)

## About

适用于 vue2.x、vue3.x 的通用 echart 组件.

## 扩展

> 整理了一些常用场景的图表创建模板 (Tips: 正在逐步开发, 带 todo 的是未完成的)

### 默认

> Tip: 原本计划将常用的柱状图, 饼图这些都去做一个预设方法. 方便使用. 但是, 目前遇到一个问题, 就是不同的使用场景, 图表的表示不同, 越基础
> 的图表, 想通过简单的模板创建处理起来越复杂, 导致最终使用效果甚至比原生的还要麻烦.
> 这里, 我留一个 [issue](https://github.com/halo951/vue-chart/issues/1), 感兴趣的朋友可以进来讨论下, 图表开发搞哪些预设合适.

-   [圆环进度图 - @vue-chart/create-process-serie](https://www.npmjs.com/package/@vue-chart/create-process-serie)
### 暗黑主题

-   [圆环进度图 (dark) - @vue-chart/create-dark-process-serie](https://www.npmjs.com/package/@vue-chart/create-dark-process-serie)

## 安装

> 注意:
>
> 1. 出于对不同项目使用 echart 版本不同考虑, 这里 echart 组件请按需安装, 但建议版本应 >= 4.\*
> 2. 由于 @vue/composition-api 限制, 当 vue 版本 <= 2.6.10 时,
>
>     - 需要额外安装 `@vue/composition-api`, 扩展对组合式 API 支持.
>     - 需要使用 `@vue/cli-service` 构建项目, 如需使用 vitejs, 请升级到 vue 2.7.\*

-   vue 2.7.\* or vue >= 3.0.0

```bash

yarn add echart @vue-chart/echart

```

-   vue version <= 2.6.10

```bash
yarn add echart @vue-chart/echart @vue/composition-api
```

## 快速上手

```vue
<!-- use in vue3 composition api -->
<script lang="ts" setup>
import { Chart, OmitedEChartsOption } from '@vue-chart/echart'
import { ref, Ref } from 'vue'
import { EChartsOption } from 'echart'

const chartOptions: EChartsOption = {}

// Tip: 使用 ref 引用 options 时, 需要使用 OmitedEChartsOption 类型
// 因为, Ref 对象的类型推断使用的 Ref<Unwrap<T>> 解包方式, 与 echarts `graphic` 的类型重载冲突, 会产生类型推断错误
const chartOptions2: Ref<OmitedEChartsOption> = ref({} as EChartsOption)

// 或者, 可以使用以下2种写法
// const chartOptions3 = ref({} as EChartsOption)
// const chartOptions4: Ref<EChartsOption> = ref({}) // 注: ref 参数对象不能指定类型 `EChartsOption`, 需要让编译器推断
</script>

<!-- use in vue2 -->
<script lang="ts" setup>
import { Chart } from '@vue-chart/echart'
import { Component, Vue } from 'vue-property-decorator'
import { EChartsOption } from 'echart'

@Component({ components: { Chart } })
export default class extends Vue {
    chartOptions: EChartsOption = {}
}
</script>

<!-- use in js -->
<script>
import { Chart } from '@vue-chart/echart'

export default {
    components: { Chart },
    data() {
        return {
            chartOptions: {}
        }
    }
}
</script>

<!-- 必填项: Chart 组件引入和 指定容器尺寸(主要是高度) -->
<template>
    <!-- usage component -->
    <Chart :options="chartOptions" />
</template>

<style>
.chart {
    height: 181px - 16px;
}
</style>
```

## chart 特性

-   增强, 针对同一时刻大量更新的 echarts 图表, 增加了队列修改能力
-   增强, 针对单一图表, 增加 `clear` 属性, 允许清除未完成动画, 并执行下次渲染
-   修复, 使用 `ref` 映射 options 变量时, 由于`Ref<Unwrap<T>>` 类型冲突导致的类型推断不一致问题

---
_Source: https://npm.io/package/@vue-chart/echart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._