能否添加formatter函数字符串模版支持？

arlovip commented 1 year ago

目前，formatter只支持官方的字符串模版函数，比如tooltip中的formatter：

tooltip: {
      formatter:`{a}:{c}`,
}

1 如果直接使用函数，就不行(点击没反应，直接卡死)，比如：

formatter:function(params) {
    return params[0].name;
}

2 如果使用函数字符串，也不行，比如：

formatter:`function(params) {
    return params[0].name;
}`

如果能够添加函数字符串支持的话，我们甚至可以不用考虑hermes开启的情况下，需要添加show source避免转化成字节码的问题！并且，show source是有缺陷的，添加以后，打包发布一个版本到线上，没有任何问题，但是，如果你发布热更新补丁包的话，线上的所有添加show source的代码都不生效了！！见Function toString does not behave the same with hermes turned on #114。

这个库：@td-design/react-native-echarts可以支持函数字符串，但是有点缺陷，见我提的issue：formatter字符串模版函数解析失败，虽然我通过其他方式解决了，但是目前支持的配置太少，也还有些其他问题，用起来不方便。

因此，如果作者（或其他人）能够对这个库添加对纯函数、函数字符串模版支持的话，就可以解决很多问题。希望能够添加支持！感谢🙏

题外：目前对echarts的RN版本的三方库实在太少了，虽然也有几个都在开发中，但是都不是很完善，甚至有很多缺陷没法使用。要有能有个文档全、配置化高的RN echarts真的太好了。

supervons commented 1 year ago

感谢反馈，该功能正在 beta 测试中，可以参考下这次 #91

可以提前安装测试：

npm install react-native-echarts-pro@1.9.0-beta.0
// or
yarn add react-native-echarts-pro@1.9.0-beta.0

预计2023年3月2日发布。

supervons commented 1 year ago

文档也是有的！地址：RNE-PRO-DOCS

目前在完善补充中，诚邀大家可以一起来建设文档！！！

文档库代码地址：RNE-PRO-DOCS-WEBSITE

arlovip commented 1 year ago

npm install react-native-echarts-pro@1.9.0-beta.0

这个试了还是不行

下面这种，直接卡死了

tooltip: {
      formatter:function(params) {
             return "Test";
      },
}

下面这种，图表都不显示了

tooltip: {
      formatter:`function(params) {
             return "Test";
      }`,
}

添加show source可以显示，但是正如上面我说的，如果发布热更新，show source的函数不生效，不显示

tooltip: {
      formatter:function(params) {
             "show source";
             return "Test";
      },
}

npx react-native info

➜  chartsdemo npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M2
    Memory: 86.63 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.6.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.4.0 - /opt/homebrew/bin/npm
    Watchman: 2023.02.06.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.1 => 0.71.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

package.json

  "dependencies": {
    "@td-design/react-native-echarts": "^5.4.0",
    "react": "18.2.0",
    "react-native": "0.71.1",
    "react-native-code-push": "^7.1.0",
    "react-native-echarts-pro": "^1.9.0-beta.0",
    "react-native-webview": "^11.26.1"
  },

congshengwu commented 1 year ago

@lchenfox 你好，请问打开这个属性了么enableParseStringFunction? 这个值需要为true才能进行字符串函数解析, 可以参考这里的简单示例 #91 .

还有一个点是我看了你在这里https://github.com/thundersdata-frontend/td-design/issues/582 加的示例，比较复杂，我试了一下是无法成功渲染出来的，解析字符串函数时报了错，但是我觉得理论上是可以解决的，只不过我之前测试没有遇到过这种比较复杂的用法，我的测试和用例都比较简单，所以没发现更多问题。

arlovip commented 1 year ago

@congshengwu 我现在使用你说的示例，添加了enableParseStringFunction，使用下面这种方式可以：

tooltip: {
    formatter:`function(params) {
                    return '123';
                }`,
},

但是，如果我用双引号就连图表都加载不出来了，比如

tooltip: {
    formatter:`function(params) {
                    return "123";
                }`,
},

另外，那个复杂事例是因为我想添加tooltip中的小圆点，所以添加了div标签，因为使用函数自定义格式后，官方提供的默认小圆点就没有了。

congshengwu commented 1 year ago

@lchenfox 感谢反馈，我抽时间分析一下原因，有好的建议和修改也可以提PR

BigFaceMaster commented 1 year ago

@congshengwu 我现在使用你说的示例，添加了enableParseStringFunction，使用下面这种方式可以：
tooltip: {
    formatter:`function(params) {
                    return '123';
                }`,
},
但是，如果我用双引号就连图表都加载不出来了，比如
tooltip: {
    formatter:`function(params) {
                    return "123";
                }`,
},
另外，那个复杂事例是因为我想添加tooltip中的小圆点，所以添加了div标签，因为使用函数自定义格式后，官方提供的默认小圆点就没有了。

