当series元素发生变化的时候无法正确绘制

[zhuminjunivan]

https://user-images.githubusercontent.com/16554031/221745521-68bfd892-0146-493b-a806-055edd6e94cd.mp4

当我想使用按钮控制series个数的时候，一条可以变成两条，两条却不能变成一条。 以下是demo

function StatisticsPage(props: Props) {
    let [isChecked, setChecked] = useState(false)
    return <View style={{flex: 1}}>
        <MHeader left={null} title={'统计'}/>
        <ScrollView>
            <Text style={{fontSize: 16, color: 'red'}}
                  onPress={() => {
                      setChecked(!isChecked);
                  }}
            >
                {isChecked ? '显示支出' : '隐藏支出'}
            </Text>
            <RNEChartsPro
                height={220}
                option={{
                    tooltip: {
                        trigger: 'axis',
                    },
                    grid: {
                        top: '10%',
                        bottom: '10%',
                        containLabel: false
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            boundaryGap: false,
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            axisLine: {
                                show: false, // 坐标轴不显示
                            },
                            axisLabel: {
                                show: false
                            },
                            axisTick: {
                                show: false // 坐标轴数字箭头不显示
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed', //坐标轴在 grid 区域中的分隔线为虚线
                                }
                            }
                        }
                    ],
                    series: isChecked ? [
                        {
                            name: '收入',
                            type: "line",
                            data: [10000, 200, 300, null, 400, 7],
                            itemStyle: {
                                color: THEME_COLOR
                            },
                            symbol: "none",
                            smooth: false,
                        },
                        {
                            name: '支出',
                            type: "line",
                            data: [2000, 150, 400, 1000, 8, 90, 70],
                            itemStyle: {
                                color: SECONDARY_COLOR
                            },
                            symbol: "none",
                            smooth: false,
                        }
                    ] : [
                        {
                            name: '收入',
                            type: "line",
                            data: [10000, 200, 300, null, 400, 7],
                            itemStyle: {
                                color: THEME_COLOR
                            },
                            symbol: "none",
                            smooth: false,
                        },
                    ]
                }}
            />
        </ScrollView>
    </View>
}

[zhuminjunivan]

有什么好的办法可以解决么

[zhuminjunivan]

react-native-echarts-pro【1.8.9】 react-native version【0.69.7】 react-native-webview 【11.23.0】 Platform【android】 System【13】

[supervons]

• 建议是使用 setNewOption 来对数据进行更新，文档见 setnewoption。

• 在这个场景中，可以用禁止合并来解决：

  option={{
  tooltip: {
  trigger: "axis",
  },
  // ...
  optionSetting: { // <== 添加这个属性
  notMerge: true,
  },
  }}