先看下 效果图吧
IMG_2273.PNG
IMG_2272.PNG
之前用 第三方组件 native-echarts 也实现了雷达图，但是比较复杂，而且 android 和ios 上引入tpl.html文件也不一样，而且也没有上图中的渐变，反正效果不是很好。
我算是比较幸运的，因为我们h5有做了一个版本出来，那么就可以让 后台 通过模板的形式，返回一个 页面，就可以通过webView 加载这个url 。
还有一种方式就是 自己画图，react-native-art
Android默认就包含ART库，IOS需要单独添加依赖库。具体怎么引入可参考
iOS添加 RT库
案例
这个绘图api 网上资料也不多，时间充足的情况下 可以研究下...
下面说下webView 加载echars图表 不显示问题
首先要定位下问题 ：
打开safari 调试下webview看有没有报错，
介绍下 safari 调试app 的webview:
打开safari的系统偏好设置，然后勾选开发者
image.png
如果是真机的话，打开设置 - 找到 safari --高级 - 开启web检查器，javascript
IMG_2274.PNG
然后打开safari 开发者选项
image.png
打开后发现并没有报错，这下奇怪了 什么原因导致的呢？后来刷新下 图表出现了
image.png
既然首次不出现 那就用webview 强制刷新下：利用webview 的 onLoadEnd
... ....this.onLoadEnd = this.onLoadEnd.bind(this);
if (!this.state.runNum) { //这里控制下防止不停的刷新。
let script = `location.reload()`;
this.webView.injectJavaScript(script);
this.setState({ runNum: true })
}
.........
<WebView
source={{ uri: this.state.charsUrl }}
startInLoadingState={true}
javaScriptEnabled={true}
mixedContentMode={'always'}
dataDetectorTypes={'all'}
ref={webView => this.webView = webView}
scalesPageToFit={true}
scrollEnabled={true}
injectedJavaScript={this.state.injectedJavaScript}
onLoadEnd={this.onLoadEnd}
style={{ widht: screenWidth, height: 280,marginTop:10 }}
然后问题解决了，
目前这个webview 帮我解决了很多问题，连连支付啊，七陌客服聊天系统啊，图表啊等。 也节省了好多时间。
时间够的话 还是要去做下原生集成............
