Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

laughing001/react-native-tcharts

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

53 Commits

Repository files navigation

Jian Jie

react-native-tchartsShi Ji Yu react native ARTDe Tu Biao Zu Jian Ku ,Wan Quan Kua Ping Tai ,Wu Yi Lai

Zu Jian Lie Biao

  • Rect

  • Polygon

  • Circle

  • Ellipse

  • Radar

  • Pie

  • Line

  • Bar

  • Scatter

  • Funnel

An Zhuang

$ npm install react-native-tcharts --save

Shi Yong

) } }">import {Rect, Polygon, Circle, Ellipse, Radar, Pie, Line, Bar, Scatter, Funnel} from 'react-native-tcharts'
Class Demo extends Component{
render{
return (










)
}
}

Tu Li

Tong Yong Shu Xing

  • style(object):Tong react native Zu Jian style,Hui Zhi Jie Tou Chuan Dao Zu Jian Rong Qi Yuan Su Shang .
  • width (number): Zu Jian Kuan Du ,Bu Chuan Mo Ren Shou Ji Ping Mu Kuan Du .
  • height (number): Zu Jian Gao Du ,Bu Chuan Mo Ren 200
  • option (object): Zu Jian Pei Zhi Xiang ,Xiang Qing Qing Dian Ji Ge Zu Jian Cha Kan Wen Dang Huo Zhi Jie Cha Kan exampleMu Lu Xia Dui Ying De Shi Li .

Zu Jian Can Shu

1.Rect

  • option
Props Type Required Description
width Number No Zheng Fang Xing /Chang Fang Xing Kuan Du
height Number No Zheng Fang Xing /Chang Fang Xing Gao Du
strokeWidth Number No Bian Kuang Kuan Du
stroke Color No Bian Kuang Se Zhi
fill Color No Tian Chong Se
  • demo
const option = {
strokeWidth: 0,
stroke: '#fff',
fill: '#000',
width: 160,
height: 100
};
2.Polygon
  • option
Props Type Required Description
width Number No Duo Bian Xing Kuan
height Number No Duo Bian Xing Gao
strokeWidth Number No Bian Kuang Kuan Du
stroke Color No Bian Kuang Yan Se
fill Color No Tian Chong Se
lineNumber Number No Duo Bian Xing Bian De Ge Shu
startAngle Number No Qi Shi Jiao Du ,Mo Ren xZhou Zheng Xiang ,Zheng Zhi Wei Ni Shi Zhen Fang Xiang
  • demo
const option = {
radius: 70,
startAngle: 0,
lineNumber: 6,
fill: '#fff',
strokeWidth: 0,
stroke: '#000'
};

3.Circle

  • option
Props Type Required Description
strokeWidth Number No Bian Kuang Kuan Du
stroke Color No Bian Kuang Yan Se
fill Color No Tian Chong Se
r Number No Ban Jing
  • demo
const option = {
r: 80,
fill: '#fff',
strokeWidth: 2,
stroke: '#000'
}

4.Ellipse

  • option
Props Type Required Description
strokeWidth Number No Bian Kuang Kuan Du
stroke Color No Bian Kuang Yan Se
fill Color No Tian Chong Se
rx Number No Duan Bian Ban Jing
ry Number No Chang Bian Ban Jing
  • demo
const option = {
rx: 40,
ry: 80,
fill: '#fff',
strokeWidth: 2,
stroke: '#000'
}

5.Radar

  • option
Props Type Required Description
r Number No Lei Da Tu Ban Jing
splitNumber Number No Lei Da Tu Zhou Xian Shu Liang
shape String No Lei Da Tu Xing Zhuang [polygon/circle],Mo Ren polygon
startAngle Number No Lei Da Tu Qi Shi Jiao Du ,Mo Ren xZhou Zheng Xiang ,Zheng Zhi Wei Ni Shi Zhen Xuan Zhuan
indicator Array No Zhou Xian Wen An ,Zui Da Zhi ,Wen An Yan Se ,Shu Zu Chang Du Ji Wei Zhou Xian Shu Liang
axisLine Object No Zhou Xian Pei Zhi ,Shi Fou Xian Shi Yi Ji Zhou Xian Yang Shi
rich Object No Zhou Xian Wen An Ding Zhi Hua She Zhi ,Bao Gua Duo Yan Se Yi Ji Huan Xing
series Array No Lei Da Tu Shu Ju
  • demo
const option = {
r: 80,
splitNumber: 5,
shape: 'polygon',
startAngle: 0,
indicator: [{
text: '{a:v1}{b:v2}{c:v3}',
max: 100,
min: 0,
color: '#000'
}, {
text: '{a:v1}{b:v2}{c:v3}',
max: 100,
min: 0,
color: '#000'
}, {
text: '{a:v1}{b:v2}{c:v3}',
max: 100,
min: 0,
color: '#000'
}, {
text: '{a:v1}{b:v2}{c:v3}',
max: 100,
min: 0,
color: '#000'
}],
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
},
rich: {
a: {
color: '#2dcbc3',
fontSize: 12,
textAlign: 'center',
textAlignVertical: 'center',
fontFamily: "PingFangSC-Medium",
fontWeight: 'bold'
},
b: {
color: '#f55353',
fontSize: 12,
textAlign: 'center',
textAlignVertical: 'center',
fontFamily: "PingFangSC-Medium",
fontWeight: 'bold'
},
c: {
color: "#999999",
fontSize: 12,
textAlign: 'center',
textAlignVertical: 'center',
fontFamily: "PingFangSC-Medium",
fontWeight: 'bold'
}
},
series: [{
data: [20, 50, 80, 100],
itemStyle: {
color: '#000'
},
lineStyle: {
color: '#000'
},
areaStyle: {
color: '#000'
}
}]
}

