{"id":15509751,"url":"https://github.com/willin/vchart","last_synced_at":"2025-07-29T00:08:38.074Z","repository":{"id":24016789,"uuid":"100399859","full_name":"willin/vchart","owner":"willin","description":"Vue Chartist.js Component","archived":false,"fork":false,"pushed_at":"2022-12-10T20:29:49.000Z","size":217,"stargazers_count":7,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-21T13:36:35.402Z","etag":null,"topics":["chartist","component","vue"],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/willin.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-08-15T17:01:34.000Z","updated_at":"2023-02-06T03:02:15.000Z","dependencies_parsed_at":"2023-01-14T01:45:11.161Z","dependency_job_id":null,"html_url":"https://github.com/willin/vchart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/willin/vchart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willin%2Fvchart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willin%2Fvchart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willin%2Fvchart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willin%2Fvchart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willin","download_url":"https://codeload.github.com/willin/vchart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willin%2Fvchart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267093577,"owners_count":24034935,"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","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["chartist","component","vue"],"created_at":"2024-10-02T09:43:41.334Z","updated_at":"2025-07-29T00:08:38.026Z","avatar_url":"https://github.com/willin.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vchart\n\nVue [Chartist.js](https://gionkunz.github.io/chartist-js) Component\n\n[![github](https://img.shields.io/github/followers/willin.svg?style=social\u0026label=Follow)](https://github.com/willin) [![npm](https://img.shields.io/npm/v/vchart.svg)](https://npmjs.org/package/vchart) [![npm](https://img.shields.io/npm/dm/vchart.svg)](https://npmjs.org/package/vchart) [![npm](https://img.shields.io/npm/dt/vchart.svg)](https://npmjs.org/package/vchart) ![size](https://img.shields.io/github/size/willin/vchart/dist/vchart.min.js.svg) ![dep](https://img.shields.io/david/willin/vchart.svg)\n\n\u003e 浏览器版本: 3.78kb, GZip压缩后1.42kb\n\n## Usage / 使用说明\n\n### Installation / 安装\n\n```bash\nyarn add vchart\n# or\nnpm i -S vchart\n```\n\n### Props\n\n- __ratio__ - `String` \n class ratio of Chartist. see values on / 参考: [Chartist web site](https://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get)\n\n- __type__ - `String` (required / 必选) \nchart type, possible values: / 支持的类型有:\n    - `Line`\n    - `Bar`\n    - `Pie`\n\n- __data__ - `Object` data object like this:\n```js\n// 示例:\nconst data = {\n    labels: [\"A\", \"B\", \"C\"],\n    series:[[1, 3, 2], [4, 6, 5]]\n}\n```\n\n- __options__ - `Object`\noptions object, see defaultOptions on / 默认配置参考 [API Documentation / API 文档](https://gionkunz.github.io/chartist-js/api-documentation.html)\n\n- __empty__ - `String` \nmessage when no data / 无数据时显示的文字消息\n\n- __event-handlers__ - `Array` \na special array to use `chart.on(event, function)`\n```javascript\n// 处理 `chart.on(event, function)` 事件\nconst eventHandlers = [{\n    event: 'draw',\n    fn() {\n        // animation / 动画\n    }\n}, {\n    // an other event hander / 另一个事件处理器\n}]\n```\n\n- __responsive-options__ - `Array`\nobject for responsive options / 响应式参数对象\n\n\n## Example / 示例\n\nDemo / 在线示例: \u003chttps://vchart.js.cool/\u003e\n\n### Single File Components / 单文件组件中使用\n\n```vue\n\u003ctemplate\u003e\n\u003cvchart\n    ratio=\"ct-major-second\"\n    :type=\"type\"\n    :data=\"data\"\n    :options=\"options\" \u003e\n\u003c/vchart\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport vchart from 'vchart';\n\nexports default {\n  components: {\n    vchart\n  },\n  data() {\n    return {\n       data: {\n            labels: [\"周一\", \"周二\", \"周三\", \"周四\", \"周五\"],\n            series: [[4, 3.8, 3, 5, 4.1]]\n        },\n        type: 'Line',\n        options: {\n            fullWidth: true,\n            lineSmooth: false\n        }\n    };\n  }\n}\n\u003c/script\u003e\n```\n\n### Browser / 浏览器中使用\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003c!-- Import CSS / 引用CSS --\u003e\n  \u003clink rel=\"stylesheet\" href=\"//unpkg.com/chartist/dist/chartist.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003c!-- Example / 示例 --\u003e\n\u003cdiv id=\"app\"\u003e\n  \u003cvchart\n      ratio=\"ct-major-second\"\n      :type=\"type\"\n      :data=\"chartData\"\n      :options=\"options\" \u003e\n  \u003c/vchart\u003e\n\u003c/div\u003e\n\n\u003c!-- Import Scripts / 引用JS资源 --\u003e\n\u003cscript src=\"//unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"//unpkg.com/chartist\"\u003e\u003c/script\u003e\n\u003cscript src=\"//unpkg.com/vchart\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  new Vue({\n    el: '#app',\n    components: {\n        vchart\n    },\n    data() {\n        return {\n            data: {\n                labels: [\"周一\", \"周二\", \"周三\", \"周四\", \"周五\"],\n                series: [[4, 3.8, 3, 5, 4.1]]\n            },\n            type: 'Line',\n            options: {\n                fullWidth: true,\n                lineSmooth: false\n            }\n        }\n    }\n})\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Animation / 动画\n\nDemo / 演示: https://jsfiddle.net/willin/esvw0q91/\n\n常用的三种动画:\n\n- `dashoffset` 跑马灯\n- `bouncing-stroke` 弹簧\n- `exploding-stroke` 爆炸\n\n```css\n* {\n  transform-origin: 0px 0px 0px;\n}\n.ct-line {\n  stroke-dasharray: 5px;\n  /* change animation name */\n  animation: dashoffset 1s linear infinite;\n}\n\n@keyframes dashoffset  {\n  0% {\n    stroke-dashoffset: 0px;\n  }\n\n  100% {\n    stroke-dashoffset: -20px;\n  }\n}\n\n @keyframes bouncing-stroke  {\n  0% {\n    stroke-width: 5px;\n  }\n\n  50% {\n    stroke-width: 10px;\n  }\n\n  100% {\n    stroke-width: 5px;\n  }\n}\n\n@keyframes exploding-stroke  {\n  0% {\n    stroke-width: 2px;\n    opacity: 1;\n  }\n\n  100% {\n    stroke-width: 20px;\n    opacity: 0;\n  }\n}\n```\n\n## License\n\nMIT\n\n通过支付宝捐赠：\n\n![qr](https://cloud.githubusercontent.com/assets/1890238/15489630/fccbb9cc-2193-11e6-9fed-b93c59d6ef37.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillin%2Fvchart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillin%2Fvchart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillin%2Fvchart/lists"}