echart同页面显示同组件不同数据

需求:我要在同一个页面放两个仪表盘,一个显示立案率,一个显示结案率

效果图:echart同页面显示同组件不同数据

首先,echart同页面用同一个组件是靠id去区分,所以在子组件那一页写上了id

html :

echart同页面显示同组件不同数据

方法:echart同页面显示同组件不同数据

父组件用prop传值过来,a是id info是值

echart同页面显示同组件不同数据

echart同页面显示同组件不同数据

然后子组件那里定义prop 

echart同页面显示同组件不同数据

再到echart 组件option里面获取到传过来的值 

比如,我这里的data echart同页面显示同组件不同数据

如果想获得后台数据的话就在父组件中请求,同样的方法传值过来