我封装了个基于skia的版本，走的是canvas api

[ShaoGongBra]

地址在这里，与这个库里面使用skia的版本做对比的话，性能有明显的提升
https://github.com/duxapp/react-native-echarts
另外还封装了 chartjs 图表
https://github.com/duxapp/react-native-chartjs

这一切其实都是基于封装了一套基本满足标准canvas的api库

https://github.com/duxapp/react-native-canvas

这个canvas库比现在RN上所有的canvas方案性能都要高不少 包括 gcanvas、基于网页的canvas以及expo的canvas方案。并且绝大部分常见的API都已经支持调用了

大家有兴趣可以研究一下

[vcup]

我尝试了一下 @duxapp/react-native-echarts，渲染不出汉字，可能是skia那边需要配置？

• 组件内部使用 echarts/dist/echarts.js 完整入口，避开 Expo/Metro 对 ECharts 按需 ESM 入口的兼容问题。

我发现您的代码库中没有 register.registerPainter('canvas', ...)，文档中提到的这个问题可能是按需加载时需要注册对应paitner而没有提供。我将import * as echarts from 'echarts/dist/echarts.js'改为import * as echarts from 'echarts/core'后，再使用

import * as echarts from 'echarts/core'
import CanvasPainter from 'zrender/lib/canvas/Painter'
echarts.use([
  register => {
    register.registerPainter('canvas', CanvasPainter)
  },
])

可以渲染出图表。

[ShaoGongBra]

中文你还不是用的模拟器。你用真机试试看

我尝试了一下 @duxapp/react-native-echarts，渲染不出汉字，可能是skia那边需要配置？

• 组件内部使用 echarts/dist/echarts.js 完整入口，避开 Expo/Metro 对 ECharts 按需 ESM 入口的兼容问题。

我发现您的代码库中没有 register.registerPainter('canvas', ...)，文档中提到的这个问题可能是按需加载时需要注册对应paitner而没有提供。我将import * as echarts from 'echarts/dist/echarts.js'改为import * as echarts from 'echarts/core'后，再使用

import * as echarts from 'echarts/core'
import CanvasPainter from 'zrender/lib/canvas/Painter'
echarts.use([
register => {
register.registerPainter('canvas', CanvasPainter)
},
])
可以渲染出图表。

[vcup]

我试了真机，同样会乱码。主要是使用 @wuba/react-native-echarts 的时候并没有这个情况，汉字可以正确渲染。
不论是组件内部使用echarts/dist/echarts.js还是echarts/core的导入，都存在乱码。

Details

import { Chart } from '@duxapp/react-native-echarts'
const lineOption = {
  xAxis: {
    type: 'category',
    data: ['月', '火', '水', '木', '金', '土', '日'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true,
    },
  ],
}


<Chart
  style={{
    width: '100%',
    height: '70%',
  }}
  option={lineOption}
/>