supervons
点击柱状图高亮聚焦有问题[Android&iOS]
const option = {
tooltip: {
trigger: 'axis',
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
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: 2,
shadowBlur: 2,
shadowColor: 'red',
},
},
data: ["--", "--", "--", "4637412.56", "--", "4755.73", "2804.98"],
},
{
name: 'Email',
type: 'bar',
stack: 'Ad',
itemStyle: {
emphasis: {
barBorderWidth: 2,
shadowBlur: 2,
shadowColor: 'red',
},
},
data: ["--", "--", "--", "-33541.57", "--", "317.68", "316.86"],
},
],
};
如图：
点击后，tooltip显示的是对应2023-09-11的数据，但是2023-09-12柱状图高亮了。
@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>
);
}
视频演示
https://github.com/supervons/react-native-echarts-pro/assets/22851821/cfad7c17-db7e-40a0-96ef-24eb12e93679
说明
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）另一个安装的新问题，在安装了[email protected]后，再安装: npm install --save react-native-webview，会出现版本兼容问题：
➜ testchartsss npm install --save react-native-webview
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react-native-webview
npm WARN peer react-native-webview@"^11.26.0" from [email protected]
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 [email protected]
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的触发指针和柱状图不是同步的！要么就是有其他替代方案，或者找到根本原因，看官方能否修改。