vue 用请求来的数据 用echarts制作折线图与柱状图混合图表

首先，你需要引入 Echarts 和 Axios 库。在 Vue 组件的 mounted 钩子函数中，通过 Axios 发送请求获取数据，然后在回调函数中使用 Echarts 绘制图表。

下面是一个简单的示例代码：

<template>
  <div>
    <div ref="chart" style="height: 400px;"></div>
  </div>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts'

export default {
  mounted() {
    axios.get('/api/data').then(response => {
      const data = response.data
      const chart = echarts.init(this.$refs.chart)

      chart.setOption({
        title: {
          text: '折线图和柱状图混合展示'
        },
        tooltip: {},
        legend: {
          data: ['销量', '收入']
        },
        xAxis: {
          data: data.categories
        },
        yAxis: [
          {
            type: 'value',
            name: '销量'
          },
          {
            type: 'value',
            name: '收入'
          }
        ],
        series: [
          {
            name: '销量',
            type: 'line',
            data: data.sales
          },
          {
            name: '收入',
            type: 'bar',
            yAxisIndex: 1,
            data: data.income
          }
        ]
      })
    })
  }
}
</script>

在这个示例中，我们通过 Axios 发送 GET 请求获取数据，然后在回调函数中使用 Echarts 绘制图表。Echarts 的初始化函数需要传入一个 DOM 元素，我们通过 `$refs` 引用到了这个元素。

在 Echarts 的配置中，我们定义了标题、提示框、图例、横轴、两个纵轴以及两个系列。其中，第一个系列是折线图，第二个系列是柱状图。我们使用了两个纵轴，分别对应两个系列的数据。`yAxisIndex` 属性指定了柱状图使用第二个纵轴。

注意，这个示例中的数据是从服务器端获取的，因此你需要在后端编写一个 API 接口来提供数据。在开发环境中，可以使用 Mock.js 库模拟数据。