{"id":13530765,"url":"https://github.com/QingWei-Li/vue-trend","last_synced_at":"2025-04-01T19:30:36.352Z","repository":{"id":44111143,"uuid":"84595218","full_name":"QingWei-Li/vue-trend","owner":"QingWei-Li","description":"🌈 Simple, elegant spark lines for Vue.js","archived":false,"fork":false,"pushed_at":"2022-12-06T23:16:14.000Z","size":1593,"stargazers_count":1191,"open_issues_count":25,"forks_count":78,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-03-23T23:14:58.195Z","etag":null,"topics":["trend","trending","vue","vue-components"],"latest_commit_sha":null,"homepage":"https://cinwell.com/vue-trend/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QingWei-Li.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-10T19:46:48.000Z","updated_at":"2025-03-19T08:12:39.000Z","dependencies_parsed_at":"2023-01-24T12:17:50.638Z","dependency_job_id":null,"html_url":"https://github.com/QingWei-Li/vue-trend","commit_stats":null,"previous_names":["qingwei-li/vue-trend-component"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvue-trend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvue-trend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvue-trend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvue-trend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QingWei-Li","download_url":"https://codeload.github.com/QingWei-Li/vue-trend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246395595,"owners_count":20770243,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["trend","trending","vue","vue-components"],"created_at":"2024-08-01T07:00:54.898Z","updated_at":"2025-04-01T19:30:35.778Z","avatar_url":"https://github.com/QingWei-Li.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized","UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Uncategorized","Libraries \u0026 Plugins","图表","UI Components","Charts"],"readme":"\u003cp align=center\u003e🔥🔥🔥\u003c/p\u003e\n\u003cp align=center\u003eMore powerful, more flexible chart library for Vue.js 👉 https://github.com/QingWei-Li/laue\u003c/p\u003e\n\u003cp align=center\u003e🔥🔥🔥\u003c/p\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://cloud.githubusercontent.com/assets/7565692/23977197/9da0b77c-0a27-11e7-8f14-4d3845a524a0.png\" width=\"500\" alt=\"Vue Trend\"\u003e\n  \u003cbr\u003e\n  \u003ch1\u003eVue Trend\u003c/h1\u003e\n  \u003cp\u003e🌈 Simple, elegant spark lines for Vue.js\u003c/p\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://www.npmjs.org/package/vuetrend\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vuetrend.svg?style=flat-square\" alt=\"npm\"\u003e\u003c/a\u003e\n  \u003c!-- \u003ca href=\"https://travis-ci.org/qingwei-li/vue-trend\"\u003e\u003cimg src=\"https://img.shields.io/travis/qingwei-li/vue-trend/master.svg?style=flat-square\" alt=\"travis\"\u003e\u003c/a\u003e --\u003e\n  \u003cimg src=\"https://img.shields.io/badge/vue-^2.2-4fc08d.svg?colorA=2c3e50\u0026style=flat-square\" alt=\"vue\"\u003e\n\n  \u003c!-- \u003ca href=\"https://codecov.io/github/qingwei-li/vue-trend\"\u003e\u003cimg src=\"https://img.shields.io/codecov/c/github/qingwei-li/vue-trend.svg\" alt=\"travis\"\u003e\u003c/a\u003e --\u003e\n\n\u003c/div\u003e\n\n## Installation\n\n```shell\nnpm i vuetrend -S\n```\n\n## Usage\n\n```js\nimport Vue from \"vue\"\nimport Trend from \"vuetrend\"\n\nVue.use(Trend)\n```\n\n_vue template_\n\n```html\n\u003ctrend\n  :data=\"[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]\"\n  :gradient=\"['#6fa8dc', '#42b983', '#2c3e50']\"\n  auto-draw\n  smooth\n\u003e\n\u003c/trend\u003e\n```\n\n[Live Demo](https://jsfiddle.net/nyh18bLq/)\n\n## Inspired\n\n[unsplash/react-trend](https://github.com/unsplash/react-trend) - 📈 Simple, elegant spark lines\n\n## Props\n\n| Name              | Type           | Default     | Description                                                                                                                                                                                                                                       | Example                                                                      |\n| ----------------- | -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |\n| 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 }]` |\n| gradient          | String         | `['#000']`  | Colour can be specified as any SVG-supported format (named, rgb, hex, etc).                                                                                                                                                                       | `['#0FF', '#F0F', '#FF0']`                                                   | - |\n| gradientDirection | String         | `top`       | Top, Bottom, Left or Right.                                                                                                                                                                                                                       |                                                                              | - |\n| width             | Number         | auto        | Set an explicit width for your SVG.                                                                                                                                                                                                               | -                                                                            |\n| height            | Number         | auto        | Set an explicit height for your SVG.                                                                                                                                                                                                              | -                                                                            |\n| padding           | Number         | `8`         | If you set a very large `strokeWidth` on your line, you may notice that it gets \"cropped\" towards the edges.                                                                                                                                      | -                                                                            |\n| smooth            | Boolean        | `false`     | Smooth allows the peaks to be 'rounded' out so that the line has no jagged edges.                                                                                                                                                                 | -                                                                            |\n| 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`.                                                                                                 | -                                                                            |\n| autoDraw          | Boolean        | `false`     | Allow the line to draw itself on mount. Set to `true` to enable, and customize using `autoDrawDuration` and `autoDrawEasing`.                                                                                                                     | -                                                                            |\n| 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`.                                                                                                          | -                                                                            |\n| autoDrawEasing    | String         | `ease`      | The easing function to use for the autoDraw animation. Accepts any transition timing function within [the CSS spec](http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp) (eg. `linear`, `ease`, `ease-in`, `cubic-bezier`...). | -                                                                            |\n| max               | Number         | `-Infinity` | Specify max value                                                                                                                                                                                                                                 | -                                                                            |\n| min               | Number         | `Infinity`  | Specify min value, This is useful if you have multiple lines. See [#8](https://github.com/QingWei-Li/vue-trend/issues/8)                                                                                                                          | -                                                                            |\n\n#### SVG Props\n\nBy default, all properties not recognized by Vue Trend will be delegated to the SVG. The line inherits these properties if none of its own override them.\n\nThis means that, among other properties, you can use:\n\n- `stroke` to set a solid colour,\n- `strokeWidth` to change the default line thickness,\n- `strokeOpacity` to create a transparent line,\n- `strokeLinecap`/`strokeLinejoin` to control the edges of your line,\n- `strokeDasharray` to create a dashed line, and\n- `strokeDashoffset` to control where the dashes start.\n\n## Development\n\n```sh\nyarn\nyarn dev\n# open localhost:4000\n```\n\n## TODO\n\n- Unit test\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FQingWei-Li%2Fvue-trend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FQingWei-Li%2Fvue-trend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FQingWei-Li%2Fvue-trend/lists"}