6.Pie

  • option
Props Type Required Description
color Array No Bing Tu Yan Se
series Array No Bing Tu Shu Ju
  • demo
const option2 = {
title: {},
legend: {},
color: ['#000', '#001', '#002', '#003'],
series:[{
name: '',
type: 'pie',
radius: [60,80], //Bing Tu Ban Jing Zan Zhi Chi Shu Zi
data: [10,10, 10, 10], //Bing Tu Zhan Yong Shu Ju
},{
name: '',
type: 'pie',
radius: [20,40],
data: [10,20],
}]
}

7.Line

  • option
Props Type Required Description
xAxis Object No xZhou Xin Xi
yAxis Object No yZhou Xin Xi
series Array No Zhe Xian Tu Shu Ju
  • demo
const option = {
xAxis: {
name: 'test',
nameStyle: {
color: '#000',
fontSize: 12
},
lineStyle: {
color: '#999'
},
textStyle: {
color: '#999',
fontSize: 12
},
gridLine: {
lineStyle: {
color: '#999'
}
},
axisTick: {
show: true,
lineStyle: {
color: '#999'
}
},
min: 0,
max: 100,
interval: 20,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
yAxis: {
name: '',
nameStyle: {
color: '#aaa',
fontSize: 12
},
lineStyle: {
color: '#999'
},
textStyle: {
color: '#999',
fontSize: 12
},
gridLine: {
lineStyle: {
color: '#999'
}
},
axisTick: {
show: true,
lineStyle: {
color: '#aaa'
}
},
interval: 200,
min: 6900,
max: 7900,
data: []
},
series: [{
data: [7099, 6973, 6953, 6914, 7155, 7300, 6988, 7100, 7200, 7899],
pointer: {
itemStyle: {
color: '#aaa',
fill: '#fff'
},
radius: 3
},
tip: {
itemStyle: {
backgroundColor: '#aaa',
color: '#aaa',
fontSize: 12
}
},
lineStyle: {
color: '#aaa',
fill: '#aaa'
}
}]
}

8.Bar

  • option
Props Type Required Description
xAxis Object No xZhou Xin Xi
yAxis Object No yZhou Xin Xi
series Array No Zhu Zhuang Tu Shu Ju
  • demo
const option = {
xAxis: {
name: '',
lineStyle: {//Zhou Xian Xiang Guan Pei Zhi
color: '#000'
},
axisTick: {//Ke Du Xiang Guan Pei Zhi
show: true,
lineStyle: {
color: '#000'
}
},
textStyle: {
color: '#000'
},
min: 0,
max: 100,
interval: 20,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
name: '',
lineStyle: {
color: '#000'
},
axisTick: {
show: true,
lineStyle: {
color: '#000'
}
},
textStyle: {
color: '#000'
},
gridLine: {
show: true,
lineStyle: {
color: '#000'
}
},
min: 0,
max: 100,
interval: 20
},
series: [{
data: [30, 75, 88, 60, 90, 50, 20],
itemStyle: {
color: '#666',
opacity: 1
}
}, {
data: [20, 50, 80, 80, 70, 10, 30],
itemStyle: {
color: '#666',
opacity: 1
}
}]
};

9.Scatter

  • option
Props Type Required Description
xAxis Object No xZhou Xin Xi
yAxis Object No yZhou Xin Xi
series Array No San Dian Tu Shu Ju
  • demo
const option = {
xAxis: {
lineStyle: {
color: '#222'
},
textStyle: {
color: '#222',
font: 10
},
gridLine: {
isShow: true,
lineStyle: {
color: '#222'
}
},
min: 0,
max: 100,
interval: 20,
data: [0,3,6,9,12,15]
},
yAxis: {
lineStyle: {
color: '#222'
},
textStyle: {
color: '#222',
font: 10
},
gridLine: {
isShow: true,
lineStyle: {
color: '#222'
}
},
min: 0,
max: 100,
interval: 20,
data: [0,2,4,6,8,10,12]
},
series: [{
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
radius: 4,
itemStyle: {
color: '#333',
opacity: 1
}
}]
};

10.Funnel

  • option
Props Type Required Description
color Array No Lou Dou Tu Yan Se Shu Zu
series Array No Lou Dou Tu Shu Ju
  • demo
const option = {
title: 'Lou Dou Tu ',
legend: {},
color: ['#000', '#111', '#222', '#333'],
series: [{
name: 'Lou Dou Tu ',
type: 'funnel',
min: 0,
max: 100, //She Zhi Lou Dou De Zui Xiao He Zui Da Zhi
minSize: '0%', //Lou Dou De Zui Xiao He Zui Da Chi Cun
maxSize: '80%',
height: 200,
gap: 3, //Lou Dou Jian Ge
funnelAlign: 'center', //Dui Qi Fang Shi
sort: 'descending',//Lou Dou Shun Xu [descending|ascending]
label: {
show: true,
fontSize: 12,
color: '#fff'//Yong Lai Xian Shi Biao Zhu Zi Ti Yang Shi De
},
data: [{
value: 20,
name: 'Yi Ji Du '
}, {
value: 40,
name: 'Yi Ji Du '
}, {
value: 60,
name: 'Er Ji Du '
}, {
value: 80,
name: 'San Ji Du '
}]
}]
}

License

react-native-tcharts is released under the MIT license.

Releases

No releases published

Packages

Contributors