{"id":19014253,"url":"https://github.com/spritejs/cat-charts-vue","last_synced_at":"2025-10-20T02:42:02.679Z","repository":{"id":39555707,"uuid":"176224082","full_name":"spritejs/cat-charts-vue","owner":"spritejs","description":"A visulization library based on spritejs , qcharts and Vue","archived":false,"fork":false,"pushed_at":"2022-12-09T16:12:26.000Z","size":3905,"stargazers_count":16,"open_issues_count":30,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-23T00:42:52.104Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.spritejs.com/cat-charts-vue/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spritejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-18T07:08:47.000Z","updated_at":"2024-10-25T00:48:53.000Z","dependencies_parsed_at":"2022-09-16T23:41:59.939Z","dependency_job_id":null,"html_url":"https://github.com/spritejs/cat-charts-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fcat-charts-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fcat-charts-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fcat-charts-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fcat-charts-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spritejs","download_url":"https://codeload.github.com/spritejs/cat-charts-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250348892,"owners_count":21415907,"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":[],"created_at":"2024-11-08T19:28:35.525Z","updated_at":"2025-10-20T02:41:57.623Z","avatar_url":"https://github.com/spritejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 快速开始\n\n### 特点\n\nCatChartsVue 是一个基于 \u003ca target=\"_blank\" href=\"https://www.spritejs.com\"\u003espritejs\u003c/a\u003e , \u003ca  target=\"_blank\" href=\"https://www.spritejs.com/q-charts/\"\u003eQCharts\u003c/a\u003e 封装的 \u003ca target=\"_blank\" href=\"https://vuejs.org/\"\u003eVue\u003c/a\u003e 图表库，可以让用户以组件的形式组合出各种图表。 \u003ca target=\"_blank\" href=\"https://www.spritejs.com/cat-charts-vue/\"\u003e→ 详细文档\u003c/a\u003e\n\n### 如何使用\n\n1.通过 npm 获取 CatChartsVue，我们提供了 CatChartsVue npm 包，通过下面的命令即可完成安装，Demo：\u003ca target=\"_blank\" href=\"https://github.com/longwind91/cat-charts-vue-demo\"\u003eQuickstart\u003c/a\u003e\n\n```shell\nnpm install cat-charts-vue --save\n```\n\n```javascript\n// 通过模块引入的方式使用CatCharts\nimport * as CatChartsVue from 'cat-charts-vue'\nVue.use(CatChartsVue)\n```\n\n2.通过 cdn 获取 CatCharts，通过下面的标签引入 CatCharts，因为 CatCharts 依赖 Vue 与 spritejs，所以需要先引入这两个，Demo：\u003ca target=\"_blank\" href=\"https://github.com/yaotaiyang/cat-charts-vue-demo\"\u003eQuickstart\u003c/a\u003e\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/spritejs/dist/spritejs.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@qcharts/core@0.2/dist/index.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/cat-charts-vue/lib/index.js\"\u003e\u003c/script\u003e\n```\n\n```javascript\n// 通过cdn的方式使用CatCharts\nVue.use(CatChartsVue)\n```\n\n### 开始绘制图表\n\n完成一个 CatChartsVue 的组件或者页面\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"chart\"\u003e\n    \u003cs-chart :data=\"lineData\" :data-fields=\"dataFields\" :size=\"[700,600]\"\u003e\n      \u003cs-line :attrs=\"attrs\" /\u003e\n      \u003cs-axis :attrs=\"{orient:'left'}\" /\u003e\n      \u003cs-axis :attrs=\"{orient:'bottom'}\" /\u003e\n      \u003cs-tooltip :attrs=\"tooltipAttrs\" /\u003e\n    \u003c/s-chart\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n  export default {\n    data: function() {\n      return {\n        attrs: {\n          pos: ['10%', '10%'],\n          size: ['80%', '80%']\n        },\n        lineData: [\n          { date: '05-01', catgory: '图例一', sales: 15.2 },\n          { date: '05-02', catgory: '图例一', sales: 39.2 },\n          { date: '05-03', catgory: '图例一', sales: 31.2 },\n          { date: '05-04', catgory: '图例一', sales: 65.2 },\n          { date: '05-05', catgory: '图例一', sales: 55.2 },\n          { date: '05-06', catgory: '图例一', sales: 75.2 },\n          { date: '05-07', catgory: '图例一', sales: 95.2 },\n          { date: '05-08', catgory: '图例一', sales: 65.2 }\n        ],\n        tooltipAttrs: {\n          formatter: data =\u003e `${data.date}-${data.catgory}-${data.sales}`\n        },\n        dataFields: {\n          row: 'catgory',\n          value: 'sales',\n          text: 'date'\n        }\n      }\n    }\n  }\n\u003c/script\u003e\n\u003cstyle\u003e\n  .chart {\n    height: 600px;\n  }\n\u003c/style\u003e\n```\n\n一张折线图就绘制成功\n\n\u003cimg src=\"https://p4.ssl.qhimg.com/d/inn/717a6a22789a/base-line.png\" width=\"400\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fcat-charts-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspritejs%2Fcat-charts-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fcat-charts-vue/lists"}