如何将Vue3 Apexcharts组件methods内的updateChart方法抽离为独立函数

你目前的代码存在两个核心问题：

• 语法错误：methods对象内的updateChart(),不符合JS对象属性语法，此处仅写了方法名加空括号加逗号，没有给出属性值，这就是Unexpected token ,报错的直接来源；其次组件外部的函数定义缺少function关键字，属于不合法的函数声明。
• 逻辑隐患：你原有的修改逻辑直接覆盖chartOptions，会丢失plotOptions.bar.horizontal、xaxis.categories等原有配置，导致图表渲染异常。

仅在当前组件内抽离方法 #

直接在组件script作用域内声明独立函数，再赋值给methods即可：

<script>
/* eslint-disable */
// 外部独立声明函数，用function定义保证this指向组件实例
function updateChart() {
  const max = 90;
  const min = 20;
  const newData = this.series[0].data.map(() => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  });

  const colors = ["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0"];

  // 用扩展运算符保留原有配置，仅覆盖colors
  this.chartOptions = {
    ...this.chartOptions,
    colors: [colors[Math.floor(Math.random() * colors.length)]]
  };
  this.series = [
    {
      name: this.series[0].name,
      data: newData
    }
  ];
}

export default {
  name: "BarExample",
  data: function() {
    return {
      chartOptions: {
        plotOptions: {
          bar: {
            horizontal: true
          }
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40, 45, 50, 49, 60, 70, 91]
        }
      ]
    };
  },
  methods: {
    updateChart // 直接把外部函数赋值给methods
  }
};
</script>

多组件复用抽离 #

如果需要在多个图表组件中复用这个方法，可以把它抽到独立的公共工具文件中：

1. 新建src/utils/chartUtils.js文件：

export function updateChart() {
  const max = 90;
  const min = 20;
  const newData = this.series[0].data.map(() => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  });

  const colors = ["#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0"];

  this.chartOptions = {
    ...this.chartOptions,
    colors: [colors[Math.floor(Math.random() * colors.length)]]
  };
  this.series = [
    {
      name: this.series[0].name,
      data: newData
    }
  ];
}

2. 在组件中引入使用：

<script>
/* eslint-disable */
import { updateChart } from '@/utils/chartUtils'

export default {
  name: "BarExample",
  data: function() {
    return {
      chartOptions: {
        plotOptions: {
          bar: {
            horizontal: true
          }
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40, 45, 50, 49, 60, 70, 91]
        }
      ]
    };
  },
  methods: {
    updateChart
  }
};
</script>

内容的提问来源于stack exchange，提问作者user3848207