Android cannot respond to click events

yinyanli commented 1 year ago

zhiqingchen commented 1 year ago

More information is needed

demo or code
the corresponding version number, react-native, react-native-skia/react-native-svg, @wuba/react-native-echarts

yinyanli commented 1 year ago

版本： react-native: 0.62.2 react-native-svg: 12.1.0 echarts: 5.4.2 @wuba/react-native-echarts: 1.2.0 问题：没有收到showTip事件问题代码：

import React, { useRef, useEffect, useMemo, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
import {
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  MarkLineComponent,
  LegendComponent,
  MarkPointComponent,
} from 'echarts/components';

echarts.use([
  BarChart,
  LabelLayout,
  UniversalTransition,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  MarkLineComponent,
  LegendComponent,
  MarkPointComponent,
  SVGRenderer,
]);
export default (props) => {
  const echartsInstance = useRef(null);
  const [dataIndex, setDataIndex] = useState(0);
  const chartRef = useRef(null);
  const option = useMemo(() => {
    return {
      tooltip: {
        trigger: 'axis',
        showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: 'rgba(247, 54, 93, 0.04)',
            width: '1',
          },
        },
        backgroundColor: 'transparent',
        borderWidth: 0,
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
        formatter: function (params) {
          return '';
        },
      },
      grid: {
        top: 30,
        left: 10,
        right: 10,
        bottom: 20,
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: props.series.map((item) => item.name),
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: 'rgba(0,0,0,0.5)',
          fontSize: 10,
          fontWeight: 400,
          formatter(value: string) {
            return value?.replace?.('岁', '');
          },
          interval: 0,
        },

        axisLine: {
          lineStyle: {
            color: '#EAEAEA',
            width: 0.5,
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: 'rgba(0,0,0,0.5)',
          fontSize: 10,
          fontWeight: 400,
          formatter(value: number) {
            return `${value.toFixed(1).replace('.0', '')}%`;
          },
        },
        splitLine: {
          lineStyle: {
            color: '#EAEAEA',
            width: 0.5,
          },
        },
      },
      series: [
        {
          type: 'bar',
          barWidth: 12,
          data: props.series,
          itemStyle: {
            normal: {
              color: '#F7365D',
              barBorderRadius: [6, 6, 0, 0],
            },
          },
          markPoint: {
            data: [
              {
                coord: [dataIndex, props.series[dataIndex].value],
                value: props.series[dataIndex].value + '%',
                symbolSize: 0,
                itemStyle: {
                  color: 'red',
                },
                label: {
                  color: 'rgba(247, 54, 93, 1)',
                  position: 'outside',
                  show: true,
                  fontSize: 13,
                  fontFamily: 'DIN Alternate',
                },
              },
            ],
            symbol: 'circle',
          },
        },
      ],
    };
  }, [props.series, dataIndex]);
  function initChart() {
    echartsInstance.current = echarts.init(chartRef.current, 'light', {
      renderer: 'svg',
      width: 300,
      height: props.chartHeight,
    });
    setTimeout(() => {
      echartsInstance.current.dispatchAction({
        type: 'showTip',
        seriesIndex: 0, // 针对series下第几个数据
        dataIndex: 0, // 第几个数据
      });
    }, 10);
  }
  function paintChart(notMerge = false, lazyUpdate = true): void {
    console.log('paintChart', option);
    echartsInstance.current?.setOption(option, notMerge, lazyUpdate);
  }
  useEffect(() => {
    paintChart();
  }, [props.series, dataIndex]);
  useEffect(() => {
    initChart();
    paintChart();
    echartsInstance.current?.on('showTip', (params) => {
      setDataIndex(params.dataIndex);
    });
  }, []);
  return <SvgChart ref={chartRef} />;
};

iambool commented 1 year ago

尝试复现，目前安卓和ios都能触发showtip，请问这个效果不符合预期吗？ show

yinyanli commented 1 year ago

@iambool 你的看起来符合预期的，但是在我的设备上，安卓点击没反应，ios正常，能分享下你的demo吗

iambool commented 1 year ago

