LineChart tooltip formatter does't work after change data

9thCosmos commented 2 years ago

`getChartOption(yAxisData) { let xAxisData = []; for (let i = 0; i < 24; i++) { xAxisData.push(i+""); }

    let xAxis = {
        type: 'category',
        nameTextStyle: {
            color: '#999999',
            fontWeight: '400',
            fontSize: 9,
            lineHeight: 15,
        },
        axisLabel: {
            showMaxLabel: true,
            interval: 3,
        },
        axisPointer: {
            show: true,
            type: 'line',
            lineStyle: {
                color: '#BCBCBC',
                width: 1,
                type: 'solid',
            },
            label: {
                show: false,
            },
        },
        data: xAxisData,
    };

    let yAxis = {
        type: 'value',
        position: 'right',
    };

    let tooltip = {
        trigger: 'axis',
        position: 'right',
        backgroundColor: '#4D4D4D',
        borderWidth: 0,
        formatter: function(params) {
            'show source';
            return "<span style='color:#ffffff80'>" + params[0].seriesName + "</span><span style='color:#ffffff;margin-left:7px;'>" + params[0].value + '</span><br/>'
                + "<span style='color:#ffffff80'>" + params[1].seriesName + "</span><span style='color:#ffffff;margin-left:7px;'>" + params[1].value + '</span><br/>'
                + "<span style='color:#ffffff80'>" + params[2].seriesName + "</span><span style='color:#ffffff;margin-left:7px;'>" + params[2].value + '</span>';
        },
    };

    return {
        xAxis,
        yAxis,
        tooltip,
        series: yAxisData,
    };
}

render() {
    return <RNEChartsPro
        option={this.getChartOption(this.props.yAxisData)}
        height={280}
        webViewSettings={{
            scrollEnabled: false,
        }}
    />;
}`

9thCosmos commented 2 years ago

"react-native-echarts-pro": "1.8.1", "react-native": "0.64.1",

9thCosmos commented 2 years ago

Formatter worked when chart show firstly, but after updated chart data, formatter doesn't work. I tried "show source", it also doesn't work.

congshengwu commented 2 years ago

Remove RNEChartsPro from render function and then add it back, trigger the hot reloading, then maybe it will work. OR go back to the previous page and then back to this page maybe work.

supervons commented 2 years ago

I'm sorry I couldn't reproduce it.

But, you can try my test:

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);

  function change() {
    echartsRef.current.setNewOption({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [180, 140, 164, 218, 135, 147, 260],
          type: "line",
        },
      ],
    });
  }

  function getChartOption(yAxisData) {
    let xAxisData = [];
    for (let i = 0; i < 24; i++) {
      xAxisData.push(i + "");
    }

    let xAxis = {
      type: "category",
      nameTextStyle: {
        color: "#999999",
        fontWeight: "400",
        fontSize: 9,
        lineHeight: 15,
      },
      axisLabel: {
        showMaxLabel: true,
        interval: 3,
      },
      axisPointer: {
        show: true,
        type: "line",
        lineStyle: {
          color: "#BCBCBC",
          width: 1,
          type: "solid",
        },
        label: {
          show: false,
        },
      },
      data: xAxisData,
    };

    let yAxis = {
      type: "value",
      position: "right",
    };

    let tooltip = {
      trigger: "axis",
      position: "right",
      backgroundColor: "#4D4D4D",
      borderWidth: 0,
      formatter: function (params) {
        ("show source");
        return "<span style='color:#ffffff80'>" + params[0].value;
      },
    };
    return {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      tooltip: tooltip,
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
  }

  return (
    <View
      style={{
        backgroundColor: "#fff",
        height: 350,
        paddingTop: 25,
      }}>
      <RNEChartsPro
        ref={echartsRef}
        option={getChartOption([200, 200, 300, 500])}
        height={280}
        webViewSettings={{
          scrollEnabled: false,
        }}
      />
      <Button title="Update" onPress={change} />
    </View>
  );
}

I update echarts data using setNewOption.

My env:

"react-native-echarts-pro": "1.8.4",
"react-native": "0.66.4",

Hope you reply.

9thCosmos commented 2 years ago

I'm sorry I couldn't reproduce it.

But, you can try my test:

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);

  function change() {
    echartsRef.current.setNewOption({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [180, 140, 164, 218, 135, 147, 260],
          type: "line",
        },
      ],
    });
  }

  function getChartOption(yAxisData) {
    let xAxisData = [];
    for (let i = 0; i < 24; i++) {
      xAxisData.push(i + "");
    }

    let xAxis = {
      type: "category",
      nameTextStyle: {
        color: "#999999",
        fontWeight: "400",
        fontSize: 9,
        lineHeight: 15,
      },
      axisLabel: {
        showMaxLabel: true,
        interval: 3,
      },
      axisPointer: {
        show: true,
        type: "line",
        lineStyle: {
          color: "#BCBCBC",
          width: 1,
          type: "solid",
        },
        label: {
          show: false,
        },
      },
      data: xAxisData,
    };

    let yAxis = {
      type: "value",
      position: "right",
    };

    let tooltip = {
      trigger: "axis",
      position: "right",
      backgroundColor: "#4D4D4D",
      borderWidth: 0,
      formatter: function (params) {
        ("show source");
        return "<span style='color:#ffffff80'>" + params[0].value;
      },
    };
    return {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      tooltip: tooltip,
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
  }

  return (
    <View
      style={{
        backgroundColor: "#fff",
        height: 350,
        paddingTop: 25,
      }}>
      <RNEChartsPro
        ref={echartsRef}
        option={getChartOption([200, 200, 300, 500])}
        height={280}
        webViewSettings={{
          scrollEnabled: false,
        }}
      />
      <Button title="Update" onPress={change} />
    </View>
  );
}

I update echarts data using setNewOption.

My env:

"react-native-echarts-pro": "1.8.4",
"react-native": "0.66.4",

Hope you reply.

It doest't work too, now I change to use the string, not the function

supervons / react-native-echarts-pro

LineChart tooltip formatter does't work after change data #55