请问一下这个问题有新的方案吗？或者解决掉了吗？我尝试了好几种库和其他方案都没有成功呢

congshengwu commented 1 year ago

你好

我试了一下，删除源码中的这行代码后：能解决在formatter函数字符串中使用双引号"图表加载不出来的问题

do {
  result = result
    .replace('"~--demo--~', "")
    .replace('~--demo--~"', "")
    // 删除此行.replace(/\\\"/g, '"');
} while (result.indexOf("~--demo--~") >= 0);

如果删除这行没有其他影响，我觉得可以提个PR删除这行。对外部传入的Echarts option的格式化处理还是越少越好，减少意外影响，保留原始格式。

另一个问题是在tooltip中添加小圆点，在删除上面提到的源码码后，可以参考如下:

Hermes: enabled
react-native: 0.72.3
react-native-echarts-pro: 1.9.1

效果gif图:

示例代码:

// import xxx from xxx; 注意导包

function renderChart() {
  const pieOption = {
    tooltip: {
      formatter: `(param) => {
        return param.marker + "&nbsp;&nbsp;" + param.name + "：" + param.value + "<br>";
      }`,
    },
    series: [
      {
        name: 'Source',
        type: 'pie',
        legendHoverLink: true,
        hoverAnimation: true,
        avoidLabelOverlap: true,
        startAngle: 180,
        radius: '55%',
        center: ['50%', '35%'],
        data: [
          {value: 105.2, name: 'android'},
          {value: 310, name: 'iOS'},
          {value: 234, name: 'web'},
        ],
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: '#23273C',
            },
          },
        },
      },
    ],
  };
  return (
    <View style={{height: 300, paddingTop: 25}}>
      <RNEChartsPro
        enableParseStringFunction={true}
        height={250}
        option={pieOption}
      />
    </View>
  );
}

arlovip commented 1 year ago

我现在使用的是"react-native-echarts-pro": "^1.9.0"，目前的临时解决方案是使用echarts官方提供的valueFormatter解决tooltip中的单位问题，小圆点啥的保留官方的格式，我目前的需要主要是给tooltip中的值添加单位并且保留小圆点，代码示例：

tooltip: {
    valueFormatter: `function(value) {
              return '$' + value ;
     }`,
}

arlovip commented 1 year ago

@congshengwu 反馈一下最新版本1.9.1（RN 0.72.0）对应的react-native-webview依赖版本问题，目前我看react-native-echarts-pro的依赖是：

  "peerDependencies": {
    "react-native-webview": "^11.26.0"
  }

当安装react-native-webview的时候，出现依赖版本冲突：

➜  newrnversion1 git:(main) ✗ npm install --save react-native-webview 
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: newrnversion1@0.0.1
npm WARN Found: react-native-webview@11.26.1
npm WARN node_modules/react-native-webview
npm WARN   peer react-native-webview@"^11.26.0" from react-native-echarts-pro@1.9.1
npm WARN   node_modules/react-native-echarts-pro
npm WARN     react-native-echarts-pro@"^1.9.1" from the root project
npm WARN   1 more (the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-native-webview@"^11.26.0" from react-native-echarts-pro@1.9.1
npm WARN node_modules/react-native-echarts-pro
npm WARN   react-native-echarts-pro@"^1.9.1" from the root project

changed 1 package, and audited 889 packages in 2s

123 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

再执行npm install就报错：

➜  newrnversion1 git:(main) ✗ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-native-echarts-pro@1.9.1
npm ERR! Found: react-native-webview@13.2.2
npm ERR! node_modules/react-native-webview
npm ERR!   react-native-webview@"^13.2.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-webview@"^11.26.0" from react-native-echarts-pro@1.9.1
npm ERR! node_modules/react-native-echarts-pro
npm ERR!   react-native-echarts-pro@"^1.9.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react-native-webview@11.26.1
npm ERR! node_modules/react-native-webview
npm ERR!   peer react-native-webview@"^11.26.0" from react-native-echarts-pro@1.9.1
npm ERR!   node_modules/react-native-echarts-pro
npm ERR!     react-native-echarts-pro@"^1.9.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/chenlong/.npm/_logs/2023-07-17T03_32_30_270Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chenlong/.npm/_logs/2023-07-17T03_32_30_270Z-debug-0.log

因为官方的react-native-webview最新已经更新到了"react-native-webview": "^13.2.2"，看下是否这个依赖可以做兼容，或者不需要添加依赖，可以在使用文档中声明用户自己安装react-native-webview对应的版本即可。

(编辑：上面示例注释掉所说的.replace(/\\\"/g, '"');也是生效的）。

supervons / react-native-echarts-pro

能否添加formatter函数字符串模版支持？ #96