{"id":19910757,"url":"https://github.com/xiaoping1988/ping-ui","last_synced_at":"2025-05-03T03:30:40.185Z","repository":{"id":57324395,"uuid":"101989252","full_name":"xiaoping1988/ping-ui","owner":"xiaoping1988","description":"用vue做的一些组件,比如threejs波浪效果、echarts等组件,https://xiaoping1988.github.io/index.html#/","archived":false,"fork":false,"pushed_at":"2017-12-09T15:06:56.000Z","size":309,"stargazers_count":9,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-21T02:20:42.499Z","etag":null,"topics":["echarts","particles","threejs","vue","waves"],"latest_commit_sha":null,"homepage":"","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/xiaoping1988.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":"2017-08-31T10:26:11.000Z","updated_at":"2022-11-13T08:51:58.000Z","dependencies_parsed_at":"2022-09-04T12:52:43.245Z","dependency_job_id":null,"html_url":"https://github.com/xiaoping1988/ping-ui","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/xiaoping1988%2Fping-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoping1988%2Fping-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoping1988%2Fping-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoping1988%2Fping-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaoping1988","download_url":"https://codeload.github.com/xiaoping1988/ping-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252137500,"owners_count":21700224,"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":["echarts","particles","threejs","vue","waves"],"created_at":"2024-11-12T21:20:37.584Z","updated_at":"2025-05-03T03:30:39.693Z","avatar_url":"https://github.com/xiaoping1988.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ping-ui\n\n\u003e A UI components Library with Vue.js ,https://xiaoping1988.github.io/index.html#/\n\n\u003e 包含一些echarts和粒子系统的共用组件\n\n## NPM安装\n\nnpm install ping-ui --save\n\nimport PingUI from 'ping-ui'\n\nVue.use(PingUI)\n\n## 帮助文档\n\n### echarts组件\n\n\u003cp-chart :data=\"chartData\" id=\"chart\"\u003e\u003c/p-chart\u003e\n\n可参考src/demos/Chart.vue,一个页面多个图表时一定要设置唯一ID\n\n目前已实现折线图、柱状图、饼状图\n\nchartData格式示例:\n\n    折线图或者柱状图:\n    {                \n      title: '图标题',\n      type: 'line', // 图类型 ['line','bar','linebar','pie']\n      reverse: false, // 是否要颠倒系列里的data数据\n      columns: [\n        {\n          name: 'dim', // 与data中的key一样\n          title: '维度', //\n          x: true // 用于x轴\n        },\n        {\n          name: 'index', // 与data中的key一样\n          title: '指标' // 即图例\n        }\n      ],\n      data: [\n        {dim: '周一', index: 800},\n        {dim: '周二', index: 600},\n        {dim: '周三', index: 500},\n        {dim: '周四', index: 400},\n        {dim: '周五', index: 500},\n        {dim: '周六', index: 600},\n        {dim: '周日', index: 700}\n      ]         \n    }\n    \n    \n    折线柱状混图:\n    {                \n      title: '图标题',\n      type: 'linebar', // 图类型 ['line','bar','linebar','pie']\n      reverse: false, // 是否要颠倒系列里的data数据\n      columns: [\n          {\n            name: 'dim', // 与data中的key一样\n            title: '维度', //\n            x: true // 用于x轴\n          },\n         {\n           name: 'index1', // 与data中的key一样\n           title: '指标1', // 即图例\n           type: 'line' // 上面的type为'linebar'时才有效\n         },\n         {\n           name: 'index2', // 与data中的key一样\n           title: '指标2', // 即图例\n           type: 'bar' // 上面的type为'linebar'时才有效\n         }\n      ],\n      data: [\n         {dim: '周一', index1: 100, index2: 800},\n         {dim: '周二', index1: 200, index2: 600},\n         {dim: '周三', index1: 300, index2: 400},\n         {dim: '周四', index1: 400, index2: 300},\n         {dim: '周五', index1: 500, index2: 500},\n         {dim: '周六', index1: 600, index2: 700},\n         {dim: '周日', index1: 700, index2: 900}\n      ]         \n    }\n    \n    \n      饼状图:\n     {\n       title: '饼状图标题',\n       type: 'pie', // 图类型 ['line','bar','linebar','pie']\n       reverse: false, // 是否要颠倒系列里的data数据\n       columns: [\n         {\n           name: 'index1', // 与data中的key一样\n           title: '指标1' // 即图例\n         },\n         {\n           name: 'index2', // 与data中的key一样\n           title: '指标2' // 即图例\n         },\n         {\n           name: 'index3', // 与data中的key一样\n           title: '指标3' // 即图例\n         },\n         {\n           name: 'index4', // 与data中的key一样\n           title: '指标4' // 即图例\n         }\n       ],\n       data: [\n         {index1: 100, index2: 800, index3: 200, index4: 400}\n       ]\n     }\n\n\n### 粒子系统waves组件\n\n\n\u003cp-waves color=\"#00BFFF\"\u003e\u003c/p-waves\u003e\n\ncolor是指粒子颜色\n\n可参考src/demos/Waves.vue\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# build for production and view the bundle analyzer report\nnpm run build --report\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoping1988%2Fping-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaoping1988%2Fping-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoping1988%2Fping-ui/lists"}