Open arlovip opened 11 months ago
试了下没复现,建议:
1、描述机型等详细信息,录制下复现步骤;
2、可以在 Echarts
PC端复制参数看看是兼容问题还是官方库问题。
@supervons 新创建了一个工程,测试问题依然存在,尝试了多个Android
手机:三星、华为、vivo等都存在此问题。代码很简单:
import React from "react";
import { View } from "react-native";
import RNEChartsPro from "react-native-echarts-pro";
export default function RNEPDemo() {
const option = {
tooltip: { trigger: "axis" },
xAxis: [
{
type: "category",
data: ["2023-09-09", "2023-09-10", "2023-09-11", "2023-09-12", "2023-09-13", "2023-09-14", "2023-09-15"]
}
],
yAxis: [{ type: "value" }],
series: [
{
name: "Direct",
type: "bar",
itemStyle: {
emphasis: {
barBorderWidth: 5,
shadowBlur: 5,
shadowColor: "red"
}
},
data: ["--", "--", "--", "912", "--", "--", "--"]
}
]
};
return (
<View style={{ height: 300, paddingTop: 25 }}>
<RNEChartsPro height={250} option={option} />
</View>
);
}
视频演示
说明
x
轴2023-09-12
对应的数据是912
,其他值都为--
,点击的时候,尽量靠近2023-09-12
这个日期对应的值就很容易复现。同理,点击2023-09-13
的时候,尽量靠近2023-09-12
的柱状图也很容易出现tooltip
显示的日期是2023-09-13
,但是2023-09-12
的柱状图高亮了。
此外,如果把2023-09-11
的数据赋值911
,点击2023-09-11
和2023-09-12
中间的位置(大概),就会出现这两个柱状图都高亮了,如下图
排查建议:如果确定不是此库的问题,建议可以升级(替换)echarts
的官方web
版本,然后看看是否还存在此问题。
依赖信息如下
➜ testchartsss npx react-native info
info Fetching system and libraries information...
System:
OS: macOS 12.5
CPU: (8) arm64 Apple M2
Memory: 92.22 MB / 16.00 GB
Shell:
version: 5.8.1
path: /bin/zsh
Binaries:
Node:
version: 20.4.0
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.19
path: /opt/homebrew/bin/yarn
npm:
version: 9.7.2
path: /opt/homebrew/bin/npm
Watchman:
version: 2023.10.09.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /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: 2022.2 AI-222.4459.24.2221.10121639
Xcode:
version: 14.2/14C18
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.17
path: /usr/bin/javac
Ruby:
version: 2.7.5
path: /Users/chenlong/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.7
wanted: 0.72.7
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
package.json
{
"name": "testchartsss",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"react": "18.2.0",
"react-native": "0.72.7",
"react-native-echarts-pro": "^1.9.1",
"react-native-webview": "^13.6.3"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.11",
"@tsconfig/react-native": "^3.0.0",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.76.8",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"engines": {
"node": ">=16"
}
}
顺便补充最新RN
版本(0.72.7)另一个安装的新问题,在安装了react-native-echarts-pro@1.9.1
后,再安装: npm install --save react-native-webview,会出现版本兼容问题:
➜ testchartsss npm install --save react-native-webview
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: testchartsss@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 901 packages in 3s
138 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
@congshengwu 这个问题极大概率是 echarts
版本的原因,因为我把react-native-echarts-pro/src/components/Echarts/index.js
中的WebView
的source
所引用的文件改成很老的版本的资源文件,就没有问题。因此麻烦有空的话可以升级一下echarts
的版本。我的修改如下:
WebView
的source
source={{uri: 'file:///android_asset/tpl.html'}}
android/app/src/main/assets/
目录下添加tpl.html
资源文件,这个文件可以下载:tpl.html.zip 。然后实测并没有问题,因此我认为是echarts
版本导致的!(PS:如果升级了新版本,可以艾特我尝试一下是否还存在此问题)
另外,我试了好多手机都存在我提的这个问题,不知道你为啥没有试出来呢?这个是必现的BUG
,按照我复现的步骤到点击几次,一定会出现的。
@supervons @congshengwu 经过多遍尝试,这个问题的确是我说的是echarts
版本的问题,修改echarts.min.js
中的内容,结果:
echarts 5.4.0(含)
及以上的版本都会有这个问题:echarts 5.4.0。echarts 5.3.3(含)
及以下的版本都没有这个问题:echarts 5.3.3。强烈建议将echarts.min.js
中的内容降级为5.3.3
版本,因为5.4.0
及以上版本都存在这个问题,这个问题影响挺严重,因为他导致用户点击的时候,看到的tooltip
中的数据不是当前点击的数据,tooltip
的触发指针和柱状图不是同步的!要么就是有其他替代方案,或者找到根本原因,看官方能否修改。
如图:
点击后,
tooltip
显示的是对应2023-09-11
的数据,但是2023-09-12
柱状图高亮了。