{"id":24369901,"url":"https://github.com/json-drived-configurable-platform/data-vis-iview","last_synced_at":"2026-03-08T05:32:05.394Z","repository":{"id":39529002,"uuid":"189161885","full_name":"JSON-Drived-Configurable-Platform/data-vis-iview","owner":"JSON-Drived-Configurable-Platform","description":"A charts generator with json schema based on iview ui","archived":false,"fork":false,"pushed_at":"2023-01-06T01:53:33.000Z","size":12904,"stargazers_count":4,"open_issues_count":31,"forks_count":5,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-07-18T01:25:11.336Z","etag":null,"topics":["charts-generator","iview-ui","json-schema","json-to-chart"],"latest_commit_sha":null,"homepage":"https://json-drived-configurable-platform.github.io/data-vis-iview/#/home","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/JSON-Drived-Configurable-Platform.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-05-29T06:15:21.000Z","updated_at":"2021-02-01T04:50:35.000Z","dependencies_parsed_at":"2023-02-05T02:16:22.551Z","dependency_job_id":null,"html_url":"https://github.com/JSON-Drived-Configurable-Platform/data-vis-iview","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JSON-Drived-Configurable-Platform/data-vis-iview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSON-Drived-Configurable-Platform%2Fdata-vis-iview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSON-Drived-Configurable-Platform%2Fdata-vis-iview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSON-Drived-Configurable-Platform%2Fdata-vis-iview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSON-Drived-Configurable-Platform%2Fdata-vis-iview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JSON-Drived-Configurable-Platform","download_url":"https://codeload.github.com/JSON-Drived-Configurable-Platform/data-vis-iview/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSON-Drived-Configurable-Platform%2Fdata-vis-iview/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266287824,"owners_count":23905461,"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":["charts-generator","iview-ui","json-schema","json-to-chart"],"created_at":"2025-01-19T04:10:53.255Z","updated_at":"2026-03-08T05:32:05.328Z","avatar_url":"https://github.com/JSON-Drived-Configurable-Platform.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dataVisIView\n\n## Description\n\nA charts generator with json schema based on [iview ui](https://www.iviewui.com/).\n\n- [x] Table\n- [x] Lines\n- [x] Bar\n- [x] Pie\n- [x] Retain table\n- [x] Card\n- [x] Funnel\n- [ ] Map\n- [ ] LiquidFill\n- [ ] Custom\n\n## Quick Exmaple\n\nThis is a part of screenshot of the [website](https://github.com/BingBlog/form-generator-iview/tree/master/website/page/home).\n\n![project mind mapping](./website.png)\n\nYou can get a result like this simply by:\n\n```javascript\n\u003ctemplate\u003e\n    \u003cDataVis :config=\"config\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport DataVis from 'data-vis-iview';\nconst config = {\n    title: '整体趋势',\n    rows: [\n        [\n            {\n                conditions: [\n                    {\n                        key: '100060',\n                        type: 'DatePicker',\n                        subType: 'date',\n                        model: 'date',\n                        placeholder: '',\n                        required: true,\n                        defaultValue: '2019-01-01'\n                    }\n                ],\n                chartGroup: [\n                    {\n                        'tip': {\n                            title: '标题1',\n                            content: '内容1'\n                        },\n                        'label':'地域分布',\n                        'type':'pie',\n                        'data': [\n                            {value:335, name:'直接访问'},\n                            {value:310, name:'邮件营销'},\n                            {value:274, name:'联盟广告'},\n                            {value:235, name:'视频广告'},\n                            {value:400, name:'搜索引擎'}\n                        ]\n                    },\n                    {\n                        'label':'新增用户',\n                        'type':'bar',\n                        'columns': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n                        'data': [120, 200, 150, 80, 70, 110, 130]\n                    }\n                ]\n            },\n            {\n                conditions: [\n                    {\n                        key: '100061',\n                        type: 'DatePicker',\n                        subType: 'date',\n                        model: 'date',\n                        placeholder: '',\n                        required: true,\n                        defaultValue: '2019-01-01'\n                    }\n                ],\n                chartGroup: [\n                    {\n                        'label': '趋势图',\n                        'type': 'line',\n                        'columns': [\n                            ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11'],\n                            ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']\n                        ],\n                        'data': [\n                            {\n                                name:'2015 邮件营销',\n                                groupName: '邮件营销',\n                                xAxisIndex: 0,\n                                data:[120, 132, 101, 134, 90, 230, 210, 101, 134]\n                            },\n                            {\n                                name:'2016 邮件营销',\n                                groupName: '邮件营销',\n                                xAxisIndex: 1,\n                                data:[150, 122, 121, 164, 100, 200, 200, 141, 134, 90, 230, 210]\n                            },\n                            {\n                                name:'2015 联盟广告',\n                                groupName: '联盟广告',\n                                xAxisIndex: 0,\n                                data:[220, 182, 191, 234, 290, 330, 310, 101, 134, 90, 230]\n                            },\n                            {\n                                name:'2016 联盟广告',\n                                groupName: '联盟广告',\n                                xAxisIndex: 1,\n                                data:[20, 82, 91, 34, 90, 30, 10, 1, 34, 90, 30, 10]\n                            }\n                        ]\n                    },\n                    {\n                        'tip': {\n                            title: '标题2',\n                            content: '内容2'\n                        },\n                        'label':'柱状图api2',\n                        'type':'bar',\n                        'api': '/chartBarApi'\n                    }\n                ]\n            }\n        ]\n    ]\n};\nexport default {\n    components: {\n        DataVis\n    },\n    data() {\n        return {\n            config\n        };\n    }\n};\n\u003c/script\u003e\n\n```\n\nPull the repo to see more or you can take a look at the [website code](https://github.com/BingBlog/form-generator-iview/tree/master/website/page/home);\n\n## Design\n\n![project mind mapping](./project-mind-mapping.svg)\n\n\n## Developer\n\nabingblog@gmail.com\n\n## development\n\n`yarn run dev`\n\n\n## production\n\n`yarn run build`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjson-drived-configurable-platform%2Fdata-vis-iview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjson-drived-configurable-platform%2Fdata-vis-iview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjson-drived-configurable-platform%2Fdata-vis-iview/lists"}