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

作者站长头像
站长
· 阅读数 26
<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 配置的时候没有出现类型错误,但是更新的时候却提示了类型错误使用 vue-echarts 时遇到的类型错误问题?

回复
1个回答
avatar
test
2024-07-04
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 = {}
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容