使用Hermes 引擎 配置 axisLabel 的 formatter属性 会导致图表不显示

[LinMinRu]

"react": "17.0.2", "react-native": "^0.66.3",

[kchijim]

我也遇到了一样的问题。不知道库的源码是不是将options字符串化后插入到html里的，我之前使用的就是这样。使用了hermes引擎后，发现函数转字符串的结果与之前不一样了。应该是这个问题引起的不显示，为此我尝试了使用该属性传字符串的形式而非传回调函数，发现是可以渲染出图表的。

[supervons]

确实在 hermes 打开的情况下，会有这个问题。

建议先使用模版字符串形式：https://echarts.apache.org/zh/option.html#xAxis.axisLabel.formatter

formatter: '{value} kg'

目前暂时未定位到原因，会持续跟进。

[congshengwu]

这个问题我去Hermes官方库的issues里搜了一下，答案是Hermes引擎把formatter函数编译成字节码, 注入webview就运行不起来了。

如果想要启用Hermes的同时(要求0.8.1及以上版本)，还使用formatter函数，有个临时的解决方案： 在formatter函数第一行添加代码'show source';

部分示例：

xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  axisLabel: {
    formatter: (value) => {
      'show source';
      return value + '(week)';
    },
  },
}

'show source';，添加这一行后，Hermes就不会把该函数编译成字节码，formatter函数toString()的结果就是源代码，注入webview就可以正常运行。

需要注意的有两点：

1. Hermes 0.8.1才有的这个功能。
2. debug/development或者说热更新模式下是无效的，echarts仍然无法正常加载，debug模式下，首次metro load或者metro reload是不生效的，echarts仍无法展示。再次触发一次热更新比如说添加个换行，然后再触发一次echarts组件重新渲染，就可以正常显示了。具体原因不清楚，我会持续跟进这个问题。打出release包执行是没有任何问题的。

参考链接： https://github.com/facebook/hermes/issues/114 https://github.com/facebook/hermes/issues/114#issuecomment-887106990 https://github.com/facebook/hermes/issues/612

[kchijim]

@congshengwu 这个刚刚在我的项目中亲测确实可以解决，我项目目前处于rn 0.67.3版本，符合使用hermes 0.8.1及以上版本。hermes 0.8.1应该需要rn 0.65版本以上。 这种写法有点像react-native-reanimated里的'worklet'。

[ying95478]

我这边formatter函数里面设置了'show source'; 打包后，图依然出不来，不知道怎么回事。各位大佬知道什么情况吗？ const format = (value: number) => { 'show source'; return value.toFixed(scale) }