nuke-biz-chart

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'}} />