【vue】简洁优雅的火花线、趋势线

来由

在github发现个好看易用的vue趋势线组件,特此记录。

效果

趋势图生成后效果如上,线条为渐变色,可设置是否平滑。具体线条走势,根据数据动态生成。

使用

安装

javascript 复制代码
npm i vuetrend -S

引入

javascript 复制代码
import Vue from "vue"
import Trend from "vuetrend"

Vue.use(Trend)

使用

javascript 复制代码
<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>

其他可配置项

Name Type Default Description Example
data Number|Object undefined The data accepted by Vue Trend is incredibly simple: An array of y-axis values to graph. [120, 149, 193.4, 200, 92] or [{ value: 4 }, { value: 6 }, { value: 8 }]
gradient String ['#000'] Colour can be specified as any SVG-supported format (named, rgb, hex, etc). ['#0FF', '#F0F', '#FF0']
gradientDirection String top Top, Bottom, Left or Right.
width Number auto Set an explicit width for your SVG. -
height Number auto Set an explicit height for your SVG. -
padding Number 8 If you set a very large strokeWidth on your line, you may notice that it gets "cropped" towards the edges. -
smooth Boolean false Smooth allows the peaks to be 'rounded' out so that the line has no jagged edges. -
radius Number 10 When using smoothing , you may wish to control the amount of curve around each point. This prop has no effect if smooth isn't set to true. -
autoDraw Boolean false Allow the line to draw itself on mount. Set to true to enable, and customize using autoDrawDuration and autoDrawEasing. -
autoDrawDuration Number 2000 The amount of time, in milliseconds, that the autoDraw animation should span. This prop has no effect if autoDraw isn't set to true. -
autoDrawEasing String ease The easing function to use for the autoDraw animation. Accepts any transition timing function within the CSS spec (eg. linear, ease, ease-in, cubic-bezier...). -
max Number -Infinity Specify max value -
min Number Infinity Specify min value, This is useful if you have multiple lines. See #8 -

组件来自于:GitHub - QingWei-Li/vue-trend: 🌈 Simple, elegant spark lines for Vue.js

相关推荐
全栈软件开发18 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii19 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack19 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好19 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O19 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
一点一木20 小时前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api
还是大剑师兰特20 小时前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
可触的未来,发芽的智生20 小时前
触摸未来2025-10-25:蓝图绘制
javascript·python·神经网络·程序人生·自然语言处理
用户479492835691520 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
__WanG20 小时前
如何编写标准StatefulWidget页面
前端·flutter