响应式React Native Echarts组件的介绍
这篇文章主要介绍了关于响应式React Native Echarts组件的介绍，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
近年来，随着移动端对数据可视化的要求越来越高，类似 MPAndroidChart 这样的传统图表库已经不能满足产品经理日益变态的需求。前端领域数据可视化的发展相对繁荣一些，通过 WebView 在移动端使用 Echarts 这样功能强大的前端数据可视化库，是解决问题的好办法。
React Native 开发中，由于使用的是与前端相同的 JavaScript 语言，衔接 Echarts 的工作相对顺畅些，不过一些必要的组件封装还是能够大大提高开发效率的。
Echarts 官方推荐过一个第三方封装库：react-native-echarts（注：它对应的 nmp package 名字为 native-echarts ），目前有 400+ stars 和 100+ 的周下载量，可见还是被广泛使用的。但是我们经过调研，发现 react-native-echarts 存在以下一些问题：
该库已半年多未更新，Echarts 版本停留在 3.0 ，Android 端打包需手动添加 assets 的问题也一直未处理
库的接口灵活度较低，比如只能通过 width、height 设置大小；无法使用 Echarts 扩展包；无法进行事件注册、WebView 通信等
由于用 WebView 封装 Echarts 涉及到本地 html，不是纯 JavaScript 语言层面的功能，又没有 native 代码，所以做成 nmp package 并不是一个很好的选择，写成项目里的内部组件，自己进行配置反而是更方便更灵活的方案。
因此我们决定不使用第三方的 Echarts 封装库，自己写一个通用组件 WebChart 。为方便开发中使用，该组件具有以下特点：
-
按照响应式进行设计，只需在 option 中配置好数据源，数据变化后图表就会自动刷新，更符合 React 的风格。
我们的方案是在组件每次 update 时判断传入的 option 参数是否发生变化，如果变化通过 webView.postMessage ，以 JSON 的形式传入新的 option ，通知 Echarts 重新 setOption 。
虽然 Echarts 本身会对 option 进行对比，但事先判断可以减少 update 导致的与 WebView 频繁通信，这一点在容器父组件中有大量异步请求时还是很明显的；在 WebView 内部，更新则是采用 Echarts 本身的 setOption 而无需 reload 整个 WebView
利用 WebView 的 postMessage 和 onMessage 接口，可实现图表与其它 React Native 组件的事件通信
通过组件的 exScript 参数，可为 WebView 添加任意脚本，使用灵活
由于是自己写的组件， echarts 版本、扩展包，svg/canvas 、数据增量加载都可以自己设定
Demo 与使用方法
使用与示例请参见：react-native-echarts-demo，如果你需要直接使用，可按以下步骤移植：
将根目录下的 WebChart 组件文件夹拷到你项目中合适的地方
将 /android/app/src/main/assets/web 文件夹拷到你项目同样位置，没有 assets 文件夹需手动创建。
只需以上两步就可以在项目中使用 WebChart 组件了。
如果需要进一步定制的话，Echarts 代码在以上两个文件夹中的 index.html 里 标签内，目前是放的是 4.0 完整版，无扩展包，可到官网下载所需的版本和扩展包替换；svg/canvas 、数据增量加载等可在 WebChart/index.js 中直接进行修改。在移动端，出于性能的考虑，我们一般使用 svg 的渲染模式。
WebChart 具体使用可参见 App.js ，style 的设置就和普通的 React Native 组件一样，可使用 flex ，也可设为定值。额外的三个参数：
option(object)：赋给 setOption 的参数对象，发生变化后 WebChart 内部会自动调用 setOption ，实现响应式刷新。特别注意，JSON 解析时未进行函数的处理，所以需避免使用函数式的 formatter 和类形式的 LinearGradient ，和 demo 一样使用模板式和普通对象的吧
exScript(string)：任何你想在 WebView 加载时执行的代码，一般会是事件注册之类的，推荐使用模板字面量
onMessage(function)：WebView 内部触发 postMessage 之后的回调，postMessage 需先在 exScript 中进行设置，用于图表与其它 React Native 组件的通信
当然这是根据我们的业务需要设计的参数，你完全可以自由重新设定。
Echarts与React Native组件的通信
在 React Native 的 WebView 组件中，提供了 onMessage 和 postMessage 来进行 html 与组件的双向通信，具体使用可参加文档。
利用 webView.postMessage ，WebChart 实现了通知 Echarts 执行 setOption ；在 exScript 中，可利用 window.postMessage 实现 Echarts 的事件向 React Native 组件的通信。
一般我们会约定通信的 data 为这样格式的对象：
{
type: 'someType',
payload: {
value: 111,
},
}由于 onMessage 和 postMessage 只能进行字符串的传递，在 exScript 需进行 JSON 序列化，类似这样：
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 文件好像无效
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Atas ialah kandungan terperinci 响应式React Native Echarts组件的介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Cara menggunakan antara muka php dan ECharts untuk menjana carta statistik visual
Dec 18, 2023 am 11:39 AM
Dalam konteks hari ini di mana visualisasi data menjadi semakin penting, ramai pembangun berharap untuk menggunakan pelbagai alatan untuk menjana pelbagai carta dan laporan dengan cepat supaya mereka boleh memaparkan data dengan lebih baik dan membantu pembuat keputusan membuat pertimbangan yang pantas. Dalam konteks ini, menggunakan antara muka Php dan perpustakaan ECharts boleh membantu ramai pembangun menjana carta statistik visual dengan cepat. Artikel ini akan memperkenalkan secara terperinci cara menggunakan antara muka Php dan perpustakaan ECharts untuk menjana carta statistik visual. Dalam pelaksanaan khusus, kami akan menggunakan MySQL
Langkah-langkah untuk melukis papan pemuka menggunakan antara muka ECharts dan Python
Dec 18, 2023 am 08:40 AM
Langkah-langkah untuk melukis papan pemuka menggunakan antara muka ECharts dan Python memerlukan contoh kod khusus: ECharts ialah alat visualisasi data yang sangat baik yang boleh melakukan pemprosesan data dan lukisan grafik melalui antara muka Python. Artikel ini akan memperkenalkan langkah khusus untuk melukis papan pemuka menggunakan antara muka ECharts dan Python serta menyediakan kod sampel. Kata kunci: ECharts, antara muka Python, papan pemuka, visualisasi data Pengenalan Papan pemuka ialah bentuk visualisasi data yang biasa digunakan, yang menggunakan
Cara menggunakan peta haba peta untuk memaparkan haba bandar dalam ECharts
Dec 18, 2023 pm 04:00 PM
Cara menggunakan peta haba peta untuk memaparkan haba bandar dalam ECharts ECharts ialah perpustakaan carta visual berkuasa yang menyediakan pelbagai jenis carta untuk digunakan oleh pembangun, termasuk peta haba peta. Peta haba peta boleh digunakan untuk menunjukkan populariti bandar atau wilayah, membantu kami memahami dengan cepat populariti atau kepadatan tempat yang berbeza. Artikel ini akan memperkenalkan cara menggunakan peta haba peta dalam ECharts untuk memaparkan haba bandar dan menyediakan contoh kod untuk rujukan. Pertama, kami memerlukan fail peta yang mengandungi maklumat geografi, EC
Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts
Dec 18, 2023 am 08:52 AM
Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts ECharts (pustaka carta JavaScript sumber terbuka Baidu) ialah alat visualisasi data yang berkuasa dan mudah digunakan. Ia menawarkan pelbagai jenis carta, termasuk carta garisan, carta bar, carta pai dan banyak lagi. Carta kalendar ialah jenis carta yang sangat tersendiri dan praktikal dalam ECharts, yang boleh digunakan untuk memaparkan data berkaitan masa. Artikel ini akan memperkenalkan cara menggunakan carta kalendar dalam ECharts dan memberikan contoh kod khusus. Pertama, anda perlu menggunakan
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Cara menggunakan antara muka ECharts dan php untuk menjana carta statistik
Dec 18, 2023 pm 01:47 PM
Cara menggunakan antara muka ECharts dan PHP untuk menjana carta statistik Pengenalan: Dalam pembangunan aplikasi web moden, visualisasi data ialah pautan yang sangat penting, yang boleh membantu kami memaparkan dan menganalisis data secara intuitif. ECharts ialah perpustakaan carta JavaScript sumber terbuka yang berkuasa Ia menyediakan pelbagai jenis carta dan fungsi interaktif yang kaya, dan boleh menjana pelbagai carta statistik dengan mudah. Artikel ini akan memperkenalkan cara menggunakan antara muka ECharts dan PHP untuk menjana carta statistik, dan memberikan contoh kod khusus. 1. Gambaran keseluruhan ECha
Adakah ECharts bergantung pada jQuery? Analisis mendalam
Feb 27, 2024 am 08:39 AM
Adakah ECharts perlu bergantung pada jQuery? Tafsiran terperinci memerlukan contoh kod khusus ECharts ialah perpustakaan visualisasi data yang sangat baik yang menyediakan pelbagai jenis carta dan fungsi interaktif dan digunakan secara meluas dalam pembangunan web. Apabila menggunakan ECharts, ramai orang akan mempunyai soalan: Adakah ECharts perlu bergantung pada jQuery? Artikel ini akan menerangkan perkara ini secara terperinci dan memberikan contoh kod khusus. Pertama sekali, untuk menjadi jelas, ECharts sendiri tidak bergantung pada jQuery;
Cara menggunakan histogram untuk memaparkan data dalam ECharts
Dec 18, 2023 pm 02:21 PM
Cara menggunakan histogram untuk memaparkan data dalam ECharts ECharts ialah perpustakaan visualisasi data berasaskan JavaScript yang sangat popular dan digunakan secara meluas dalam bidang visualisasi data. Antaranya, histogram ialah jenis carta yang paling biasa dan biasa digunakan, yang boleh digunakan untuk memaparkan saiz, perbandingan dan analisis trend pelbagai data berangka. Artikel ini akan memperkenalkan cara menggunakan ECharts untuk melukis histogram dan memberikan contoh kod. Pertama, kita perlu memperkenalkan perpustakaan ECharts ke dalam fail HTML, yang boleh diperkenalkan dengan cara berikut
