网页制作网站的大作业,凡客系统,跑纸活做网站,推广引流客源来由
在github发现个好看易用的vue趋势线组件#xff0c;特此记录。
效果 趋势图生成后效果如上#xff0c;线条为渐变色#xff0c;可设置是否平滑。具体线条走势#xff0c;根据数据动态生成。
使用
安装
npm i vuetrend -S
引入
import Vue from vue特此记录。
效果 趋势图生成后效果如上线条为渐变色可设置是否平滑。具体线条走势根据数据动态生成。
使用
安装
npm i vuetrend -S
引入
import Vue from vue
import Trend from vuetrendVue.use(Trend)
使用
trend:data[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]:gradient[#6fa8dc, #42b983, #2c3e50]auto-drawsmooth/trend
其他可配置项
NameTypeDefaultDescriptionExampledataNumber|ObjectundefinedThe 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 }]gradientString[#000]Colour can be specified as any SVG-supported format (named, rgb, hex, etc).[#0FF, #F0F, #FF0]gradientDirectionStringtopTop, Bottom, Left or Right.widthNumberautoSet an explicit width for your SVG.-heightNumberautoSet an explicit height for your SVG.-paddingNumber8If you set a very large strokeWidth on your line, you may notice that it gets cropped towards the edges.-smoothBooleanfalseSmooth allows the peaks to be rounded out so that the line has no jagged edges.-radiusNumber10When using smoothing, you may wish to control the amount of curve around each point. This prop has no effect if smooth isnt set to true.-autoDrawBooleanfalseAllow the line to draw itself on mount. Set to true to enable, and customize using autoDrawDuration and autoDrawEasing.-autoDrawDurationNumber2000The amount of time, in milliseconds, that the autoDraw animation should span. This prop has no effect if autoDraw isnt set to true.-autoDrawEasingStringeaseThe easing function to use for the autoDraw animation. Accepts any transition timing function within the CSS spec (eg. linear, ease, ease-in, cubic-bezier...).-maxNumber-InfinitySpecify max value-minNumberInfinitySpecify min value, This is useful if you have multiple lines. See #8-
组件来自于GitHub - QingWei-Li/vue-trend: Simple, elegant spark lines for Vue.js
