tooltip formatter 使用外部变量的时候，tooltip 会卡死

[lucyanddarlin]

tooltip formatter 使用外部变量的时候，tooltip 会卡死

"react-native-echarts-pro": 1.9.1

      <RNEChartsPro
        option={getChartsOptions(
          units,
          xData,
          yData,
          primaryColor,
          primaryColor
        )}
        height={430}
        webViewSettings={{
          scrollEnabled: false,
        }}
      />

  cosnt getChartsOptions = (
    units: Array<string>,
    xData: Array<string>,
    yData: Array<Array<number>>,
    lineColor: string,
    colorStart: string,
    colorEnd: string = whiteColor
  ) => {
    return {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xData,
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '10%'],
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params: any) {
          let tip = ''
          if (params != null && params.length > 0) {
            tip += params[0].name + '<br />'
            for (let i = 0; i < params.length; i++) {
              let value = params[i].value
              // 在这里使用 units 参数，导致 tooltip 卡死了
              tip += (value ? value.toString() + units[i] : '0') + '<br />'
            }
          }
          return tip
        },
      },
      series: yData.map((y, i) => ({
        type: 'line',
        smooth: true,
        symbol: 'none',
        sampling: 'lttb',
        itemStyle: {
          normal: {
            lineStyle: {
              color: lineColor,
              width: 1.5, //设置线条粗细
            },
          },
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: i === 0 ? colorStart : colorEnd, // color at 0%
              },
              {
                offset: 1,
                color: i === 0 ? colorEnd : colorStart, // color at 100%
              },
            ],
            global: false,
          },
        },
        data: y,
      })),
      grid: {
        top: 50,
        bottom: 20,
        left: 20,
      },
    }
  },
}

[supervons]

  <RNEChartsPro
    option={getChartsOptions(
    units,
    xData,
    yData,
    primaryColor,
    primaryColor
  )}
    height={430}
    webViewSettings={{
    scrollEnabled: false,
  }}
/>

这里的 units 等值能否也提供下，方便复现。

[hejun041]

确实有这个问题，目前的解决方法是将你需要使用的数据，放在params的data下面直接使用

[lucyanddarlin]

@supervons 抱歉！之前更换了邮箱导致没有及时回复...

const xData = ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"]

const yData = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0]]

const units = ['kWh']

const primaryColor = 'pink'

[lucyanddarlin]

@hejun041 你好，请问 “放在params的data下面直接使用”，具体是要传递什么 props 嘛

[hejun041]

@hejun041 你好，请问 “放在params的data下面直接使用”，具体是要传递什么 props 嘛

1.你可以参考formatterVariable这个参数
2.在你的tooltip使用到的data里面塞入你要使用的变量，然后在formatter里面params[0].data 取出来

[lucyanddarlin]

@hejun041
感谢回复，我尝试了一下：
1、虽然使用 formatterVariable 可以传递自定义数据，但是打包在线上的时候，有时候会出现自定义数据为 null 的情况
2、我在 formatter 里面打印 params[0].data ，得到的是我当前 Y 轴的数据，options 里面的 data 应该是只能传递一个 number[] 吧

[hejun041]

@hejun041 感谢回复，我尝试了一下： 1、虽然使用 formatterVariable 可以传递自定义数据，但是备份在线上的时候，偶尔会出现自定义数据为 null 的情况 2、我在 formatter 里面打印 params[0].data ，得到的是我当前Y轴的数据，选项里面的data应该是只能传递一个number[]吧

可以传对象