tooltips 自定义添加点击事件

react-native-echarts-pro【1.8.6】 react-native version【0.69.4】 react-native-webview 【11.23.0】 Platform【ios】 TypeScript

这个PR应该就可以满足，但是我试了下好像没有成功,请问有demo吗？下面代码的效果就是弹不出tooltip。为tooltip内部添加更丰富的事件，如点击事件等，满足更复杂的交互代码： tooltip:

tooltip: { triggerOn: 'click', enterable: true, trigger: 'axis', axisPointer: { type: 'shadow', }, formatter: function (params: any) { const result = params.data return <div ontouchstart=tooltipEvent(${JSON.stringify({ name: 'event1', value: result.name, })})>${result.name}</div> // return '<div ontouchstart=tooltipEvent(' + JSON.stringify({name:'event1',value:result.name}) + ')>' + result.name + '

https://github.com/supervons/react-native-echarts-pro/pull/15

这个PR下有个示例，可以复制直接运行。

import React, {
  Component
} from "react";
import {
  View,
} from "react-native";
import Echarts from "react-native-echarts-pro";

export default class Echart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      option: {
        color: [
          "#9bb474",
          "#7699c2",
          "#caa3e7",
          "#86ba86",
          "#7b9ea0",
          "#ba9a79",
          "#414d52",
          "#f2c086",
          "#799de9",
          "#667b90",
          "#a26b7c",
          "#b05c54"
        ],
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          enterable: true,
          confine: true,
          formatter: function (params) {
            const result = params.data
            return `<div ontouchstart=tooltipEvent(${JSON.stringify({name:'event1',value:result.name})})>${result.name}</div>`;
            // return '<div ontouchstart=tooltipEvent(' + JSON.stringify({name:'event1',value:result.name}) + ')>' + result.name + '</div>'
          }
        },
        series: [{
          name: "访问来源",
          type: "pie",
          radius: "50%",
          data: [{
              value: 1048,
              name: "搜索引擎"
            },
            {
              value: 735,
              name: "直接访问"
            },
            {
              value: 580,
              name: "邮件营销"
            },
            {
              value: 484,
              name: "联盟广告"
            },
            {
              value: 300,
              name: "视频广告"
            }
          ],
        }]
      }
    };
  }
  // tooltip内部事件
  tooltipEvent = (data) => {
    console.log('data', data)
    // event1的处理逻辑
    if (data.name == 'event1') {
      console.log('value', data.value)
    }
  }
  render() {
    return ( 
      <View style = {
        {
          backgroundColor: "#fff",
          flex: 1,
          justifyContent: 'center'
        }
      }>
      <Echarts 
        option = {this.state.option}
        tooltipEvent = {(data) => this.tooltipEvent(data)}
        height = {400}
      /> 
      </View>
    );
  }
}

supervons / react-native-echarts-pro

tooltips 自定义添加点击事件 #70