@iambool 你的看起来符合预期的，但是在我的设备上，安卓点击没反应，ios正常，能分享下你的demo吗

我就是用你的demo做的实验，只是加了些打印信息

import React, { useRef, useEffect, useMemo, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
import {
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  MarkLineComponent,
  LegendComponent,
  MarkPointComponent,
} from 'echarts/components';
import { showToast } from '@tarojs/taro';

echarts.use([
  BarChart,
  LabelLayout,
  UniversalTransition,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  MarkLineComponent,
  LegendComponent,
  MarkPointComponent,
  SVGRenderer,
]);
const MyChart = (props) => {
  const echartsInstance = useRef(null);
  const [dataIndex, setDataIndex] = useState(2);
  const chartRef = useRef(null);
  const option = useMemo(() => {
    return {
      tooltip: {
        trigger: 'axis',
        showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: 'rgba(247, 54, 93, 0.04)',
            width: '1',
          },
        },
        backgroundColor: 'transparent',
        borderWidth: 0,
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
        formatter: function (params) {
          return '';
        },
      },
      grid: {
        top: 30,
        left: 10,
        right: 10,
        bottom: 20,
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: props.series.map((item) => item.name),
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: 'rgba(0,0,0,0.5)',
          fontSize: 10,
          fontWeight: 400,
          formatter(value: string) {
            return value?.replace?.('岁', '');
          },
          interval: 0,
        },

        axisLine: {
          lineStyle: {
            color: '#EAEAEA',
            width: 0.5,
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: 'rgba(0,0,0,0.5)',
          fontSize: 10,
          fontWeight: 400,
          formatter(value: number) {
            return `${value.toFixed(1).replace('.0', '')}%`;
          },
        },
        splitLine: {
          lineStyle: {
            color: '#EAEAEA',
            width: 0.5,
          },
        },
      },
      series: [
        {
          type: 'bar',
          barWidth: 12,
          data: props.series,
          itemStyle: {
            normal: {
              color: '#F7365D',
              borderRadius: [6, 6, 0, 0],
            },
          },
          markPoint: {
            data: [
              {
                coord: [dataIndex, props.series[dataIndex].value],
                value: props.series[dataIndex].value + '%',
                symbolSize: 0,
                itemStyle: {
                  color: 'green',
                },
                label: {
                  color: 'rgba(247, 54, 93, 1)',
                  position: 'outside',
                  show: true,
                  fontSize: 13,
                  fontFamily: 'DIN Alternate',
                },
              },
            ],
            symbol: 'circle',
          },
        },
      ],
    };
  }, [props.series, dataIndex]);
  function initChart() {
    echartsInstance.current = echarts.init(chartRef.current, 'light', {
      renderer: 'svg',
      width: 300,
      height: props.chartHeight,
    });
    setTimeout(() => {
      echartsInstance.current.dispatchAction({
        type: 'showTip',
        seriesIndex: 0, // 针对series下第几个数据
        dataIndex: 0, // 第几个数据
      });
    }, 10);
  }
  function paintChart(notMerge = false, lazyUpdate = true): void {
    console.log('paintChart', option);
    echartsInstance.current?.setOption(option, notMerge, lazyUpdate);
  }
  useEffect(() => {
    paintChart();
  }, [props.series, dataIndex]);
  useEffect(() => {
    initChart();
    paintChart();
    echartsInstance.current?.on('showTip', (params) => {
      console.log('打印', params);
      console.log('触发========');
      showToast({
        title: '触发showTip',
      });
      setDataIndex(params.dataIndex);
    });
  }, []);
  return <SvgChart ref={chartRef} />;
};

export default () => {
  const data = {
    series: [
      {
        name: '衣服',
        value: 20,
      },
      {
        name: '裤子',
        value: 30,
      },
      {
        name: '帽子',
        value: 15,
      },
    ],
    chartHeight: 300,
  };
  return <MyChart {...data} />;
};

iambool commented 1 year ago

我复现时的环境：华为鸿蒙OS2.0 react-native 0.71.6 react-native-svg 13.9.0

其余依赖跟你在上方贴的一致

wuba / react-native-echarts

Android cannot respond to click events #74