🔥🔥🔥
Vue.js v3 更强大更灵活的图表库 https://github.com/ddgll/vue3-trend
🔥🔥🔥
第3个趋势
Vue.js v3 的简单而优雅的火花线
安装
npm i @ddgll/vue3-trend -S
# or via yarn
yarn add @ddgll/vue3-trend
使用量
// app.js
import Trend from "@ddgll/vue3-trend";
// ...
<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>
灵感
无斜拉/反应趋势 - 简单而优雅的火花线
道具
- 数据 : 编号 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 谱 联合国.
linear, (中文(简体) ),ease, (中文(简体) ),ease-in, (中文(简体) ),cubic-bezier(......) (中文(简体) ). - 最大值: 数字: 指定最大值
- 分数: 指定分数, 如果您有多行的话, 这样做是有用的 .
SVG 道具
默认情况下,所有未被Vue Trend承认的属性都将被下放给SVG. 该行继承这些属性, 如果它本身没有覆盖它们的话 .
这意味着,除其他属性外,你可以使用:
stroke以坚固的颜色盟誓,strokeWidth更改默认线厚度,strokeOpacity创建一个透明的线条,strokeLinecap编号 :strokeLinejoin控制你的线的边缘,strokeDasharray创建虚线,以及strokeDashoffset来控制破碎开始的地方.
发展
yarn
yarn dev
# open localhost:3000
开始
- 单位测试
贷项
此软件包基于 清-魏-李/武-潮执行情况
许可证
麻省理工学院