帮我写一个vue3的组件，用escharts绘制折线图。支持输入任意组数据。折线图可以同时显示多个不同的折图。同时写一下这个组件调用示例

好的，我可以帮你写一个基于 Vue3 和 ECharts 绘制折线图的组件，以下是代码：

<template>
  <div ref="chart" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    legend: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.renderChart();
  },
  methods: {
    renderChart() {
      const option = {
        legend: {
          data: this.legend
        },
        xAxis: {
          type: 'category',
          data: this.data[0].map(item => item.x)
        },
        yAxis: {
          type: 'value'
        },
        series: this.data.map(item => ({
          name: item[0].name,
          type: 'line',
          data: item.map(item => item.y)
        }))
      };
      this.chart.setOption(option);
    }
  }
};
</script>

这个组件需要传入两个 props：`legend` 和 `data`。其中，`legend` 是一个数组，用于指定每个折线图的名称；`data` 是一个二维数组，用于指定每个折线图的数据，其中每个子数组的第一个元素是该折线图的名称，接下来的元素是该折线图的数据。

以下是该组件的调用示例：

<template>
  <line-chart :legend="legend" :data="data" />
</template>

<script>
import LineChart from './LineChart.vue';

export default {
  components: {
    LineChart
  },
  data() {
    return {
      legend: ['折线图1', '折线图2'],
      data: [
        [
          { name: '数据1', x: '周一', y: 120 },
          { name: '数据1', x: '周二', y: 200 },
          { name: '数据1', x: '周三', y: 150 },
          { name: '数据1', x: '周四', y: 80 },
          { name: '数据1', x: '周五', y: 70 }
        ],
        [
          { name: '数据2', x: '周一', y: 80 },
          { name: '数据2', x: '周二', y: 90 },
          { name: '数据2', x: '周三', y: 100 },
          { name: '数据2', x: '周四', y: 70 },
          { name: '数据2', x: '周五', y: 60 }
        ]
      ]
    };
  }
};
</script>

希望以上代码对你有所帮助！