Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
arlovip opened this issue Sep 27, 2023 · 5 comments
Open

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

arlovip opened this issue Sep 27, 2023 · 5 comments
Labels
enhancement New feature or request

Comments

@arlovip
Copy link

arlovip commented Sep 27, 2023

		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"],
				},
			],
		};

如图:

IMG_4530

点击后,tooltip显示的是对应2023-09-11的数据,但是2023-09-12柱状图高亮了。

@supervons
Copy link
Owner

image

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

@arlovip
Copy link
Author

arlovip commented Dec 6, 2023

@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

说明

x2023-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-112023-09-12中间的位置(大概),就会出现这两个柱状图都高亮了,如下图

1511701831122_ pic

排查建议:如果确定不是此库的问题,建议可以升级(替换)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
Copy link
Author

arlovip commented Dec 6, 2023

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

arlovip commented Jan 4, 2024

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

  1. 修改WebViewsource
source={{uri: 'file:///android_asset/tpl.html'}}
  1. android/app/src/main/assets/目录下添加tpl.html资源文件,这个文件可以下载:tpl.html.zip

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

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

@arlovip
Copy link
Author

arlovip commented Jan 5, 2024

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

@supervons supervons added continue New discoveries will continue to follow enhancement New feature or request and removed continue New discoveries will continue to follow labels Feb 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants