点击柱状图高亮聚焦有问题[Android&iOS]

[arlovip]

		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]

试了下没复现，建议：
1、描述机型等详细信息，录制下复现步骤；
2、可以在 Echarts PC端复制参数看看是兼容问题还是官方库问题。

[arlovip]

@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>
  );
}

视频演示

IMG_5538.mp4

说明

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"
  }
}

[arlovip]

顺便补充最新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

[arlovip]

@congshengwu 这个问题极大概率是 echarts 版本的原因，因为我把react-native-echarts-pro/src/components/Echarts/index.js中的WebView的source所引用的文件改成很老的版本的资源文件，就没有问题。因此麻烦有空的话可以升级一下echarts的版本。我的修改如下：

1. 修改WebView的source

source={{uri: 'file:///android_asset/tpl.html'}}

2. 在android/app/src/main/assets/目录下添加tpl.html资源文件，这个文件可以下载：tpl.html.zip 。

然后实测并没有问题，因此我认为是echarts版本导致的！（PS：如果升级了新版本，可以艾特我尝试一下是否还存在此问题）

另外，我试了好多手机都存在我提的这个问题，不知道你为啥没有试出来呢？这个是必现的BUG，按照我复现的步骤到点击几次，一定会出现的。

[arlovip]

@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的触发指针和柱状图不是同步的！要么就是有其他替代方案，或者找到根本原因，看官方能否修改。