React+echarts+antd实现折线图

使用echarts实现折线图功能，并加入antd的Tabs切换，先贴个图

如上图，我分出了三个Tabs预想的是将echarts折线图封装为一个子组件，然后三个Tabs都引入该子组件，实现切换的时候都是同一个组件，只不过渲染不同的数据源。
然而，现实与预想并不相同，我在三个Tabs的TabPane标签下都引入了，相当于创建了三个echarts，而此子组件里面的echarts使用的ID元素是同一个，一个页面中相同ID名字的元素只能有一个，可能是这个原因导致了我切换Tab的时候，折线图的数据并不会随着更新，这种情况应该也有相应的解决办法，但我没有过多尝试，采用了另一种办法

<div style={{ width: '100%', display: 'inline-block',paddingBottom:'30px' }}>
    <Tabs type="card" onChange={changeDZ}>
        <TabPane tab="生产/非生产" key="1">
        </TabPane>
        <TabPane tab="长短期" key="2">
        </TabPane>
        <TabPane tab="出访事由" key="3">
        </TabPane>
    </Tabs>
    {/* MFourthEcharts为封装的折线图子组件 */}
    <MFourthEcharts data={lineData} />
</div>

如上面代码所示，我将折线图子组件放在了Tabs组件的下面，此时布局并不会产生影响，与把放在TabPane里面是相同的效果，这样写之后只要在切换Tabs时，改变数据就可以了，达到了最开始想要的效果，这种写法也是因为想要antd的Tabs组件的这个样式。
虽然数据能够随着切换改变了，但有了新的问题，例如默认第一个tab是图中的“生产/非生产”，只有“生产/非生产”两条折线，切换到第三个tab“出访事由”时，会有10个“出访事由”的折现，等再切换回第一个“生产/非生产”tab时，错误就发生了，此时正确应该是只有“生产/非生产”两条折线，但却有十条，前两条是“生产/非生产”，后面八条折线是第三个tab的，折线图数据发生了重合。

折线图的数据展示是根据option中的series,series是一个数组，通过动态的改变series的值来动态更新折线图表，但echarts会默认将新的数据与之前的数据合并

解决办法：

myChart.setOption(option, true);

let initChart = () => {
    let serarr = []
    const newdata = dataSource ? Object.assign({}, dataSource[0]) : {};
    delete newdata.date;
    for (var i in newdata) {
        serarr.push(
            {
                name: i,
                data: newdata[i],
                type: 'line',
            }
        )
    }
    let element = document.getElementById('MfourEcharts');
    let myChart = echarts.init(element);
    if (dataa) {
        let option = {
            tooltip: {
                trigger: 'axis',
            },
            xAxis: {
                type: 'category',
                data: dataSource && dataSource[0].date
            },
            yAxis: {
                type: 'value'
            }
        };
        option.series = serarr;
        //将setOption的第二个参数设置为true即可
        myChart.setOption(option, true);
    }
};

series数组也可以直接写在option里面，测试的时候拿出来用option.series赋值了，实际上都一样的。