为什么当图表类型更改时，在 vue(spa) 中无法正确呈现 apexchart？

如何解决为什么当图表类型更改时，在 vue(spa) 中无法正确呈现 apexchart？

我有一个带有 3 种图形的 v-tab 项栏，所有图形都必须显示来自单个变量的数据。从 v-select 中选择一个选项时正在更新变量。 它第一次正确呈现，但是在更改选项后，所有数据在除 xaxis 类别之外的所有图表中都正确呈现。 xaxis 值不会出现在刻度上。但在工具提示视图中可见。 在调整窗口大小时，数据再次出现，无法在更改时强制渲染图表。 需要一些帮助。

    <v-tabs
                      center-active
                      v-model="ctab"
                      color="#a24187"
                      slider-color="#a24187"
                    >
                      <v-tab >
                        <v-icon color="#2E93fA">mdi-poll</v-icon> Bar</v-tab
                      >
                      <v-tab >
                        <v-icon color="#2E93fA">mdi-chart-timeline-variant</v-icon>Line
                      </v-tab>
                      <v-tab >
                        <v-icon color="#2E93fA">mdi-scatter-plot</v-icon> Scatter</v-tab
                      >
                    </v-tabs>
                    <v-tabs-items v-model="ctab" class="px-2">
                      <v-tab-item>

                        <apexchart
                          ref="chart"
                          width="700"
                          height="260"
                          type="bar"
                          :options="chartoptions"
                          :series="sr"
                        ></apexchart>
                      </v-tab-item>

                      <v-tab-item>
                        <apexchart
                          ref="chart"
                          width="700"
                          height="260"
                          type="line"
                          :options="chartoptions"
                          :series="sr"
                        ></apexchart>
                      </v-tab-item>

                      <v-tab-item>
                        <apexchart
                          ref="chart"
                          width="700"
                          height="260"
                          type="scatter"
                          :options="chartoptions"
                          :series="sr"
                        ></apexchart>
                      </v-tab-item>
                    </v-tabs-items>

正在使用的变量和属性

 sr: [
      {
        name: "",data: [],},],chartoptions: {
      chart: {
        id: "UNChart",xaxis: {
        categories: [],axisBorder: {
          show: true,color: "#a24187",height: 1,width: "100%",offsetX: 0,offsetY: 0,axisTicks: {
          show: true,borderType: "solid",height: 6,yaxis: {
        axisBorder: {
          show: true,width: 6,title: {
        text: undefined,align: "left",margin: 10,floating: false,style: {
          fontSize: "14px",fontWeight: "bold",fontFamily: undefined,color: "#263238",

用于获取数据的方法

showchart() {
      this.tempData = [];
      this.tempCategory = [];
      this.sr[0].data = [];
      this.sr[0].name = "";
      this.chartoptions.xaxis.categories = [];
      for (let index = 0; index < this.newdata.length; index++) {
        if (this.criteria === this.newdata[index].specific_title) {
          this.tempData.push(this.newdata[index].current_value);
          this.tempCategory.push(this.newdata[index].specific_name);
        }
      }
      // ApexCharts.exec(
      //   "UNChart",//   "updateOptions",//   {
      //     xaxis: {
      //       categories: this.tempCategory,//     },//   },//   false,//   true
      // );

      // ApexCharts.exec(
      //   "UNChart",//   "updateSeries",//   [
      //     {
      //       data: this.tempData,//       name: this.criteria,//   ],//   true
      // );

      this.sr = [
        {
          name: this.criteria,data: this.tempData,];
      this.chartoptions = {
        ...this.chartoptions,...{
          xaxis: { categories: this.tempCategory },title: { text: this.filter.theme.name },};

      // this.$refs.chart.updateOptions({ xaxis: { categories: this.tempCategory } });
    },

1

2

3

4

5