Vue.js 是否可以基于父组件的道具在extends:属性中动态添加图表类型？

我有一个vue chartjs组件，它导入整个vue chartjs库。我的想法是，是否有可能以某种方式传递我想要的图表类型，并将其添加到“extends:VueCharts.charttype？”，在我提供的示例中，它扩展了VueCharts.Line，我需要动态插值此属性，并从道具传递。这种图表类型是否可能动态地来自父道具，以及如何来自父道具

<script>
import { VueCharts } from "vue-chartjs";

export default {
  extends: VueCharts.Line,
  props: ["chartdata", "options"],
  mounted() {
    this.renderChart(this.chartdata, this.options);
  }
}
</script>
<style scoped>

</style>

从“vue chartjs”导入{VueCharts}；
导出默认值{
扩展：VueCharts.Line，
道具：[“图表数据”，“选项”]，
安装的（）{
this.renderChart（this.chartdata，this.options）；
}
}

由于扩展与mixin相同，您需要传递一个动态mixin，为此您需要两个组件，假设我们有组件ChartWrapper：

<template>
  <div>
    <div>{{ chartType }}</div>
    <chart :chart-data="datacollection"/>
  </div>
</template>

<script>
import Chart from "./Chart";
import { VueCharts, mixins } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
  name: "ChartWrapper",
  components: {
    Chart
  },
  props: {
    chartType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      datacollection: {
        labels: [this.getRandomInt(), this.getRandomInt()],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [this.getRandomInt(), this.getRandomInt()]
          },
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [this.getRandomInt(), this.getRandomInt()]
          }
        ]
      }
    };
  },
  methods: {
    getRandomInt() {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5;
    }
  },
  created() {
    if (this.chartType) {
      Chart.mixins = [reactiveProp,VueCharts[this.chartType]];
    }
  }
};
</script>

{{chartType}}
从“/Chart”导入图表；
从“vue chartjs”导入{VueCharts，mixins}；
const{reactiveProp}=mixins；
导出默认值{
名称：“ChartWrapper”，
组成部分：{
图表
},
道具：{
图表类型：{
类型：字符串，
必填项：true
}
},
数据（）{
返回{
数据收集：{
标签：[this.getRandomInt（），this.getRandomInt（）]，
数据集：[
{
标签：“数据一号”，
背景颜色：“f87979”，
数据：[this.getRandomInt（），this.getRandomInt（）]
},
{
标签：“数据一号”，
背景颜色：“f87979”，
数据：[this.getRandomInt（），this.getRandomInt（）]
}
]
}
};
},
方法：{
getRandomInt（）{
返回Math.floor（Math.random（）*（50-5+1））+5；
}
},
创建（）{
if（此.chartType）{
Chart.mixins=[reactiveProp，VueCharts[this.chartType]]；
}
}
};

该组件将chartType作为道具，我将所有图表作为VueCharts导入脚本顶部==>1

第二部分：

<script>
export default {
  props: ["options"],
  mounted() {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options);
  }
};
</script>

<ChartWrapper chartType="Bar"/>

导出默认值{
道具：[“选项”]，
安装的（）{
//此.chartData是在mixin中创建的。
//如果要传递选项，请创建本地选项对象
this.renderChart（this.chartData，this.options）；
}
};

第二个组件只有选项道具，并且调用了renderChart函数。 ==>2

发生了什么事？

ChartWrapper组件通过chartType prop接收图表类型，在创建的钩子中，如果存在chartType，则将图表（由VueCharts[this.chartType]解析）作为reactiveProp之外的混合项分配给图表组件， 我还将图表数据传递给图表组件

最后，调用ChartWrapper组件：

<script>
export default {
  props: ["options"],
  mounted() {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options);
  }
};
</script>

<ChartWrapper chartType="Bar"/>

---

代码沙盒上的实时示例：

您还可以选择仅扩展折线图并使用所需的图表类型更新图表的配置，并对其进行更新，使其更改类型

从“vue chartjs”导入{Line，mixins}；
const{reactiveProp}=mixins；
导出默认值{
扩展：行，
名称：“线条图”，
mixins:[reactiveProp]，
道具：{
选项：{type:Object}，
图表类型：{type:String}
},
挂载（）{
this.renderChart（this.chartData，this.options）；
},
观察：{
选项：{
深：是的，
处理程序（）{
this.$data.\u chart.options=this.options；
这个.updateChart（）；
}
},
图表类型（newVal）{
此.$data.\u chart.config.type=newVal；
this.updateChart（）
}
},
方法：{
updateChart（）{
这是.$data._chart.update（）；
},
}
}

谢谢你，伙计！它解决了我的问题！我欠你一杯啤酒！