{"_id":"@boisduval/react-native-secharts","_rev":"1-8d660685cab9af34b6e87922cdc73626","name":"@boisduval/react-native-secharts","dist-tags":{"latest":"1.7.0"},"versions":{"1.7.0":{"name":"@boisduval/react-native-secharts","version":"1.7.0","description":"reactnative的echarts组件","main":"main/dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/boisduval/react-native-secharts.git"},"keywords":["react-native-secharts","react-native-echarts","react-native-echart","echarts","echarts4"],"dependencies":{"prop-types":"^15.7.2"},"author":{"name":"boisduval"},"license":"MIT","bugs":{"url":"https://github.com/boisduval/react-native-secharts/issues"},"homepage":"https://github.com/boisduval/react-native-secharts#readme","directories":{"example":"example"},"devDependencies":{},"gitHead":"77d01d518cab6cf09d4dafa23e4419d187716680","_id":"@boisduval/react-native-secharts@1.7.0","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-6/7TvoMGatOYOwVF/XYqmS2zQtphfA7NED3GrW1IyEEXamgqU+af/CwEcRG/T6jCgFpVVlv0U8IBkRMYTEbbkg==","shasum":"eb4cdab7d670de49e0e8284e9f4c5c8ef303b24b","tarball":"https://registry.npmjs.org/@boisduval/react-native-secharts/-/react-native-secharts-1.7.0.tgz","fileCount":9,"unpackedSize":768303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2dpMCRA9TVsSAnZWagAAHeUP/1IyG3vOR1mndH302V2s\n8KRBT5rZwkftzLy/0FEV3PankkHgMslb4BR5BOuevWau3SyQAHuP/hfrJrcb\n13eGSDM5PMrPeowabewpIeGp/I1JPb43Z03P8g0/hhUu6C4xHORMPXzomapR\nzbWfDPjPvhB8ltrgtueRa3/zOtHls9Q6r3dU+jo4wDd35QA+DadZy5flw6EC\nfr8jbDjsAg/6WyoC1mW6LlJeFOJRAkLyuq64I9VZIWXBT6MGX8CeqKn7Lsde\nP8MNvjixdxNAjQTz70Jt2fPbtkS6F+SaZIsd6aA6lWWKmTiDFnryKK08TvWm\nmg9AQpm7mQVXVJdFODOxd/D3T/W7TuMaZB3Ji4FdrFTiEOD5nppGyqdwegkV\n2mFNg8GXSvjwZsW7M9p1Gv0DQza3NP4hskE1tr5lzggCmiFVGfSq0qmvDsv3\n2/jK5M4M2vgASpxPbpTsr4KuwOCKhzltXZRMYfWWjFL+L8TsQ6BX+IUSXfMf\njNPNXbgcXs855Abh3whINtnNSRPjsLm6r/qzkPEZls+EmxB41fayjzXdjqpZ\nuroLkR0GACehFXNDpKSsZ94CAO9tKOtk+O4JPlarIpVOmWfqgk2DDcjh03np\n+EL43qUCyga0+QaCnroiM64E4MLaznLRm6iEN4g7y65lOk3JBH0YSEiWv1gm\n6wAl\r\n=NvI5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGSAIOvsE6STumbGgnPtTTF1gikICQqzSK+VxhMk9Re9AiBJhNne7WxIBTk/+ofWTdPYJfkWbeyVUUlN6X8boe/Lsw=="}]},"_npmUser":{"name":"boisduval","email":"sniksil@126.com"},"maintainers":[{"name":"boisduval","email":"sniksil@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-secharts_1.7.0_1608112716369_0.8069246857547216"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-16T09:58:36.334Z","1.7.0":"2020-12-16T09:58:36.589Z","modified":"2022-04-04T19:59:17.046Z"},"maintainers":[{"name":"boisduval","email":"sniksil@126.com"}],"description":"reactnative的echarts组件","homepage":"https://github.com/boisduval/react-native-secharts#readme","keywords":["react-native-secharts","react-native-echarts","react-native-echart","echarts","echarts4"],"repository":{"type":"git","url":"git+https://github.com/boisduval/react-native-secharts.git"},"author":{"name":"boisduval"},"bugs":{"url":"https://github.com/boisduval/react-native-secharts/issues"},"license":"MIT","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 >= 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 >= 0.57 && react-native < 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 < 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 && linux \n```bash\ncp node_modules/react-native-secharts/main/dist/index.html android/app/src/main/assets/echarts/ && 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/ && 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<Echarts option={{}} height={400}/>\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    | ()=><View style={{backgroundColor: 'rgba(0,0,0,0)'}}/>  | loading时遮罩  |\n| onPress         | func    | (e)=>{}                                                 | 点击事件  |\n\n\n## 实例方法\n| 方法名称         | 参数                            | 备注 |\n| -------------   | -------                        | ------------- |\n| setOption       | (option: Object, notMerge?: boolean, lazyUpdate?: boolean) |  参数参考：http://echarts.baidu.com/api.html#echartsInstance.setOption |\n| getImage        | (base64)=>{}                   |  返回函数的参数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      <View style={styles.container}>\n        <View><Echarts ref={this.echart1} option={this.state.option1} onPress={this.onPress} height={300} /></View>\n        <View style={{padding: 20, alignItems: \"center\"}}><Text>{`当前state内状态: falg = ${this.state.flag.toString()}`}</Text></View>\n        <TouchableOpacity onPress={this.editOption}>\n          <Text>点我改变echarts option</Text>\n        </TouchableOpacity>\n        <Text numberOfLines={1}>{!this.state.image ? '这里显示base64格式的img字符串' : this.state.image}</Text>\n        <TouchableOpacity onPress={this.getImage}>\n          <Text>点我获取echarts image</Text>\n        </TouchableOpacity>\n        <TouchableOpacity onPress={() => this.setState({flag: !this.state.flag})}>\n          <Text>点我测试option 改变后进行setState</Text>\n        </TouchableOpacity>\n      </View>\n    );\n  }\n\n  editOption = () => {\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","readmeFilename":"README.md"}