| React+echarts+antd实现折线图 | 您所在的位置：网站首页 › react折线图两条线很靠近怎么办 › React+echarts+antd实现折线图 |
React+echarts+antd实现折线图
|
使用echarts实现折线图功能，并加入antd的Tabs切换，先贴个图 如上面代码所示，我将折线图子组件放在了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赋值了，实际上都一样的。 |
如上图，我分出了三个Tabs预想的是将echarts折线图封装为一个子组件，然后三个Tabs都引入该子组件，实现切换的时候都是同一个组件，只不过渲染不同的数据源。 然而，现实与预想并不相同，我在三个Tabs的TabPane标签下都引入了，相当于创建了三个echarts，而此子组件里面的echarts使用的ID元素是同一个，一个页面中相同ID名字的元素只能有一个，可能是这个原因导致了我切换Tab的时候，折线图的数据并不会随着更新，这种情况应该也有相应的解决办法，但我没有过多尝试，采用了另一种办法【本文地址】
公司简介
联系我们