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

好的，以下是一个基于 Vue3 和 TypeScript 的双 Y 轴折线图的示例代码：

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

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'DoubleLineChart',
  props: {
    data: {
      type: Array,
      required: true
    },
    xAxisName: {
      type: String,
      default: ''
    },
    yAxisNameLeft: {
      type: String,
      default: ''
    },
    yAxisNameRight: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const chartRef = ref(null)
    let chart: any = null

    const initChart = () => {
      chart = echarts.init(chartRef.value)

      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [props.yAxisNameLeft, props.yAxisNameRight]
        },
        xAxis: {
          type: 'category',
          name: props.xAxisName,
          data: props.data.map((item: any) => item.name),
          axisLabel: {
            interval: 0,
            rotate: 45
          }
        },
        yAxis: [
          {
            type: 'value',
            name: props.yAxisNameLeft,
            position: 'left'
          },
          {
            type: 'value',
            name: props.yAxisNameRight,
            position: 'right'
          }
        ],
        series: [
          {
            name: props.yAxisNameLeft,
            type: 'line',
            data: props.data.map((item: any) => item.value1),
            yAxisIndex: 0
          },
          {
            name: props.yAxisNameRight,
            type: 'line',
            data: props.data.map((item: any) => item.value2),
            yAxisIndex: 1
          }
        ]
      })
    }

    onMounted(() => {
      initChart()
    })

    watch(
      () => props.data,
      () => {
        if (chart) {
          chart.setOption({
            xAxis: {
              data: props.data.map((item: any) => item.name)
            },
            series: [
              {
                data: props.data.map((item: any) => item.value1)
              },
              {
                data: props.data.map((item: any) => item.value2)
              }
            ]
          })
        }
      },
      { deep: true }
    )

    return {
      chartRef
    }
  }
})
</script>

<style>
.chart-container {
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>

在父组件中使用该组件：

<template>
  <div>
    <double-line-chart
      :data="data"
      xAxisName="日期"
      yAxisNameLeft="产量"
      yAxisNameRight="销量"
    ></double-line-chart>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import DoubleLineChart from '@/components/DoubleLineChart.vue'

export default defineComponent({
  name: 'App',
  components: {
    DoubleLineChart
  },
  data() {
    return {
      data: [
        { name: '2022-01-01', value1: 100, value2: 200 },
        { name: '2022-01-02', value1: 80, value2: 180 },
        { name: '2022-01-03', value1: 120, value2: 220 },
        { name: '2022-01-04', value1: 90, value2: 200 },
        { name: '2022-01-05', value1: 110, value2: 230 },
        { name: '2022-01-06', value1: 130, value2: 250 }
      ]
    }
  }
})
</script>

可以根据实际情况修改数据和配置。