can you tell me , how listener press line node event?

[g17628381307]

i can't listener echart events, can you teach me listener echart events?

best have a simple demo

best regards

[supervons]

Use eventActions Like this, listen selectchanged event:

import React from "react";
import { View } from "react-native";
import RNEChartsPro from "react-native-echarts-pro";

export default function RNEPDemo() {
  const pieOption = {
    series: [
      {
        name: "Source",
        type: "pie",
        legendHoverLink: true,
        hoverAnimation: true,
        avoidLabelOverlap: true,
        startAngle: 180,
        radius: "55%",
        center: ["50%", "35%"],
        data: [
          { value: 105.2, name: "android" },
          { value: 310, name: "iOS" },
          { value: 234, name: "web" },
        ],
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: "#23273C",
            },
          },
        },
      },
    ],
  };
  return (
    <View style={{ height: 300, paddingTop: 25 }}>
      <RNEChartsPro
        height={250}
        option={pieOption}
        eventActions={{
          selectchanged: res => {
            alert(JSON.stringify(res));
          },
        }}
      />
    </View>
  );
}

[g17628381307]

Use eventActions Like this, listen selectchanged event:

import React from "react";
import { View } from "react-native";
import RNEChartsPro from "react-native-echarts-pro";

export default function RNEPDemo() {
  const pieOption = {
    series: [
      {
        name: "Source",
        type: "pie",
        legendHoverLink: true,
        hoverAnimation: true,
        avoidLabelOverlap: true,
        startAngle: 180,
        radius: "55%",
        center: ["50%", "35%"],
        data: [
          { value: 105.2, name: "android" },
          { value: 310, name: "iOS" },
          { value: 234, name: "web" },
        ],
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: "#23273C",
            },
          },
        },
      },
    ],
  };
  return (
    <View style={{ height: 300, paddingTop: 25 }}>
      <RNEChartsPro
        height={250}
        option={pieOption}
        eventActions={{
          selectchanged: res => {
            alert(JSON.stringify(res));
          },
        }}
      />
    </View>
  );
}

我尝试了这种方法， 这个方法在pie图中非常好用， 可以达到我想要的效果， 但是在line图中点击line中的小节点才能触发回调函数， 这样造成了需要很精密的点击才能触发， 无法满足我的要求， 比如说自动依附到某个节点的方法怎么使用呀， 我也在echarts之中寻找了api的使用方法， 在尝试了一段时间后， 我还是无法解决这个问题， 还希望作者能够帮我解答一下这个疑惑 非常感谢作者能抽时间来解答我的个人问题问题

[supervons]

可以给拐点设置透明的边框，以扩大拐点范围，因为是透明的，故在样式上没有影响，如下：

import React, { useRef } from "react";
import { View } from "react-native";
import RNEChartsPro from "react-native-echarts-pro";
export default function ChartsComponent() {
  const echartsRef = new useRef(null);
  const pieOption = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        symbol: "circle", //拐点设置为实心
        symbolSize: 10, //拐点大小
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
        itemStyle: {
          normal: {
            color: "red", //拐点颜色
            borderColor: "#00000000", //拐点边框颜色
            borderWidth: 50, //拐点边框大小
          },
          emphasis: {
            color: "#000000", //hover拐点颜色定义
          },
        },
      },
    ],
  };

  return (
    <View
      style={{
        backgroundColor: "#fff",
        height: 350,
        paddingTop: 25,
      }}>
      <RNEChartsPro
        eventActions={{
          finished: () => {},
        }}
        ref={echartsRef}
        webViewSettings={{
          startInLoadingState: true,
          scrollEnabled: true,
          onLoadEnd: () => {
            console.log("onLoadEnd...");
          },
          style: {
            backgroundColor: "#fff",
          },
        }}
        onPress={res => alert(JSON.stringify(res))}
        legendSelectChanged={res => alert(res)}
        height={250}
        option={pieOption}
      />
    </View>
  );
}

可以试试。

[g17628381307]

可以给拐点设置透明的边框，以扩大拐点范围，因为是透明的，故在样式上没有影响，如下：

import React, { useRef } from "react";
import { View } from "react-native";
import RNEChartsPro from "react-native-echarts-pro";
export default function ChartsComponent() {
  const echartsRef = new useRef(null);
  const pieOption = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        symbol: "circle", //拐点设置为实心
        symbolSize: 10, //拐点大小
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
        itemStyle: {
          normal: {
            color: "red", //拐点颜色
            borderColor: "#00000000", //拐点边框颜色
            borderWidth: 50, //拐点边框大小
          },
          emphasis: {
            color: "#000000", //hover拐点颜色定义
          },
        },
      },
    ],
  };

  return (
    <View
      style={{
        backgroundColor: "#fff",
        height: 350,
        paddingTop: 25,
      }}>
      <RNEChartsPro
        eventActions={{
          finished: () => {},
        }}
        ref={echartsRef}
        webViewSettings={{
          startInLoadingState: true,
          scrollEnabled: true,
          onLoadEnd: () => {
            console.log("onLoadEnd...");
          },
          style: {
            backgroundColor: "#fff",
          },
        }}
        onPress={res => alert(JSON.stringify(res))}
        legendSelectChanged={res => alert(res)}
        height={250}
        option={pieOption}
      />
    </View>
  );
}

可以试试。

谢谢作者给出详细的demo和说明呀