如何抽象vue组件？

Question

最近做的项目是图标展示，一个页面可能有6 7个图表，没个图表的展示形式一样。只是接口不一样，有的是一个接口的数据绘制两到三张表，有的是一个接口一张表，我现在的做法是抽取vue组件，以接口的形式区分，一个接口渲染的图表做为一个组件，然后引入到页面中。
最后大概是这个样子

<template>
  <div>
    <template v-if="searchData.clusterId">
      <data-analysis-one :data="searchData"></data-analysis-one>
      <data-analysis-three :data="searchData"></data-analysis-three>
      <data-analysis-two :data="searchData"></data-analysis-two>
    </template>
  </div>
</template>

<script>
import DataAnalysisOne from './DataAnalysisOne'
import DataAnalysisTwo from './DataAnalysisTwo'
import DataAnalysisThree from './DataAnalysisThree'
export default {
  props: {
    searchData: Object
  },
  components: {
      DataAnalysisOne,
      DataAnalysisTwo,
      DataAnalysisThree
  }
}
</script>

DataAnalysisOne、DataAnalysisTwo、DataAnalysisThree每个组件中都有图表绘制（单个或者多个），
然后这三个组件的结构基本上差不多，自己能力不够，不知道再怎么去抽象，请各位大佬给点建议

Answer 1

那就写成一个组件，传不同数据过去就好了啊！如果每个组件想做区分，在传一个type值过去做区分不就可以了

Answer 2

你这不已经写成组件形式了么，复用就完事儿了
如果需要扩展性更强的 可以看下 mixins