{"id":20414473,"url":"https://github.com/x-extends/vxe-table-plugin-charts","last_synced_at":"2025-04-12T16:44:33.865Z","repository":{"id":65412488,"uuid":"204705270","full_name":"x-extends/vxe-table-plugin-charts","owner":"x-extends","description":"📊 基于 vxe-table 的图表渲染插件","archived":false,"fork":false,"pushed_at":"2025-03-12T08:44:30.000Z","size":211,"stargazers_count":8,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T07:02:25.172Z","etag":null,"topics":["vxe-table"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/x-extends.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-27T13:06:34.000Z","updated_at":"2024-12-03T13:27:50.000Z","dependencies_parsed_at":"2024-06-19T02:43:23.058Z","dependency_job_id":"062330c4-7298-411d-b73f-b30f452189b2","html_url":"https://github.com/x-extends/vxe-table-plugin-charts","commit_stats":{"total_commits":98,"total_committers":2,"mean_commits":49.0,"dds":"0.030612244897959218","last_synced_commit":"cfd1433412d6916379fd189182d91f9f801080ba"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-extends%2Fvxe-table-plugin-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-extends%2Fvxe-table-plugin-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-extends%2Fvxe-table-plugin-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/x-extends%2Fvxe-table-plugin-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/x-extends","download_url":"https://codeload.github.com/x-extends/vxe-table-plugin-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248600213,"owners_count":21131445,"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":["vxe-table"],"created_at":"2024-11-15T06:10:16.725Z","updated_at":"2025-04-12T16:44:33.842Z","avatar_url":"https://github.com/x-extends.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vxe-table-plugin-charts\n\n[![gitee star](https://gitee.com/x-extends/vxe-table-plugin-charts/badge/star.svg?theme=dark)](https://gitee.com/x-extends/vxe-table-plugin-charts/stargazers)\n[![npm version](https://img.shields.io/npm/v/vxe-table-plugin-charts.svg?style=flat-square)](https://www.npmjs.com/package/vxe-table-plugin-charts)\n[![npm downloads](https://img.shields.io/npm/dm/vxe-table-plugin-charts.svg?style=flat-square)](http://npm-stat.com/charts.html?package=vxe-table-plugin-charts)\n[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)\n\n基于 [vxe-table](https://www.npmjs.com/package/vxe-table) 的图表渲染插件（依赖区域选取功能），基于 [echarts](https://github.com/apache/incubator-echarts) 实现\n\n## Compatibility\n\n对应 vxe-table v4 版本  \n\n## Installing\n\n```shell\nnpm install vxe-table@next vxe-table-plugin-charts@next echarts\n```\n\n```javascript\n// ...\nimport VXETable from 'vxe-table'\nimport echarts from 'echarts'\nimport VXETablePluginCharts from 'vxe-table-plugin-charts'\nimport 'vxe-table-plugin-charts/dist/style.css'\n// ...\n\n// 方式1：NPM 安装，注入 echarts 对象\nVXETable.use(VXETablePluginCharts, {\n  echarts\n})\n\n// 方式2：CDN 安装，只要确保 window.echarts 存在即可\n// VXETable.use(VXETablePluginCharts)\n```\n\n## Import on demand\n\n```javascript\n// ...\nimport echarts from 'echarts/lib/echarts'\nimport 'echarts/lib/chart/bar'\nimport 'echarts/lib/chart/pie'\nimport 'echarts/lib/chart/line'\nimport 'echarts/lib/component/grid'\nimport 'echarts/lib/component/tooltip'\nimport 'echarts/lib/component/legend'\nimport 'echarts/lib/component/legendScroll'\n\nimport VXETablePluginCharts from 'vxe-table-plugin-charts'\nimport 'vxe-table-plugin-charts/dist/style.css'\n// ...\n\nVXETable.use(VXETablePluginCharts, {\n  echarts\n})\n```\n\n## API\n\n### Context menu codes\n\n| code 编码 | describe 描述 | params 参数 |\n|------|------|------|\n| CHART_BAR_X_AXIS | 横向柱状图（如果设置了类别 category 则 series 至少一列，否则 series 至少两列） | {category?: field} |\n| CHART_BAR_Y_AXIS  | 纵向柱状图（如果设置了类别 category 则 series 至少一列，否则 series 至少两列） | {category?: field} |\n| CHART_LINE  | 折线图（如果设置了类别 category 则 series 至少一列，否则 series 至少两列） | {category?: field} |\n| CHART_PIE  | 饼图（如果设置了类别 category 则 series 只需一列，否则 series 需要两列） | {category?: field} |\n\n## Demo\n\n```html\n\u003cvxe-table\n  height=\"500\"\n  :data=\"tableData\"\n  :mouse-config=\"{ area: true }\"\n  :menu-config=\"menuConfig\"\n  :edit-config=\"{trigger: 'dblclick', mode: 'cell'}\"\u003e\n  \u003cvxe-column type=\"seq\" width=\"60\"\u003e\u003c/vxe-column\u003e\n  \u003cvxe-column field=\"nickname\" title=\"Nickname\" :edit-render=\"{name: 'input'}\"\u003e\u003c/vxe-column\u003e\n  \u003cvxe-column field=\"sex\" title=\"sex\" :edit-render=\"{name: 'input'}\"\u003e\u003c/vxe-column\u003e\n  \u003cvxe-column field=\"age\" title=\"Age\" :edit-render=\"{name: 'input'}\"\u003e\u003c/vxe-column\u003e\n  \u003cvxe-column field=\"rate\" title=\"Rate\" :edit-render=\"{name: 'input'}\"\u003e\u003c/vxe-column\u003e\n\u003c/vxe-table\u003e\n```\n\n```javascript\nexport default {\n  data () {\n    return {\n      tableData: [\n        { id: 100, name: 'Test1', nickname: 'Nickname1', sex: '1', age: 26, rate: '3' },\n        { id: 100, name: 'Test2', nickname: 'Nickname2', sex: '0', age: 28, rate: '5' }\n      ],\n      menuConfig: {\n        body: {\n          options: [\n            { code: 'CHART_LINE', name: '折线图' }\n          ]\n        }\n      }\n    }\n  }\n}\n```\n\n## License\n\n[MIT](LICENSE) © 2019-present, Xu Liangzhan\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fx-extends%2Fvxe-table-plugin-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fx-extends%2Fvxe-table-plugin-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fx-extends%2Fvxe-table-plugin-charts/lists"}