{"id":18389172,"url":"https://github.com/kaixinfu/react-native-echarts","last_synced_at":"2026-06-17T23:31:29.363Z","repository":{"id":188601983,"uuid":"108089023","full_name":"kaixinfu/react-native-echarts","owner":"kaixinfu","description":"react-native-echarts","archived":false,"fork":false,"pushed_at":"2017-10-28T16:23:31.000Z","size":186,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-12T09:31:52.053Z","etag":null,"topics":["native-echarts","react-native","react-navigation"],"latest_commit_sha":null,"homepage":null,"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/kaixinfu.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,"governance":null}},"created_at":"2017-10-24T06:59:04.000Z","updated_at":"2018-07-17T03:48:52.000Z","dependencies_parsed_at":"2023-08-16T04:14:55.242Z","dependency_job_id":null,"html_url":"https://github.com/kaixinfu/react-native-echarts","commit_stats":null,"previous_names":["kaixinfu/react-native-echarts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kaixinfu/react-native-echarts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaixinfu%2Freact-native-echarts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaixinfu%2Freact-native-echarts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaixinfu%2Freact-native-echarts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaixinfu%2Freact-native-echarts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaixinfu","download_url":"https://codeload.github.com/kaixinfu/react-native-echarts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaixinfu%2Freact-native-echarts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34470322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-17T02:00:05.408Z","response_time":127,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["native-echarts","react-native","react-navigation"],"created_at":"2024-11-06T01:41:18.849Z","updated_at":"2026-06-17T23:31:29.346Z","avatar_url":"https://github.com/kaixinfu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-echarts\n\n## Contains\n\n- [x] [react-native](http://reactnative.cn/)\n- [x] [native-echarts](https://www.npmjs.com/package/native-echarts)\n- [x] native-echarts Demo\n\n## Warning\n\n\u003e `@remobile/react-native-echarts` 存在react class版本问题，需修改依赖，建议慎用\n\n### 推荐使用native-echarts\n\n\u003e  npm install native-echarts --save\n\n| 参数  | 描述 |\n| ------------- | ------------- |\n|  option (object)  | echarts图表的配置项  |\n|  width (number) | 图表的宽度  |\n|  height (number)| 图表的高度\n\n```\nimport React, { Component } from 'react';\nimport {\n    AppRegistry,\n\tStyleSheet,\n\tText,\n\tView,\n\tPlatform,\n\tImage\n} from 'react-native';\n\nimport {Container, Content, Button} from 'native-base';\nimport Echarts from 'native-echarts';\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tapple:[2, 4, 7, 2, 2, 7, 13, 16],\n\t\t\torgan: [6, 9, 9, 2, 8, 7, 17, 18],\n\t\t}\n\t}\n\n\trender() {\n\t\tconst option = {\n\t\t\t//点击某一个点的数据的时候，显示出悬浮窗\n\t\t\ttooltip : {\n\t\t\t\ttrigger: 'axis'\n\t\t\t},\n\t\t\t//可以手动选择现实几个图标\n\t\t\tlegend: {\n\t\t\t\tdata:['苹果','橘子']\n\t\t\t},\n\t\t\t//各种表格\n\t\t\ttoolbox: {\n\t\t\t\t//改变icon的布局朝向\n\t\t\t\t//orient: 'vertical',\n\t\t\t\tshow : true,\n\t\t\t\tshowTitle:true,\n\t\t\t\tfeature : {\n\t\t\t\t\t//show是否显示表格，readOnly是否只读\n\t\t\t\t\tdataView : {show: true, readOnly: false},\n\t\t\t\t\tmagicType : {\n\t\t\t\t\t\t//折线图  柱形图    总数统计 分开平铺\n\t\t\t\t\t\ttype: ['line', 'bar','stack','tiled'],\n\t\t\t\t\t},\n\n\t\t\t\t}\n\t\t\t},\n\t\t\txAxis : [\n\t\t\t\t{\n\t\t\t\t\t//就是一月份这个显示为一个线段，而不是数轴那种一个点点\n\t\t\t\t\tboundaryGap:true,\n\t\t\t\t\ttype : 'category',\n\t\t\t\t\tname : '时间',\n\t\t\t\t\tdata : ['1月','2月','3月','4月','5月','6月','7月','8月']\n\t\t\t\t}\n\t\t\t],\n\t\t\tyAxis : [\n\t\t\t\t{\n\t\t\t\t\ttype : 'value',\n\t\t\t\t\tname : '销量(kg)'\n\t\t\t\t}\n\t\t\t],\n\t\t\t//图形的颜色组\n\t\t\tcolor:['rgb(249,159,94)','rgb(67,205,126)'],\n\t\t\t//需要显示的图形名称，类型，以及数据设置\n\t\t\tseries : [\n\t\t\t\t{\n\t\t\t\t\tname:'苹果',\n\t\t\t\t\t//默认显\n\t\t\t\t\ttype:'bar',\n\t\t\t\t\tdata:this.state.apple\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname:'橘子',\n\t\t\t\t\ttype:'bar',\n\t\t\t\t\tdata:this.state.organ\n\t\t\t\t}\n\t\t\t]\n\t\t};\n\t\tconst { navigate } = this.props.navigation;\n\t\treturn (\n\t\t\t\u003cView style={styles.container}\u003e\n\t\t\t\u003cView\u003e\n\t\t\t\t\u003cEcharts option={option} height={1000} width={width}/\u003e\n\t\t\t\u003c/View\u003e\n\t\t\t\t\u003cView style={{justifyContent: 'center'}}\u003e\n\t\t\t\t\u003cView\u003e\n\t\t\t\t\t\t\u003cButton small success onPress={() =\u003e navigate('Item', {callback: (data)=\u003e{\n\t\t\t\t\t\t\tconsole.log('..........go'); // 打印值为：'回调参数'\n\t\t\t\t\t\t} ,user: 'Lucy' })}\u003e\n\t\t\t\t\t\t\t\u003cText\u003e Click Me to scence1! \u003c/Text\u003e\n\t\t\t\t\t\t\u003c/Button\u003e\n\t\t\t\t\u003c/View\u003e\n\t\t\t\t\u003c/View\u003e\n\t\t\t\u003c/View\u003e\n\t\t);\n\t}\n}\n\nconst styles = StyleSheet.create({\n\tcontainer: {\n\t\tflex:1,\n\t},\n\ticon: {\n\t\twidth: 26,\n\t\theight: 26,\n\t},\n\ttitleView:{\n\t\theight:Platform.OS=='ios'?64:44,\n\t\tpaddingTop:Platform.OS=='ios'?14:0,\n\t\tbackgroundColor:'#ff6400',\n\t\tjustifyContent: 'center',\n\t\talignItems: 'center',\n\t},\n\ttitle:{\n\t\tcolor:'white',\n\t\tfontSize:30,\n\t\ttextAlign:'center',\n\t},\n});\n\n```\n##example\n\n\u003e 柱形图\n\n![](http://liukaixin.cn/echarts/column.png)\n\n\u003e 分析图\n\n![](http://liukaixin.cn/echarts/annular.png)\n\n\u003e 波形图\n\n![](http://liukaixin.cn/echarts/wave.png)\n\n## Install\n\n\u003e `git clone git@github.com:liukaixin01/react-native-echarts.git`\n\n\u003e `npm install`\n\n## Dev\n\n\u003e ios `react-native run-ios`\n\n\u003e android `react-native run-android`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaixinfu%2Freact-native-echarts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaixinfu%2Freact-native-echarts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaixinfu%2Freact-native-echarts/lists"}