使用 vue-echarts 时遇到的类型错误问题?

Question

<button @click="updateOptions">更新配置</button>
<v-chart
  :init-options="initOptions"
  :autoresize="true"
  class="chart"
  :option="dataSetoption"
/>

type ECOptions = ComposeOption<
  | TimelineComponentOption
  | TooltipComponentOption
  | PieSeriesOption
  | LegendComponentOption
  | BarSeriesOption
  | DatasetComponentOption
  | ScatterSeriesOption
  | VisualMapComponentOption
  | LineSeriesOption
>;

const dataSetoption = ref<ECOptions>({
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据。
    source: [
      ["product", "2015", "2016", "2017"],
      ["Matcha Latte", 43.3, 85.8, 93.7],
      ["Milk Tea", 83.1, 73.4, 55.1],
      ["Cheese Cocoa", 86.4, 65.2, 82.5],
      ["Walnut Brownie", 72.4, 53.9, 39.1],
    ],
  },
  // 声明一个 X 轴，类目轴(category)。默认情况下，类目轴对应到 dataset 第一列。
  xAxis: { type: "category" },
  // 声明一个 Y 轴，数值轴。
  yAxis: {},
  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
  series: [
    { type: "bar", seriesLayoutBy: "row" },
    { type: "bar", seriesLayoutBy: "row" },
    { type: "bar", seriesLayoutBy: "row" },
    { type: "bar", seriesLayoutBy: "row" }
  ],
});

function updateOptions() {
  if (!Array.isArray(dataSetoption.value.dataset)) {
    if (Array.isArray(dataSetoption.value.dataset?.source)) {
        dataSetoption.value.dataset?.source.push(
          ["Walnut Brownie2", 82.4, 73.9, 39.1]
        )
    }
  }
  if (Array.isArray(dataSetoption.value.series)) {
    dataSetoption.value.series.push({
      type: "bar", seriesLayoutBy: "row"
    })
  }
  // dataSetoption.value = {}
}

在初始设置 dataSetoption 配置的时候没有出现类型错误,但是更新的时候却提示了类型错误

Answer 1

function updateOptions() {
  if (!Array.isArray(dataSetoption.value.dataset)) {
    if (Array.isArray(dataSetoption.value.dataset?.source)) {
      (dataSetoption.value.dataset.source as (string | number)[][]).push([
        "Walnut Brownie2",
        82.4,
        73.9,
        39.1,
      ]);
    }
  }
  if (Array.isArray(dataSetoption.value.series)) {
    (dataSetoption.value.series as BarSeriesOption[]).push({
      type: "bar",
      seriesLayoutBy: "row",
    });
  }
  // dataSetoption.value = {}
}