dispatchAction手动触发echarts事件不生效

[HelloAnnis]

react-native-echarts-pro【1.8.7】 react-native version【0.62.2】 react-native-webview 【11.22.3】 Platform【android】 System【11】 Demo：import { Text, Toast } from '@components';

import React, { useCallback, useRef, useEffect, useState } from 'react'; import { View } from 'react-native'; import RNEChartsPro from 'react-native-echarts-pro'; import { useNavigation } from '@react-navigation/native'; import { Button } from '@components';

const Demo = () => { const echartsRef = useRef(); const pieOption = { tooltip: { show: true, backgroundColor: 'rgba(255,255,255,0.8)', borderColor: '#668BEE',

  alwaysShowContent: true,
  borderWidth: 1,
  padding: [5, 10],
  textStyle: {
    color: '#24283C',
    fontSize: 12,
  },

  trigger: 'item',
  formatter: function (a) {
    return (
      '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
      a['color'] +
      ';margin-right: 5px;border-radius: 50%;}"></i>' +
      a['name'] +
      '</br>' +
      '<div style="font-size:20px;font-weight:bold;color:red">' +
      a['percent'] +
      '%' +
      '</div>'
    );
  },
},

series: [
  {
    name: '访问来源',
    type: 'pie',
    radius: '55%',
    data: [
      { value: 235, name: '视频广告' },
      { value: 274, name: '联盟广告' },
      { value: 310, name: '邮件营销' },
      { value: 335, name: '直接访问' },
      { value: 400, name: '搜索引擎' },
    ],
    roseType: 'angle',
    itemStyle: {
      normal: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
      },
    },
  },
],

}; const pieOption = { tooltip: { show: true, backgroundColor: 'rgba(255,255,255,0.8)', borderColor: '#668BEE',

  alwaysShowContent: true,
  borderWidth: 1,
  padding: [5, 10],
  textStyle: {
    color: '#24283C',
    fontSize: 12,
  },

  trigger: 'item',
  formatter: function (a) {
    return (
      '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
      a['color'] +
      ';margin-right: 5px;border-radius: 50%;}"></i>' +
      a['name'] +
      '</br>' +
      '<div style="font-size:20px;font-weight:bold;color:red">' +
      a['percent'] +
      '%' +
      '</div>'
    );
  },
},

series: [
  {
    name: '访问来源',
    type: 'pie',
    radius: '55%',
    data: [
      { value: 235, name: '视频广告' },
      { value: 274, name: '联盟广告' },
      { value: 310, name: '邮件营销' },
      { value: 335, name: '直接访问' },
      { value: 400, name: '搜索引擎' },
    ],
    roseType: 'angle',
    itemStyle: {
      normal: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
      },
    },
  },
],

};

const [visible, setVisible] = useState(true);

const navigation = useNavigation(); const echartOnclick = async () => { await echartsRef.current.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: 2, });

echartsRef.current.setNewOption({
  title: {
    text: 'ECharts demo',
  },
});

};

return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

  <Button onPress={echartOnclick}>点击</Button>
</View>

); }; export default Demo;

[supervons]

可以参考下 md 文档中代码的写法：MD代码粘贴

此外，你可以试下下面的代码，点击 Update 是可以触发的：

import React, { useRef } from "react";
import { View, Button } from "react-native";
import RNEChartsPro from "react-native-echarts-pro";
export default function ChartsComponent() {
  const echartsRef = new useRef(null);
  const pieOption = {
    tooltip: {
      show: true,
      backgroundColor: "rgba(255,255,255,0.8)",
      borderColor: "#668BEE",
      alwaysShowContent: true,
      borderWidth: 1,
      padding: [5, 10],
      textStyle: {
        color: "#24283C",
        fontSize: 12,
      },

      trigger: "item",
      formatter: function (a) {
        return (
          '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
          a["color"] +
          ';margin-right: 5px;border-radius: 50%;}"></i>' +
          a["name"] +
          "</br>" +
          '<div style="font-size:20px;font-weight:bold;color:red">' +
          a["percent"] +
          "%" +
          "</div>"
        );
      },
    },
    series: [
      {
        name: "访问来源",
        type: "pie",
        radius: "55%",
        data: [
          { value: 235, name: "视频广告" },
          { value: 274, name: "联盟广告" },
          { value: 310, name: "邮件营销" },
          { value: 335, name: "直接访问" },
          { value: 400, name: "搜索引擎" },
        ],
        roseType: "angle",
        itemStyle: {
          normal: {
            shadowBlur: 200,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  const echartOnclick = async () => {
    await echartsRef.current.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: 2,
    });
    echartsRef.current.setNewOption({
      title: {
        text: "ECharts demo",
      },
    });
  };

  return (
    <View
      style={{
        backgroundColor: "#fff",
        height: 350,
        paddingTop: 25,
      }}>
      <RNEChartsPro
        eventActions={{
          finished: () => {
            console.log(1);
          },
        }}
        ref={echartsRef}
        onPress={res => alert(JSON.stringify(res))}
        legendSelectChanged={res => alert(res)}
        height={250}
        option={pieOption}
      />
      <Button title="Update" onPress={echartOnclick} />
    </View>
  );
}