javascript - 为什么当图表类型发生变化时，apexchart 不能在 vue(spa) 中正确呈现？

Question

我有一个带有 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",
          color: "#a24187",
          height: 6,
          offsetX: 0,
          offsetY: 0,
        },
      },
      yaxis: {
        axisBorder: {
          show: true,
          color: "#a24187",
          offsetX: 0,
          offsetY: 0,
        },
        axisTicks: {
          show: true,
          borderType: "solid",
          color: "#a24187",
          width: 6,
          offsetX: 0,
          offsetY: 0,
        },
      },
      title: {
        text: undefined,
        align: "left",
        margin: 10,
        offsetX: 0,
        offsetY: 0,
        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

标签： javascriptvue.jsapexcharts