Closed arlovip closed 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日发布。
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"
},
@lchenfox 你好,请问打开这个属性了么enableParseStringFunction
? 这个值需要为true才能进行字符串函数解析, 可以参考这里的简单示例 #91 .
还有一个点是我看了你在这里https://github.com/thundersdata-frontend/td-design/issues/582 加的示例,比较复杂,我试了一下是无法成功渲染出来的,解析字符串函数时报了错,但是我觉得理论上是可以解决的,只不过我之前测试没有遇到过这种比较复杂的用法,我的测试和用例都比较简单,所以没发现更多问题。
@congshengwu 我现在使用你说的示例,添加了enableParseStringFunction
,使用下面这种方式可以:
tooltip: {
formatter:`function(params) {
return '123';
}`,
},
但是,如果我用双引号就连图表都加载不出来了,比如
tooltip: {
formatter:`function(params) {
return "123";
}`,
},
另外,那个复杂事例是因为我想添加tooltip
中的小圆点,所以添加了div
标签,因为使用函数自定义格式后,官方提供的默认小圆点就没有了。
@lchenfox 感谢反馈,我抽时间分析一下原因,有好的建议和修改也可以提PR
@congshengwu 我现在使用你说的示例,添加了
enableParseStringFunction
,使用下面这种方式可以:tooltip: { formatter:`function(params) { return '123'; }`, },
但是,如果我用双引号就连图表都加载不出来了,比如
tooltip: { formatter:`function(params) { return "123"; }`, },
另外,那个复杂事例是因为我想添加
tooltip
中的小圆点,所以添加了div
标签,因为使用函数自定义格式后,官方提供的默认小圆点就没有了。
请问一下 这个问题有新的方案吗?或者解决掉了吗?我尝试了好几种库 和 其他方案都没有成功呢
你好
我试了一下,删除源码中的这行代码后:能解决在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 + " " + 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>
);
}
我现在使用的是"react-native-echarts-pro": "^1.9.0"
,目前的临时解决方案是使用echarts
官方提供的valueFormatter
解决tooltip
中的单位问题,小圆点啥的保留官方的格式,我目前的需要主要是给tooltip
中的值添加单位并且保留小圆点,代码示例:
tooltip: {
valueFormatter: `function(value) {
return '$' + value ;
}`,
}
@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, '"');
也是生效的)。
目前,
formatter
只支持官方的字符串模版函数,比如tooltip
中的formatter
:如果能够添加函数字符串支持的话,我们甚至可以不用考虑
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字符串模版函数解析失败,虽然我通过其他方式解决了,但是目前支持的配置太少,也还有些其他问题,用起来不方便。因此,如果作者(或其他人)能够对这个库添加对纯函数、函数字符串模版支持的话,就可以解决很多问题。希望能够添加支持!感谢🙏