setOption 可能存在问题 仍然存在

[youngerbyte]

链接中的问题仍然存在，辛苦看一下：https://github.com/supervons/react-native-echarts-pro/issues/18

[youngerbyte]

可以使用这个解决：http://www.eslinstructor.net/jsonfn/

[supervons]

OK，感谢反馈，后续会调研下这个JSON库，如果能提供一个示例可以更快帮助提升组件库。

[youngerbyte]

OK，感谢反馈，后续会调研下这个JSON库，如果能提供一个示例可以更快帮助提升组件库。

明天我给你个demo和改进方案

[youngerbyte]

Demo如下⬇️，复现场景：替换图标数据时，A->B(如果B数据中含有formatter)则B中的formatter会被丢失 问题修复可以参考commit(备注：Android未测试，请作者自行测试): https://github.com/supervons/react-native-echarts-pro/commit/c396eac7fcb0d622d788bd7cfb201a7976b8f79a

const optionBar = {
  grid: {
    left: 100
  },
  xAxis: {
    type: 'value',
    min: 1,
    max: 5,
    interval: 1,
    axisLabel: {
      show: true,
      formatter: function (value, index) {
        if (value <= 1) return '差';
        if (value === 3) return '中';
        if (value === 5) return '优';
        return '';
      }
    }
  },
  yAxis: {
    triggerEvent: true,
    type: 'category',
    inverse: false,
    data: ['完美订单占比', '历史营业额', '五分钟确认率'],
    axisTick: {
      show: true,
      alignWithLabel: true,
    },
    axisLabel: {
      formatter: function (value) {
        const link = '去优化 >';
        return '{title|' + value + '}\n'
                + '{link|' + link + '}';
      },
      margin: 20,
      rich: {
        title: {
          color: '#1F1F1F',
        },
        link: {
           color: '#004099',
           lineHeight: 30
        }
      }
    }
  },
  series: [
    {
      name: 'City Alpha',
      type: 'bar',
      data: [1, 2, 3],
      itemStyle: {
        color: '#004099'
      },
      barMaxWidth: '20',
      barGap: 0.2,
      barCategoryGap: 1,
    },
    {
      name: 'City Beta',
      type: 'bar',
      data: [2, 3, 4],
      itemStyle: {
        color: '#2EBACA',
      },
      barMaxWidth: '20',
      barCategoryGap: 1,
    },
    {
      name: 'City Gamma',
      type: 'bar',
      data: [3, 4, 5],
      itemStyle: {
        color: 'red',
      },
      barMaxWidth: '20',
      barCategoryGap: 1,
    },
  ],
};

const optionLine = {
  xAxis: {
    type: 'category',
    data: ['09/09', '09/12', '09/15', '09/18', '09/21', '09/24', '09/27', '09/30', '10/03', '10/06', '10/09'],
    axisTick: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 6,
  },
  series: [
    {
      data: [1, 2, 3, 2.5, 2.2, 2, 2.2, 3, 3.5, 4, 4.15],
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: 'rect',
      lineStyle: {
        normal: {
          color: 'red',
        },
      },
    },
    {
      data: [1.5, 2, 2.2, 2.5, 3.2, 4, 3, 2, 2.2, 3, 4],
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: 'triangle',
    },
  ],
  tooltip: {
    trigger: 'axis',
  },
};
interface Props {
}

interface State {
  option: Object;
}

export default class Home extends PureComponent<Props, State> {
  private chartsRef = null;
  private tag: Boolean = false;
  constructor(props) {
    super(props);
    this.state = {
      option: optionLine,
    };
  }
  onTextClick = () => {
    console.log('✅onTextClick');
    const data = this.tag ? optionLine : optionBar;
    this.tag = !this.tag;
    // notMerge: true,
    this.chartsRef && this.chartsRef.setNewOption(data, { notMerge: true });
  };
  setChartsRef = ref => {
    this.chartsRef = ref;
  };
  render() {
    return (
      <View>
        <Text onPress={this.onTextClick} >点我切换</Text>
        <Charts
          ref={this.setChartsRef}
          height={600}
          width={300}
          option={this.state.option}
        />
      </View>
    );
  }
}