vue 中如何使用 echarts 折线图

要在 Vue 中使用 echarts 折线图，你需要遵循以下步骤：

1. 安装 echarts

使用 npm 安装 echarts：

npm install echarts --save

2. 引入 echarts

在需要使用 echarts 的组件中引入 echarts：

import echarts from 'echarts'

3. 创建一个容器

在 Vue 组件的模板中创建一个容器，用于显示 echarts 图表：

<div id="line-chart" style="width: 100%; height: 400px;"></div>

4. 初始化 echarts

在 Vue 组件的 mounted 钩子函数中初始化 echarts：

mounted() {
  let lineChart = echarts.init(document.getElementById('line-chart'))
  lineChart.setOption({
    // echarts 配置项
  })
}

5. 配置 echarts

根据你的需求，配置 echarts 的 option。例如，下面是一个简单的折线图配置：

mounted() {
  let lineChart = echarts.init(document.getElementById('line-chart'))
  lineChart.setOption({
    title: {
      text: '折线图'
    },
    tooltip: {},
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'line',
      data: [5, 20, 36, 10, 10, 20, 15]
    }]
  })
}

这样就可以在 Vue 中使用 echarts 折线图了。