vue3 echarts 折线图 label 跟x轴对应显示

在Vue3中使用Echarts折线图，并使折线图的标签与x轴对应显示，可以通过以下步骤实现：

1. 首先，安装Echarts和Vue-Echarts插件。可以使用npm或者yarn进行安装。

2. 在Vue组件中，导入所需的模块。代码如下：

import echarts from 'echarts'
import ECharts from 'vue-echarts'

3. 在Vue组件的数据中定义折线图的数据。例如，可以使用一个数组对象表示每个点的值和对应的x轴标签。代码如下：

data() {
  return {
    lineChartData: [
      {value: 100, name: '一月'},
      {value: 200, name: '二月'},
      {value: 150, name: '三月'},
      // 其他数据...
    ]
  }
}

4. 在Vue组件的模板中，使用ECharts组件并配置相应的属性。代码如下：

<template>
  <div>
    <ECharts :option="lineChartOptions"></ECharts>
  </div>
</template>

5. 在Vue组件的计算属性中，为折线图配置相关的选项。这里我们需要使用Echarts的tooltip和xAxis配置项，将数据的name属性设置为x轴标签。代码如下：

computed: {
  lineChartOptions() {
    return {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: this.lineChartData.map(item => item.name)
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: this.lineChartData.map(item => item.value),
        type: 'line'
      }]
    }
  }
}

通过以上步骤，我们可以实现使用Vue3和Echarts绘制折线图，并确保折线图的标签与x轴对应显示。