vue 用echarts生成个折线图，折线图有红绿蓝三条，鼠标移入折线会显示数据信息，滚轮滚动会放大，折线图叫淄博烧烤，折线图例显示在底部中间

以下是一个简单的 Vue+Echarts 折线图实现代码，按照您的要求进行了修改：

1. 折线图有红绿蓝三条
2. 鼠标移入折线会显示数据信息
3. 滚轮滚动会放大
4. 折线图例显示在底部中间
5. 折线图名称为“淄博烧烤”

<template>
  <div class="echarts-container">
    <div class="echarts" ref="echarts"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'echartsLine',
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(this.$refs.echarts)
      myChart.setOption({
        title: {
          text: '淄博烧烤',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['红色', '绿色', '蓝色'],
          bottom: 0,
          left: 'center'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '红色',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210],
            itemStyle: {
              normal: {
                color: '#FF5722'
              }
            }
          },
          {
            name: '绿色',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310],
            itemStyle: {
              normal: {
                color: '#4CAF50'
              }
            }
          },
          {
            name: '蓝色',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410],
            itemStyle: {
              normal: {
                color: '#2196F3'
              }
            }
          }
        ]
      })

      window.addEventListener('resize', () => {
        myChart.resize()
      })

      myChart.on('mouseover', params => {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: params.seriesIndex,
          dataIndex: params.dataIndex
        })
      })

      myChart.on('mouseout', params => {
        myChart.dispatchAction({
          type: 'hideTip'
        })
      })

      myChart.on('mousewheel', params => {
        const zoom = params.wheelDelta > 0 ? 1.1 : 0.9
        myChart.dispatchAction({
          type: 'dataZoom',
          dataZoomIndex: 0,
          startValue: myChart.getOption().dataZoom[0].startValue,
          endValue: myChart.getOption().dataZoom[0].endValue,
          zoom: zoom
        })
      })
    }
  }
}
</script>

<style scoped>
.echarts-container {
  position: relative;
  width: 100%;
  height: 300px;
}

.echarts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>