{"_id":"@alicd/crui-chart","_rev":"24-1722c1461a64699e9050a3e380c045dc","name":"@alicd/crui-chart","dist-tags":{"latest":"0.0.14"},"versions":{"0.0.14":{"name":"@alicd/crui-chart","version":"0.0.14","keywords":["walle","component","react"],"author":{"name":"@alicd/walle"},"license":"ISC","_id":"@alicd/crui-chart@0.0.14","maintainers":[{"name":"later_7","email":"tony7leek@gmail.com"}],"dist":{"shasum":"67304350e0f7b6f37daa614a01f7c221695e445d","tarball":"https://registry.npmjs.org/@alicd/crui-chart/-/crui-chart-0.0.14.tgz","fileCount":63,"integrity":"sha512-Yz8NSbsXzndjSzSkzi7zht452pUQhxW/kuAodNNaGeWL7gPiSqTDaVst71QC5PJmr1LtknBS/V8RsgK+ED3HNg==","signatures":[{"sig":"MEUCIQCtZaZHlQP5lpqd85aMg3pWxcQCVMZv6ihrIimVUwaLCAIgIttoBBrEdNlDcSyzBgTeLn3C+zPGPz79WQNKYYBKa0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8347555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOW5ACRA9TVsSAnZWagAA5GMP/0emjpyRplQgG2L8ssAj\neVPZunuAZhudxDwKUM/C4zRhwC3vjAmDdhkx0ArfGPjyfbujKd0qAJH0fU5+\nT528WQFWoCcmRQq7FFvvypKRk5eV6tEtpYeicRQy876rmrifZYRvrMF7BoUp\n8dTn3eY+lS4YXq3v5TpxQU7WK+1i3/voLLUCcVMCXQ7oWQ+e/lropxRC2W4y\nYpSAlgkDW3/eVwg3PiquKNNbPbn2LtOvMXDvHBhVr4FTadFPQFdHJ5rZs+m9\n+t/Q6NiEFbXQdH9oA3Z6Ye3xyTWcJj4qmZAf3+TGqO3EXNe2gRuV3/PEyZCS\nfd6xZqHy8Kw3zwMqgpJYdQt/9Fz76QSdTqpmI03TC8CyT9aJRxTABNK4Mct1\nT9zChm0AolTJDDZA6B1FVnvO2gDKkbI2MjFrvWP9Q1ZvHh7WGcd5FZ/iFs0t\newmYWtJIklf92X7v8zyF0nVlqx+4Nv7Y/9UOqQfvTsLyCQHnAHg9LWdEjRsh\nMR55Z6d4Cmm0y/DdNmV0PoXWJgwNTO45X0eVRw6T6Qfp8gGtU7+sXRDoNSWO\n4O5CLR1nKxIjfzheN0szYecaXJV0iSC/6e2udf1hFtyg5+HHhiyYYTP98B7W\nHiLP/GUEBKDq2krNFT8mpwD6CqOQ78f6JsF8xX8/iBH5pTNpWTBsBLalxPTO\nP3JN\r\n=0AJE\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"scriptPreprocessor":"<rootDir>/node_modules/jest-css-modules"},"main":"./lib/index.js","gitHead":"810bae71c9b7fbbfc1cf81203aed5f65208caba8","scripts":{"dev":"rm -rf ./site && NODE_ENV=development webpack-dev-server --config webpack.config.babel.js --progress","pub":"rm -rf ./lib && rm -rf ./dist && babel src --copy-file --extensions .js,.jsx --out-dir lib && npm run prod","demo":"rm -rf ./site ./_data && NODE_ENV=demo webpack-dev-server --config webpack.config.babel.js --progress","prod":"NODE_ENV=production webpack --config webpack.config.babel.js --progress","test":"jest","build":"webpack --config webpack.config.babel.js --progress","start":"npm run dev","watch":"webpack --watch"},"_npmUser":{"name":"later_7","email":"tony7leek@gmail.com"},"_npmVersion":"5.6.0","description":"该组件包含卡片、折线图、柱状图、饼状图、雷达图、漏斗图组件，是基于 echarts lib 进行封装，使用时无需引入 echarts lib。  ","directories":{},"_nodeVersion":"9.8.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^20.0.4","react":"^15.6.0","eslint":"^3.19.0","lodash":"^4.17.10","mkdirp":"^0.5.1","webpack":"^2.6.1","babel-cli":"^6.24.1","node-sass":"^4.5.3","react-dom":"^15.6.0","babel-core":"^6.25.0","css-loader":"^0.28.4","prop-types":"^15.5.10","@alicd/next":"^0.19.28","sass-loader":"^6.0.6","babel-eslint":"^7.2.3","babel-loader":"^7.1.1","style-loader":"^0.18.2","babel-runtime":"^6.23.0","webpack-merge":"^4.1.0","md-meta-loader":"^0.0.4","jest-css-modules":"^1.1.0","eslint-config-ais":"0.0.16","babel-preset-react":"^6.24.1","webpack-dev-server":"^2.4.5","babel-plugin-import":"^1.4.0","babel-preset-es2015":"^6.24.1","eslint-plugin-react":"^6.3.0","html-webpack-plugin":"^2.28.0","react-test-renderer":"^15.6.1","babel-preset-stage-0":"^6.24.1","babel-preset-stage-2":"^6.24.1","jsonml-to-react-component":"^0.2.6","extract-text-webpack-plugin":"^2.1.2","babel-plugin-transform-runtime":"^6.23.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-decorators-legacy":"^1.3.4"},"peerDependencies":{"@alicd/next":"^0.x"},"_npmOperationalInternal":{"tmp":"tmp/crui-chart_0.0.14_1564044863479_0.21525197060301404","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-07-25T08:54:23.270Z","modified":"2024-07-15T07:14:07.058Z","0.0.14":"2019-07-25T08:54:23.621Z"},"author":{"name":"@alicd/walle"},"license":"ISC","keywords":["walle","component","react"],"description":"该组件包含卡片、折线图、柱状图、饼状图、雷达图、漏斗图组件，是基于 echarts lib 进行封装，使用时无需引入 echarts lib。  ","maintainers":[{"email":"hahaiwin@163.com","name":"hahaiwin"},{"email":"1149518004@qq.com","name":"snowden_"},{"email":"1312065793@qq.com","name":"vincent.ljq"},{"email":"595620510@qq.com","name":"zhen.hz"},{"email":"251250076@qq.com","name":"cismous"},{"email":"juntao.wjt@alibaba-inc.com","name":"juntao.wjt"},{"email":"xiongqi.me@foxmail.com","name":"xiongqi"},{"email":"guoli.ygl@cainiao.com","name":"mingche_286130"},{"email":"joshuasui@163.com","name":"joshuasui"},{"email":"maopengcheng1994@gmail.com","name":"mmpc"},{"email":"littlehmy@163.com","name":"0little"},{"email":"yf871020@163.com","name":"yf871020"},{"email":"zyy7259@gmail.com","name":"zyy7259"},{"email":"tony7leek@gmail.com","name":"later_7"},{"email":"775710651@qq.com","name":"qijian1990"},{"email":"xiekaif@163.com","name":"gepik"},{"email":"yanzhe.xyz@alibaba-inc.com","name":"jimmyxuster"},{"email":"laijianqing@gmail.com","name":"helloljq"},{"email":"rentj1@163.com","name":"rentj1"},{"email":"zhangqing332@live.com","name":"js8zq332"},{"email":"527710279@qq.com","name":"xiaobc"}],"readme":"---\ncategory: Components  \ntype: UI Views  \ncomponent: Base  \nchinese: 卡片图表组件  \nenglish: Chart\n---\n\n基于 echarts v3.8.5 封装的组件列表，使用时无需在应用中引入 `echarts` 图表库，主要包含：卡片、折线、柱状、饼状、雷达、漏斗图、迷你折线、迷你柱状、进度条及趋势图，同时支持配置 `option` 自定义图表，无缝对接 `echarts`。\n\n## API\n\n### Chart.Card\n\n| 成员        | 说明           | 类型       | 默认值       |\n|------------|----------------|----------|-------------|\n| className      | 自定义样式 | string | - |\n| style      | 自定义内联样式 | Object | - |\n| title      | 标题 | ReactNode 或 string | - |\n| action     | 自定义操作区 | ReactNode   | - |\n| contentHeight | 内容区域高度 | number 或 string   | auto |\n| text | 主内容 | ReactNode 或 string | - |\n| subText | 辅内容 | ReactNode 或 string | - |\n| footer     | 底部 | ReactNode 或 string | -  |\n\n### Chart.Line\n\n| 成员        | 说明           | 类型       | 默认值       |\n|------------|----------------|----------|-------------|\n| className      | 自定义样式 | string | - |\n| style      | 自定义内联样式 | Object | - |\n| type      | 图形展示类型 | string   | basic（默认值）, area（区域图）, marker（峰值峰谷图） |\n| color      | 设置系列颜色 | Array   | [\"#59acff\", \"#43d3e0\", \"#45e6b0\", \"#8ee065\", \"#face4b\", \"#ffb366\", \"#ff8066\", \"#ff6680\", \"#e667d0\", \"#aa61f2\", \"#7961f2\", \"#667fff\", \"#f7d83e\", \"#ffbf40\", \"#ff884d\"] |\n| title      | 标题 | string   | - |\n| subTitle   | 子标题 | string   | - |\n| titleX     | 标题位置 | string | left（默认值）、center、right |\n| width     | 绘图区域宽度 | number 或 string | 100% |\n| height     | 绘图区域高度 | number 或 string | 500px |\n| padding     | 坐标轴上、下、左、右留白 | Object<{top, bottom, left, right}>，top、bottom、left、right 为 number 或 string | - |\n| orient     | 图例列表布局方向 | string | horizontal（默认值）、vertical |\n| legendX     | 图例横向位置 | string | center（默认值）、left、right |\n| legendY     | 图例纵向位置 | string 或 number | auto |\n| hasLegend  | 图例是否显示 | boolean | true |\n| hasToolbox | 工具栏是否显示 | boolean | true |\n| hasTooltip | tooltip 是否显示 | boolean | true |\n| hasX | X 轴是否显示 | boolean | true |\n| hasY | Y 轴是否显示 | boolean | true |\n| hasGridV | 栅格垂直线是否显示 | boolean | true |\n| hasGridH | 栅格水平线是否显示 | boolean | true |\n| animation | 是否动画展示 | boolean | true |\n| repaint | 组件 props 改变时是否重新渲染 | boolean | false |\n| boundaryGap | 坐标轴两边留白 | boolean | false |\n| onReady | 图形绘制完成回调并返回实例 | function<(chart)> | - |\n| data       | 数据 | Object<{x, data: [{name, data, type}]}>，x 为横坐标，data 为纵坐标数据 | 如：{x: ['一','二'],data: [{name: '邮件营销',data: [120, 132]}, {name: '联盟广告',data: [220, 182]}]} |\n\n### Chart.Bar\n\n| 成员        | 说明           | 类型       | 默认值       |\n|------------|----------------|----------|-------------|\n| className      | 自定义样式 | string | - |\n| style      | 自定义内联样式 | Object | - |\n| type      | 图形展示类型 | string   | basic（默认值），inverse（坐标反转图）， stack（堆叠），inversestack（坐标反转堆叠图） |\n| color      | 设置系列颜色 | Array   | [\"#59acff\", \"#43d3e0\", \"#45e6b0\", \"#8ee065\", \"#face4b\", \"#ffb366\", \"#ff8066\", \"#ff6680\", \"#e667d0\", \"#aa61f2\", \"#7961f2\", \"#667fff\", \"#f7d83e\", \"#ffbf40\", \"#ff884d\"] |\n| title      | 标题 | string   | - |\n| subTitle   | 子标题 | string   | - |\n| titleX     | 标题位置 | string | left（默认值）、center、right |\n| width     | 绘图区域宽度 | number 或 string | 100% |\n| height     | 绘图区域高度 | number 或 string | 500px |\n| padding     | 坐标轴上、下、左、右留白 | Object<{top, bottom, left, right}>，top、bottom、left、right 为 number 或 string | - |\n| orient     | 图例列表布局方向 | string | horizontal（默认值）、vertical |\n| legendX     | 图例横向位置 | string | center（默认值）、left、right |\n| legendY     | 图例纵向位置 | string 或 number | auto |\n| hasLegend  | 图例是否显示 | boolean | true |\n| hasToolbox | 工具栏是否显示 | boolean | true |\n| hasTooltip | tooltip 是否显示 | boolean | true |\n| hasX | X 轴是否显示 | boolean | true |\n| hasY | Y 轴是否显示 | boolean | true |\n| hasGridV | 栅格垂直线是否显示 | boolean | true |\n| hasGridH | 栅格水平线是否显示 | boolean | true |\n| animation | 是否动画展示 | boolean | true |\n| repaint | 组件 props 改变时是否重新渲染 | boolean | false |\n| onReady | 图形绘制完成回调并返回实例 | function<(chart)> | - |\n| data       | 数据 | Object<{x, data: [{name, data, type}]}>，x 为横坐标，data 为纵坐标数据 | 参照 Chart.Line |\n\n### Chart.Pie\n\n| 成员        | 说明           | 类型       | 默认值       |\n|------------|----------------|----------|-------------|\n| className      | 自定义样式 | string | - |\n| style      | 自定义内联样式 | Object | - |\n| type      | 图形展示类型 | string   | basic（默认值）， ring（环形） |\n| color      | 设置系列颜色 | Array   | [\"#59acff\", \"#43d3e0\", \"#45e6b0\", \"#8ee065\", \"#face4b\", \"#ffb366\", \"#ff8066\", \"#ff6680\", \"#e667d0\", \"#aa61f2\", \"#7961f2\", \"#667fff\", \"#f7d83e\", \"#ffbf40\", \"#ff884d\"] |\n| title      | 标题 | string   | - |\n| subTitle   | 子标题 | string   | - |\n| titleX     | 标题位置 | string | left、center（默认值）、right |\n| width     | 绘图区域宽度 | number 或 string | 100% |\n| height     | 绘图区域高度 | number 或 string | 500px |\n| orient     | 图例列表布局方向 | string | horizontal、vertical（默认值） |\n| legendX     | 图例横向位置 | string | left（默认值）、center、right |\n| legendY     | 图例纵向位置 | string 或 number | auto |\n| hasLegend  | 图例是否显示 | boolean | true |\n| hasToolbox | 工具栏是否显示 | boolean | true |\n| hasTooltip | tooltip 是否显示 | boolean | true |\n| animation | 是否动画展示 | boolean | true |\n| repaint | 组件 props 改变时是否重新渲染 | boolean | false |\n| radius | 图形半径，数据第一项为内半径，第二项为外半径 | string 或 Array | 55%、['50%', '70%'] |\n| center | 图形圆心，数据第一项为横坐标，第二项为纵坐标 | Array | ['50%', '50%'] |\n| roseType | 区分数据大小模式 | string 或 boolean | false（默认值）、radius、area |\n| labelSize | 中心数据大小 | number | 30 |\n| onReady | 图形绘制完成回调并返回实例 | function<(chart)> | - |\n| data       | 数据 | Array<{name, data: [{value, name}]}> 或 Object{name, data: [{value, name}]} | 如：[{name:'饼状图', data: [{value, name},{value, name}]}] |\n\n### Chart.Radar\n\n| 成员        | 说明           | 类型       | 默认值       |\n|------------|----------------|----------|-------------|\n| className      | 自定义样式 | string | - |\n| style      | 自定义内联样式 | Object | - |\n| type      | 图形展示类型 | string   | basic（默认值）， area（区域图） |\n| color      | 设置系列颜色 | Array   | [\"#59acff\", \"#43d3e0\", \"#45e6b0\", \"#8ee065\", \"#face4b\", \"#ffb366\", \"#ff8066\", \"#ff6680\", \"#e667d0\", \"#aa61f2\", \"#7961f2\", \"#667fff\", \"#f7d83e\", \"#ffbf40\", \"#ff884d\"] |\n| title      | 标题 | string   | - |\n| subTitle   | 子标题 | string   | - |\n| titleX     | 标题位置 | string | left（默认值）、center、right |\n| width     | 绘图区域宽度 | number 或 string | 100% |\n| height     | 绘图区域高度 | number 或 string | 500px |\n| orient     | 图例列表布局方向 | string | horizontal（默认值）、vertical |\n| legendX     | 图例横向位置 | string | center（默认值）、left、right |\n| legendY     | 图例纵向位置 | string 或 number | auto |\n| hasLegend  | 图例是否显示 | boolean | true |\n| hasToolbox | 工具栏是否显示 | boolean | true |\n| hasTooltip | tooltip 是否显示 | boolean | true |\n| animation | 是否动画展示 | boolean | true |\n| repaint | 组件 props 改变时是否重新渲染 | boolean | false |\n| radius | 图心半径 | string | 60% |\n| center | 图形圆心，数据第一项为横坐标，第二项为纵坐标 | Array | ['50%', '50%'] |\n| onReady | 图形绘制完成回调并返回实例 | function<(chart)> | - |\n| data       | 数据，max 为 number 或 array，number 必须大于 value 最大值，array 必须大于下标对应 value 最大值 | Object<{max, data: [{name, data<[{name, value}]>}]}> | - |\n\n### Chart.Funnel\n\n| 成员        | 说明           | 类型       | 默认值       |\n|------------|----------------|----------|-------------|\n| className      | 自定义样式 | string | - |\n| style      | 自定义内联样式 | Object | - |\n| color      | 设置系列颜色 | Array   | [\"#59acff\", \"#43d3e0\", \"#45e6b0\", \"#8ee065\", \"#face4b\", \"#ffb366\", \"#ff8066\", \"#ff6680\", \"#e667d0\", \"#aa61f2\", \"#7961f2\", \"#667fff\", \"#f7d83e\", \"#ffbf40\", \"#ff884d\"] |\n| title      | 标题 | string   | - |\n| subTitle   | 子标题 | string   | - |\n| titleX     | 标题位置 | string | left（默认值）、center、right |\n| width     | 绘图区域宽度 | number 或 string | 100% |\n| height     | 绘图区域高度 | number 或 string | 500px |\n| min     | 最小值 | number | 0 |\n| max     | 最大值 | number | 100 |\n| funnelAlign     | 对齐方向 | string | center（默认值）、left、right |\n| padding     | 坐标轴上、下留白 | Object<{top, bottom}>，top、bottom 为 number 或 string | - |\n| orient     | 图例列表布局方向 | string | horizontal（默认值）、vertical |\n| legendX     | 图例位置 | string | center（默认值）、left、right |\n| legendY     | 图例纵向位置 | string 或 number | auto |\n| hasLegend  | 图例是否显示 | boolean | true |\n| hasToolbox | 工具栏是否显示 | boolean | true |\n| hasTooltip | tooltip 是否显示 | boolean | true |\n| animation | 是否动画展示 | boolean | true |\n| repaint | 组件 props 改变时是否重新渲染 | boolean | false |\n| onReady | 图形绘制完成回调并返回实例 | function<(chart)> | - |\n| data       | 数据 | Array<{name, data: [{value, name}]}> 或 Object{name, data: [{value, name}]} | - |\n\n### Chart.MiniLine\n\n| 成员        | 说明           | 类型       | 默认值       |\n|------------|----------------|----------|-------------|\n| className      | 自定义样式 | string | - |\n| style      | 自定义内联样式 | Object | - |\n| type      | 类型 | string   | basic（默认值），area（区域图） |\n| color      | 线条颜色 | Array   | - |\n| lineWidth      | 线条宽度 | number   | 2 |\n| width      | 容器宽度 | number 或 string   | 100% |\n| height      | 容器高度 | number 或 string   | - |\n| hasTooltip      | tooltip 是否显示 | boolean   | true |\n| animation | 是否动画展示 | boolean | true |\n| symbol | 标记图形 | string | circle（默认值）、none（无）、emptyCircle（空心）、rect（矩形）、roundRect（圆角矩形）、triangle（三角形）、diamond（菱形）、pin（热气球）、arrow（箭头） |\n| symbolSize | 标记图形大小 | number 或 Array<宽, 高> | 10 |\n| repaint | 组件 props 改变时是否重新渲染 | boolean | false |\n| onReady | 图形绘制完成回调并返回实例 | function<(chart)> | - |\n| data      | 数据 | Array<{x, y}>   | 如：[{x, y}] |\n\n### Chart.MiniBar\n\n| 成员        | 说明           | 类型       | 默认值       |\n|------------|----------------|----------|-------------|\n| className      | 自定义样式 | string | - |\n| style      | 自定义内联样式 | Object | - |\n| color      | 柱子背景色 | Array   | - |\n| width      | 容器宽度 | number 或 string   | 100% |\n| height      | 容器高度 | number 或 string   | - |\n| hasTooltip      | tooltip 是否显示 | boolean   | true |\n| animation | 是否动画展示 | boolean | true |\n| repaint | 组件 props 改变时是否重新渲染 | boolean | false |\n| onReady | 图形绘制完成回调并返回实例 | function<(chart)> | - |\n| data      | 数据 | Array<{x, y}>   | 如：[{x, y}] |\n\n### Chart.Trend\n\n| 成员        | 说明           | 类型       | 默认值       |\n|------------|----------------|----------|-------------|\n| className      | 自定义样式 | string | - |\n| style      | 自定义内联样式 | Object | - |\n| type      | 图标方向 | string   | up（默认值，向上），down（向下） |\n| status      | 状态 | string   | good（默认值）、bad |\n| text      | 内容 | ReactNode 或 string   | - |\n| direction      | 图标在内容区域左或右边 | string   | r (默认值，右边)，l（左边） |\n| iconSize      | 图标大小,可选值：'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl' | string   | xxs |\n| iconColor      | 图表颜色 | string   | #FF341A |\n\n### Chart.Define\n\n| 成员        | 说明           | 类型       | 默认值       |\n|------------|----------------|----------|-------------|\n| className      | 自定义样式 | string | - |\n| style      | 自定义内联样式 | Object | - |\n| repaint | 组件 props 改变时是否重新渲染 | boolean | false |\n| width     | 绘图区域宽度 | number 或 string | 100% |\n| height     | 绘图区域高度 | number 或 string | 500px |\n| onReady | 图形绘制完成回调并返回实例 | function<(chart)> | - |\n| options | 图表配置 | object | - |","readmeFilename":"README.md"}