vue 动态添加Echarts折线图分类

要动态添加 ECharts 折线图分类，可以通过以下步骤实现：

1. 在 Vue 组件中引入 ECharts，并初始化一个空的 option 对象：

import echarts from 'echarts'

export default {
  data() {
    return {
      chart: null,
      option: {}
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.chart.setOption(this.option)
  }
}

2. 定义一个方法 `addCategory`，用于动态添加分类。在这个方法中，你可以修改 `option` 对象，然后调用 `setOption` 方法来更新图表：

methods: {
  addCategory(category) {
    const axisData = this.option.xAxis[0].data
    axisData.push(category)
    this.option.xAxis[0].data = axisData
    this.option.series.forEach(series => {
      series.data.push(Math.random() * 100) // 示例中为随机生成数据
    })
    this.chart.setOption(this.option)
  }
}

3. 在模板中，添加一个包含 ECharts 的 DOM 元素，并绑定一个 `ref` 属性：

<template>
  <div>
    <div ref="chart" style="width: 100%; height: 500px;"></div>
    <button @click="addCategory('分类名称')">添加分类</button>
  </div>
</template>

这样，每次点击按钮时，就会调用 `addCategory` 方法来动态添加一个分类，并更新图表。