vue3 使用echars花两条折线图

对于Vue3和Echarts的结合使用，你可以按照以下步骤来实现绘制两条折线图：

1. 首先，确保你已经在Vue项目中正确安装了Echarts。可以通过npm或yarn来安装：

npm install echarts

2. 在需要使用Echarts的组件中，引入Echarts和相关的样式文件。在`<script>`标签中添加如下代码：

import * as echarts from 'echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

3. 在组件的`data`中定义两条折线图的数据，例如：

data() {
  return {
    lineData1: [120, 200, 150, 80, 70, 110, 130],
    lineData2: [80, 90, 70, 60, 150, 120, 100]
  }
}

4. 在组件的`mounted`生命周期钩子函数中，创建一个Echarts实例，并配置相关的选项：

mounted() {
  const chart = echarts.init(document.getElementById('chart-container'))

  const option = {
    title: {
      text: '两条折线图示例'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['折线1', '折线2']
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '折线1',
        type: 'line',
        data: this.lineData1
      },
      {
        name: '折线2',
        type: 'line',
        data: this.lineData2
      }
    ]
  }

  chart.setOption(option)
}

5. 在组件的模板中，添加一个容器元素用于渲染Echarts图表：

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

这样，你就可以在Vue项目中使用Echarts绘制两条折线图了。记得根据自己的需求调整数据和样式。