supervons / react-native-echarts-pro

A React-Native charts based on Apache ECharts, support various charts and map.
https://supervons.github.io/react-native-echarts-pro-docs/
MIT License
216 stars 33 forks source link

Chart doesn't show if hermes is enabled on android. #48

Closed hyunahOh closed 2 years ago

hyunahOh commented 2 years ago

I gave option like below(callback function), and chart doesn't show only at android. (I tried template variable {value}, and it works.)

...
  yAxis: {
    axisLabel: {
      formatter: function (value) {
        'show source';

        if (value >= 1000000) {
          value = value / 1000000 + 'M';
        } else if (value >= 1000) {
          value = value / 1000 + 'k';
        }

        return value;
      },
    },
...
"react-native-echarts-pro": "1.8.3",
"react-native": "0.68",
supervons commented 2 years ago

When you update to 0.68 than it don't works?

Can you give me a minimum reproducible demo code.

I'm in 0.66.4, it's works, this is my example:

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: {
      trigger: "axis",
    },
    legend: {
      type: "scroll", // 设置图例翻页
      orient: "horizontal", // 图例横
      data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        formatter: "{value} kg",
      },
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: function (value) {
          "show source";
          if (value >= 1000000) {
            value = value / 1000000 + "M";
          } else if (value >= 1000) {
            value = value / 1000 + "k";
          }
          return value;
        },
      },
    },
    series: [
      {
        name: "邮件营销",
        type: "line",
        stack: "总量",
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "联盟广告",
        type: "line",
        stack: "总量",
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "视频广告",
        type: "line",
        stack: "总量",
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "直接访问",
        type: "line",
        stack: "总量",
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: "搜索引擎",
        type: "line",
        stack: "总量",
        data: [820, 932, 901, 934, 1290, 1330, 1320],
      },
    ],
  };

  return (
    <View
      style={{
        backgroundColor: "#fff",
        height: 350,
        paddingTop: 25,
      }}>
      <RNEChartsPro
        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>
  );
}
supervons commented 2 years ago

Do not reply for a long period of time.