exScript={` chart.on('click', (params) => { if(params.componentType === 'series') { window.postMessage(JSON.stringify({ type: 'select', payload: { index: params.dataIndex, }, })); } }); `}
以上就是我们封装的响应式 WebChart 组件及使用,完整代码请参见:react-native-echarts-demo。
在使用中,还有以下几个坑未解决,目前只能绕过,欢迎知道的同学指正:
在 IOS 中,Echarts 好像渲染不出透明的效果,用 rgba 设置的颜色不能正常
React Native 的 WebView 好像 style.height 属性无效,因此不得不在外面套了个 View
按现在的资源加载方式,index.html 在 Android 上会有两份。因为平台判断是运行时进行的,哪怕分开设置 index.anroid.js 和 index.ios.js 打包时也会都打包进去,而 Android 中又必须手动添加 assets
index.html 中必须内联引入 Echarts 的代码,外部引用单独的 js 文件好像无效