search

supervons / react-native-echarts-pro

A React-Native charts based on Apache ECharts, support various charts and map.
https://supervons.github.io/react-native-echarts-pro-docs/
MIT License
216 stars 32 forks source link

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

Open arlovip opened 11 months ago

arlovip commented 11 months ago 
        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 commented 8 months ago
image

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

arlovip commented 8 months ago

@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中间的位置（大概），就会出现这两个柱状图都高亮了，如下图

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 commented 8 months ago

顺便补充最新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
arlovip commented 7 months ago

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

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

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

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

arlovip commented 7 months ago

@supervons @congshengwu 经过多遍尝试，这个问题的确是我说的是echarts版本的问题，修改echarts.min.js中的内容，结果：

强烈建议将echarts.min.js中的内容降级为5.3.3版本，因为5.4.0及以上版本都存在这个问题，这个问题影响挺严重，因为他导致用户点击的时候，看到的tooltip中的数据不是当前点击的数据，tooltip的触发指针和柱状图不是同步的！要么就是有其他替代方案，或者找到根本原因，看官方能否修改。