用vue3+echarts写一个双y轴折线图

好的，以下是一个基于 Vue3 和 Echarts 的双 y 轴折线图实现：

1. 首先安装 Echarts：

npm install echarts --save

2. 在 Vue3 组件中引入 Echarts：

import * as echarts from 'echarts'

3. 在 Vue3 组件中定义数据和配置项并初始化 Echarts：

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

<script>
export default {
  name: 'DoubleLineChart',
  data() {
    return {
      chartData: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: [
          {
            type: 'value',
            name: 'y1'
          },
          {
            type: 'value',
            name: 'y2'
          }
        ],
        series: [
          {
            name: 'y1',
            type: 'line',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            yAxisIndex: 0
          },
          {
            name: 'y2',
            type: 'line',
            data: [10, 20, 30, 40, 50, 60, 70],
            yAxisIndex: 1
          }
        ]
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.chart.setOption(this.chartData)
  }
}
</script>

<style>
.chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart {
  width: 600px;
  height: 400px;
}
</style>

4. 在父组件中使用 DoubleLineChart 组件：

<template>
  <div class="app">
    <DoubleLineChart />
  </div>
</template>

<script>
import DoubleLineChart from './components/DoubleLineChart.vue'

export default {
  name: 'App',
  components: {
    DoubleLineChart
  }
}
</script>

5. 运行项目，即可看到双 y 轴折线图的效果。

注意：这里的代码只是一个简单的示例，实际使用时需要根据自己的需求进行适当的修改。