# @ddgll/vue3-trend 中文文档

规范地址：https://npmcn.com/package/%40ddgll/vue3-trend/

版本：1\.0\.3
npm 元数据更新时间：2022-04-05T03:24:52.560Z
中文译文更新时间：2026-11-11T19:46:26.399Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ddgll/vue3-trend
原文对照：https://npmcn.com/package/%40ddgll/vue3-trend/?lang=original
项目主页：https://github.com/ddgll/vue3-trend#readme
源码仓库：https://github.com/ddgll/vue3-trend

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：61.1 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2022-03-09T16:18:43.792Z
- 最新版本发布：2022-03-09T17:01:03.939Z
- 近 30 天下载量：4078（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

从 url 或输入文件将图像转换为其它类型

## 安装

```sh
npm install @ddgll/vue3-trend
```

也可以使用：`pnpm add @ddgll/vue3-trend`、`yarn add @ddgll/vue3-trend`、`bun add @ddgll/vue3-trend`

## README

🔥🔥🔥

Vue.js v3 更强大更灵活的图表库 https://github.com/ddgll/vue3-trend

🔥🔥🔥

* * *

![Vue 3 Trend](https://cloud.githubusercontent.com/assets/7565692/23977197/9da0b77c-0a27-11e7-8f14-4d3845a524a0.png)  

# 第3个趋势

Vue.js v3 的简单而优雅的火花线

  
 [![npm](https://img.shields.io/npm/v/vue3trend.svg?style=flat-square)](https://www.npmjs.org/package/vue3trend)![vue](https://img.shields.io/static/v1?logo=vue.js&colorA=2c3e50&style=flat-square&message=3.0.0&label=vue)

## 安装

```bash
npm i @ddgll/vue3-trend -S

# or via yarn

yarn add @ddgll/vue3-trend
```

## 使用量

```js
// app.js

import Trend from "@ddgll/vue3-trend";

// ...
```

```html
<trend
  :data="[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]"
  :gradient="['#6fa8dc', '#42b983', '#2c3e50']"
  auto-draw
  smooth
>
</trend>
```

## 灵感

[无斜拉/反应趋势](https://github.com/unsplash/react-trend) - 简单而优雅的火花线

## 道具

-   数据 : 编号 QQ 对象 : Vue Trend接受的数据非常简单: 要图的y轴值阵列.
    -   `[120, 149, 193.4, 200, 92]` 或者说 `[{ value: 4 }, { value: 6 }, { value: 8 }]`
-   梯度 : 字符串颜色可以指定为任何 SVG 支持的格式( 名称、 rgb、 十六进制等)
    -   `['#0FF', '#F0F', '#FF0']`
-   梯度方向:字符串:上,下,左或右.
-   宽度: 数字: 为您的 SVG 设置明确的宽度 .
-   高度: 数字: 为您的 SVG 设置一个明确的高度 .
-   页: 数字: 如果您设置了一个非常大 `strokeWidth` 在你的线上,你可能会注意到 它被"被钉"到边缘.
-   平滑 : 布尔平滑 : 平滑允许将山峰“ 圆形” 取出, 使线条没有相通的边缘 .
-   半径: 数字: 当使用时 **平滑**,您不妨控制每个点周围的曲线量。 如果 `smooth` 没有设定为 `true`。 。 。 .
-   autoDraw:布尔:允许行在挂载上自行绘图。 设定为 `true` 启用并自定义 `autoDrawDuration` 财务报告和审定财务报表 `autoDrawEasing`。 。 。 .
-   自动拖动定义: 数字: 自动拖动动画应当跨行的时间, 以毫秒计 。 如果 `autoDraw` 没有设定为 `true`。 。 。 .
-   autoDrawEasing:字符串:用于自动Draw动画的放松功能. 接受内部任何过渡时间函数 [cSS 谱](http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp) 联合国. `linear`, (中文(简体) ), `ease`, (中文(简体) ), `ease-in`, (中文(简体) ), `cubic-bezier`(......) (中文(简体) ).
-   最大值: 数字: 指定最大值
-   分数: 指定分数, 如果您有多行的话, 这样做是有用的 .

#### SVG 道具

默认情况下,所有未被Vue Trend承认的属性都将被下放给SVG. 该行继承这些属性, 如果它本身没有覆盖它们的话 .

这意味着,除其他属性外,你可以使用:

-   `stroke` 以坚固的颜色盟誓,
-   `strokeWidth` 更改默认线厚度,
-   `strokeOpacity` 创建一个透明的线条,
-   `strokeLinecap`编号 :`strokeLinejoin` 控制你的线的边缘,
-   `strokeDasharray` 创建虚线,以及
-   `strokeDashoffset` 来控制破碎开始的地方.

## 发展

```sh
yarn
yarn dev
# open localhost:3000
```

## 开始

-   单位测试

## 贷项

-   [数字](https://github.com/ddgll)

此软件包基于 [清-魏-李/武-潮](https://github.com/QingWei-Li/vue-trend)执行情况

## 许可证

麻省理工学院

## 常见问题

### @ddgll/vue3-trend 是什么？

从 url 或输入文件将图像转换为其它类型

### 如何安装 @ddgll/vue3-trend？

在项目目录运行 npm install @ddgll/vue3-trend，或使用 pnpm add / yarn add / bun add。

### @ddgll/vue3-trend 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ddgll/vue3-trend 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ddgll/vue3-trend 可以商用吗？

@ddgll/vue3-trend 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ddgll/vue3-trend 的下载量有多少？

根据 npm 官方下载统计，@ddgll/vue3-trend 在 2026/10/12 – 2026/11/10 这 30 天内被下载 4,078 次，日均约 136 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ddgll/vue3-trend 还在维护吗？

最新版本 1\.0\.3 发布于 2022/03/10（4 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/03/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。