{"id":13535831,"url":"https://github.com/bbonnin/vue-morris","last_synced_at":"2025-06-14T09:38:17.998Z","repository":{"id":15546530,"uuid":"78194012","full_name":"bbonnin/vue-morris","owner":"bbonnin","description":"VueJS component wrapping Morris.js","archived":false,"fork":false,"pushed_at":"2022-12-10T16:40:11.000Z","size":1858,"stargazers_count":237,"open_issues_count":23,"forks_count":36,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-06-04T06:28:06.532Z","etag":null,"topics":["chart","hacktoberfest","javascript","vue","vuejs"],"latest_commit_sha":null,"homepage":"","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/bbonnin.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-01-06T09:38:27.000Z","updated_at":"2024-11-10T14:09:32.000Z","dependencies_parsed_at":"2023-01-13T18:28:48.556Z","dependency_job_id":null,"html_url":"https://github.com/bbonnin/vue-morris","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bbonnin/vue-morris","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbonnin%2Fvue-morris","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbonnin%2Fvue-morris/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbonnin%2Fvue-morris/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbonnin%2Fvue-morris/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bbonnin","download_url":"https://codeload.github.com/bbonnin/vue-morris/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbonnin%2Fvue-morris/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259796304,"owners_count":22912688,"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":["chart","hacktoberfest","javascript","vue","vuejs"],"created_at":"2024-08-01T09:00:29.476Z","updated_at":"2025-06-14T09:38:17.969Z","avatar_url":"https://github.com/bbonnin.png","language":"JavaScript","funding_links":[],"categories":["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":["Component Collections","图表","UI Components","Charts"],"readme":"# vue-morris\n\n\u003e Vue.js components wrapping Morris.js lib\n\u003e \n\u003e See http://morrisjs.github.io/morris.js/ for documentation\n\n\u003e Depends on Vue.js v2.1.0+\n \n## Install\n\nUse npm\n\n```bash\nnpm install vue-morris --save\n```\n\nDo not forget to declare jQuery in your `package.json` and, if you are using Webpack, you should have something like that in your `webpack.config.js` \n\n```javascript\nresolve: {\n    alias: {\n      'vue$': 'vue/dist/vue.common.js',\n      'jquery': 'jquery/src/jquery.js'\n    }\n  },\n```\n\n## Examples\nFor a complete example, see files in `examples` directory or the project: https://github.com/bbonnin/vue-morris-example.\n\n* Import the component\n\n```javascript\n// Do not forget to import raphael\nimport Raphael from 'raphael/raphael'\nglobal.Raphael = Raphael\n\nimport Vue from 'vue'\nimport { DonutChart } from 'vue-morris'\n\nnew Vue({\n  el: '#app',\n\n  data: {\n    donutData: [\n      { label: 'Red', value: 300 },\n      { label: 'Blue', value: 50 },\n      { label: 'Yellow', value: 100 }\n    ],\n\n    components: {\n    DonutChart, BarChart, LineChart, AreaChart\n  }\n})\n```\n\n* Use the component in html\n```html\n\u003cdonut-chart \n  id=\"donut\" \n  :data=\"donutData\" \n  colors='[ \"#FF6384\", \"#36A2EB\", \"#FFCE56\" ]' \n  resize=\"true\"\u003e\n\u003c/donut-chart\u003e\n```\n\n* Bar chart\n![bar chart](img/barchart.png)\n\n* Line chart\n![line chart](img/linechart.png)\n\n* Area chart\n![area chart](img/areachart.png)\n\n* Donut chart\n![donut chart](img/donutchart.png)\n\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbonnin%2Fvue-morris","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbbonnin%2Fvue-morris","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbonnin%2Fvue-morris/lists"}