vue使用echarts 多条折线图

在Vue中使用ECharts创建多条折线图，首先你需要安装`vue-echarts`这个官方推荐的Vue封装库来集成ECharts。以下是步骤：

1. 安装依赖：

npm install vue-echarts echarts --save

2. 在Vue组件中引入并配置ECharts：

<template>
  <div id="chartContainer" ref="chart"></div>
</template>

<script>
import { ECharts } from 'vue-echarts';

export default {
  name: 'MultiLineChart',
  components: {
    ECharts,
  },
  data() {
    return {
      chartOption: {
        title: {
          text: '多条折线图示例',
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: 'Series 1',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
          {
            name: 'Series 2',
            data: [220, 482, 570, 190, 330, 450, 460],
          },
          // 可添加更多系列...
        ],
      },
    };
  },
  mounted() {
    const myChart = this.$refs.chart.init(ECharts);
    myChart.setOption(this.chartOption);
  },
};
</script>

在这个例子中，我们定义了两个系列（Series 1 和 Series 2），分别代表两条折线。在`mounted`钩子里初始化ECharts实例，并设置图表选项。