{"id":13486323,"url":"https://github.com/shifeng1993/react-native-secharts","last_synced_at":"2025-04-06T01:06:07.575Z","repository":{"id":32601122,"uuid":"120568386","full_name":"shifeng1993/react-native-secharts","owner":"shifeng1993","description":"一个webview封装的图表组件。基于百度echarts4","archived":false,"fork":false,"pushed_at":"2023-01-03T18:23:26.000Z","size":8176,"stargazers_count":219,"open_issues_count":54,"forks_count":56,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-30T00:07:13.833Z","etag":null,"topics":["react-native","react-native-echarts","react-native-secharts"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shifeng1993.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-07T05:38:37.000Z","updated_at":"2024-06-19T14:09:38.000Z","dependencies_parsed_at":"2023-01-14T21:45:36.098Z","dependency_job_id":null,"html_url":"https://github.com/shifeng1993/react-native-secharts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shifeng1993%2Freact-native-secharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shifeng1993%2Freact-native-secharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shifeng1993%2Freact-native-secharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shifeng1993%2Freact-native-secharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shifeng1993","download_url":"https://codeload.github.com/shifeng1993/react-native-secharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419859,"owners_count":20936012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["react-native","react-native-echarts","react-native-secharts"],"created_at":"2024-07-31T18:00:44.099Z","updated_at":"2025-04-06T01:06:07.555Z","avatar_url":"https://github.com/shifeng1993.png","language":"JavaScript","funding_links":[],"categories":["编程"],"sub_categories":["移动端"],"readme":"# react-native-secharts\n[![NPM Version](https://img.shields.io/npm/v/react-native-secharts.svg?style=flat)](https://www.npmjs.com/package/react-native-secharts)\n  [![License](http://img.shields.io/npm/l/react-native-secharts.svg?style=flat)](https://github.com/shifeng1993/react-native-echarts/blob/master/LICENSE)\n  \n一个webview封装的图表组件。基于百度echarts4，相比native-echarts有echarts自带对象支持，例如渐变色等，用法与官网相同用法。\n\necharts version 4.2.1\n\n注：react-native 最近几个版本 webview 包改动频繁，安装时请注意需要固定webview的版本，要不然会出现web与react-native通信的问题，导致api无反应，请仔细阅读安装步骤。\n\n## 安装步骤\n\n### 1. 安装依赖\n- react-native \u003e= 0.60.2\n  ```bash\n  yarn add react-native-secharts react-native-webview@androidx\n  ```\n    或者\n  ```bash\n  npm install react-native-secharts react-native-webview@androidx --save\n  ```\n  安装完成后在`android/gradle.properties`文件添加2行配置，确保在项目中启用AndroidX\n\n  注：0.60+采用自动link 安装后不需要进行link\n  \n  ```\n  android.useAndroidX=true\n  android.enableJetifier=true\n  ```\n- react-native \u003e= 0.57 \u0026\u0026 react-native \u003c 0.60.2\n  ```bash\n  yarn add react-native-secharts@1.6.1 react-native-webview@2.14.3\n  react-native link react-native-webview\n  ```\n    或者\n  ```bash\n  npm install react-native-secharts@1.6.1 react-native-webview@2.14.3 --save\n  react-native link react-native-webview\n  ```\n\n- react-native = 0.56\n  ```bash\n  yarn add react-native-secharts@1.5.3\n  ```\n    或者\n  ```bash\n  npm install react-native-secharts@1.5.3 --save\n  ```\n\n- react-native \u003c 0.56\n  ```bash\n  yarn add react-native-secharts@1.4.5\n  ```\n    或者\n  ```bash\n  npm install react-native-secharts@1.4.5 --save\n  ```\n\n### 2. 修复android release bug\n- 组件版本`1.7.0`以上（包含），不需要此步骤，请跳至`步骤3. 引用组件`\n- 在你的项目创建此路径的文件夹 `$yourProject/android/app/src/main/assets/echarts`，\n- 创建完成后请在你的项目根目录（`$yourProject/） 文件夹下使用命令\n- 以下是 mac \u0026\u0026 linux \n```bash\ncp node_modules/react-native-secharts/main/dist/index.html android/app/src/main/assets/echarts/ \u0026\u0026 cp node_modules/react-native-secharts/main/dist/Bmap.html android/app/src/main/assets/echarts/\n```\n- 以下是 windows\n```bash\ncopy node_modules/react-native-secharts/main/dist/index.html android/app/src/main/assets/echarts/ \u0026\u0026 copy node_modules/react-native-secharts/main/dist/Bmap.html android/app/src/main/assets/echarts/\n```\n\n### 3. 引用组件\n```javascript\nimport {Echarts, echarts} from 'react-native-secharts';\n```\n- 大写开头的`Echarts`是组件\n- 小写开头的`echarts`是echarts对象\n\n### 4. 使用组件\n```javascript\n\u003cEcharts option={{}} height={400}/\u003e\n```\n请看example文件夹中示例代码  \n\n链接：https://github.com/shifeng1993/react-native-secharts/tree/master/example\n\n运行示例\n```bash\n$ cd example\n$ yarn\n$ react-native run-ios  或者 $ react-native run-android  \n```\noption具体配置请参考echarts官网api http://echarts.baidu.com/api.html#echarts\n\n官方示例 http://echarts.baidu.com/examples/\n\n## props\n\n| 属性             | 类型    | 默认值                                                   | 备注 |\n| -------------   | ------- | -------------                                           | ------------- |\n| option          | obj     | null                                                    | echarts配置项，请参考echarts官网  |\n| backgroundColor | string  | 'rgba(0,0,0,0)'                                         | 图表画布背景色 |\n| width           | number  | 'auto'                                                  | 画布宽度  |\n| height          | number  | 400                                                     | 画布高度  |\n| renderLoading   | func    | ()=\u003e\u003cView style={{backgroundColor: 'rgba(0,0,0,0)'}}/\u003e  | loading时遮罩  |\n| onPress         | func    | (e)=\u003e{}                                                 | 点击事件  |\n\n\n## 实例方法\n| 方法名称         | 参数                            | 备注 |\n| -------------   | -------                        | ------------- |\n| setOption       | (option: Object, notMerge?: boolean, lazyUpdate?: boolean) |  参数参考：http://echarts.baidu.com/api.html#echartsInstance.setOption |\n| getImage        | (base64)=\u003e{}                   |  返回函数的参数base64，可结合RNFS写入相册  |\n| clear           | 无                             |  清空echarts画布  |\n\n\n## 历史版本特性\n#### 1.7.0  修复已知未知bug，增加适配androidx，更新echarts版本到4.2.1，去掉isMap属性\n#### 1.6.1  修复文档错误部分\n#### 1.6.0  修复0.57版本出现的本地不能渲染的bug。\n#### 1.5.3  修复1.5.2版本出现的不能渲染的bug，使用最新版本rn重写示例。\n#### 1.5.2  新增了必要的props使用canvas或者svg渲染\n#### 1.5.1  修复组件在重绘过程中会刷新webview的闪烁,更新echarts版本到4.2.0-rc.2\n#### 1.5.0  更新组件到支持rn0.56版本，修复ios release出现的不能渲染的bug。\n#### 1.4.5  更新echarts版本到4.1.0\n#### 1.4.4  增加echart实例方法setOption的附加参数调用，增加clear实例方法调用\n#### 1.4.3  修复设置了echarts地图，其余图表只能显示一个的问题\n#### 1.4.2  修复echarts地图不能显示的问题，目前只支持echarts最新的bmap形式。\n#### 1.4.0  更新echarts版本到4.1.0.rc2，修复图表点击事件。\n#### 1.3.9  修复formatter属性function被屏蔽的问题。\n#### 1.3.7  修复了flex：1不能显示的问题\n#### 1.3.6  修复了formatter属性不能使用clang系的转译字符，以及被误转为string的问题\n#### 1.3.3  新增获取图片getImage方法 ，使用refs获取组件实例进行使用\n#### 1.3.0  新增echarts对象，可以使用对象内对应方法，例如渐变等\n#### 1.2.0  主分支更新至echarts4\n#### 1.1.0  新增刷新option方法 ，使用refs获取组件实例进行使用\n#### 1.0.0  上传基础组件，基于echarts3封装，修复了ios android闪白，ios默认移动适配，以及android release路径问题\n\n\n## 已知bug 和 需要注意的点\n### bug\n- echarts配置项内所有的函数均无法被`new function()` 或者 `eval()`重新还原为函数, 这个bug只能找到echarts源码内的方法进行修改，后续找到地方会进行修复，请不要在提类似的bug。\n\n### 注意\n- 实例方法setOption不会保存修改后的option，这意味着在react 执行setState操作后重新render，当前state的状态会重新覆盖webview内setOption的状态，所以不推荐使用。\n\n- 目前已经修复组件因为onload发生的闪烁，这意味着可以不用组件setOption的实例方法，直接通过修改当容器组件的绑定的state值，setState操作，然后secharts组件会监听 state中option的改变，来进行option修改。当然组件实例方法setOption还是可以使用的，只是有bug，不推荐而已。\n```jsx\n  constructor(props) {\n    super(props);\n    this.state = {\n      image: '',\n      option1: {\n        xAxis: {\n          type: 'category',\n          boundaryGap: false,\n          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n        },\n        yAxis: {\n          type: 'value'\n        },\n        color: l1,\n        series: [{\n          data: [820, 932, 901, 934, 1290, 1330, 1320],\n          type: 'line',\n          areaStyle: {}\n        }]\n      },\n      flag: false  // 这个布尔值是为了测试option1在setstate操作后不会被重置成初始状态。\n    }\n    this.echart1 = React.createRef();\n  }\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cView\u003e\u003cEcharts ref={this.echart1} option={this.state.option1} onPress={this.onPress} height={300} /\u003e\u003c/View\u003e\n        \u003cView style={{padding: 20, alignItems: \"center\"}}\u003e\u003cText\u003e{`当前state内状态: falg = ${this.state.flag.toString()}`}\u003c/Text\u003e\u003c/View\u003e\n        \u003cTouchableOpacity onPress={this.editOption}\u003e\n          \u003cText\u003e点我改变echarts option\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n        \u003cText numberOfLines={1}\u003e{!this.state.image ? '这里显示base64格式的img字符串' : this.state.image}\u003c/Text\u003e\n        \u003cTouchableOpacity onPress={this.getImage}\u003e\n          \u003cText\u003e点我获取echarts image\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n        \u003cTouchableOpacity onPress={() =\u003e this.setState({flag: !this.state.flag})}\u003e\n          \u003cText\u003e点我测试option 改变后进行setState\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      \u003c/View\u003e\n    );\n  }\n\n  editOption = () =\u003e {\n-    this.echart1.current.setOption({    \n+    this.setState({\n      option1: {\n        ...this.state.option1,\n        series: [\n          {\n            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]\n          }\n        ]\n      }\n    })\n  }\n```\n\n## 以下是示例图\n\n#### 柱状图\n![image](https://github.com/shifeng1993/react-native-echarts/blob/master/image/1.gif )\n\n#### 折线图\n![image](https://github.com/shifeng1993/react-native-echarts/blob/master/image/2.gif )\n\n#### 饼状图\n![image](https://github.com/shifeng1993/react-native-echarts/blob/master/image/3.gif )\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshifeng1993%2Freact-native-secharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshifeng1993%2Freact-native-secharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshifeng1993%2Freact-native-secharts/lists"}