0.0.8 • Published 6 years ago
nuke-biz-chart v0.0.8
Chart
g2-mobile rax 版本封装
基本使用
import { Chart, Geom, Axis, Coord,Animate} from 'nuke-biz-chart';
//...
const data = [
{"time": '周一',"tem": 10,"city": "beijing"},
{"time": '周二',"tem": 22,"city": "beijing"},
{"time": '周三',"tem": 20,"city": "beijing"},
{"time": '周四',"tem": 26,"city": "beijing"},
{"time": '周五',"tem": 20,"city": "beijing"},
{"time": '周六',"tem": 26,"city": "beijing"},
{"time": '周日',"tem": 28,"city": "beijing"},
{"time": '周一',"tem": 5,"city": "newYork"},
{"time": '周二',"tem": 12,"city": "newYork"},
{"time": '周三',"tem": 26,"city": "newYork"},
{"time": '周四',"tem": 20,"city": "newYork"},
{"time": '周五',"tem": 28,"city": "newYork"},
{"time": '周六',"tem": 26,"city": "newYork"},
{"time": '周日',"tem": 20,"city": "newYork"}
];
const cols = {
time: { alias: '时间' },
tem: { alias: '温度' }
};
<Chart id="nuke-biz-chart-test2" data={data} width={750} height={350} cols={cols}>
<Axis name="time" config={{label: {fontSize: 12}}} />
<Axis name="tem" config={{label: {fontSize: 12}}} />
<Geom type="line" position="time*tem" color="city" size={2} shape="smooth" />
<Animate type="waveh" config={{duration: 2000,easing: 'elastic'}} />
</Chart>API
Chart 标签
| 属性配置 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| id | 必传且同页面不重复 | string | 无 |
| width | 必传，宽 | number | 无 |
| height | 必传，高 | number | 无 |
| cols | 列别名 | obj | 无 |
Axis 坐标轴
必须包裹在 <Chart>标签内，如果是直角坐标系，则需传 x、y 个
| 属性配置 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | x或y轴字段名 | string | 无 |
| config | 配置项，参考 g2 axis | object | 无 |
Geom 图形
必须包裹在 <Chart>标签内
| 属性配置 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 图形类型，枚举值，'point', 'line', 'area', 'bar', 'pie', 'polygon', 'schema' | string | 'bar' |
| position | x轴*y轴，参考 g2 geom position | string | 无 |
| color | 颜色区分，参考 g2 geom color | string | 无 |
| shape | 形状，随着type 不同，枚举值有不同，参考下方表格 | string | 无 |
| size | 大小设置，随着type 不同，含义不同，参考 g2 geom size | string | 无 |
| style | 用于快速配置图形的样式。参数符合 canvas 图形属性，参考 g2 geom style | object | 无 |
ps: shape 取值受 Geom type 的影响
| type | shape 类型 | 解释 |
|---|---|---|
| point | 'circle','rect' | - |
| line | 'line','smooth','dash' | dash ：虚线，smooth： 平滑线 |
| area | 'line','smooth' | - |
Coord 坐标系
必须包裹在 <Chart>标签内
用于设置直角坐标系还是极坐标系，直角坐标系可不用传。
| 属性配置 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 坐标系类型，枚举值，'rect' 直角坐标系, 'polar' 极坐标系 | string | 'rect' |
| config | 坐标系旋转配置，参考 g2 chart coord | cfg | 无 |
const pieData = [
{a:'l',b: 5, label: '小朋友1'},
{a:'l',b: 12, label: '小朋友2'},
{a:'l',b: 3, label: '小朋友3'}
];
<Chart id="nuke-biz-chart-test5" data={pieData} width={450} height={450}>
<Axis visible={false} />
<Coord type="polar" config={{transposed: true,inner:0.6}} />
<Geom type="pie" position="a*b" color="label" />
</Chart>Animate 绘制动画
必须包裹在 <Chart>标签内
| 属性配置 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 坐标系类型，枚举值，'waveh','wavec','scalex','scaley','scalexy' | string | 无 |
| config | 动画参数配置，参考 g2 chart animate | cfg | 无 |
<Animate type="waveh" config={{duration: 2000,easing: 'elastic'}} />