vue3 echarts 共用y轴名称 左右布局

废话不多说 先上样式图

<div id="zwEcharts" style="width: 100%; height: 100%; background-color: rgba(32, 42, 68, 0.3)"></div>

// 异步获取数据
const getData = async (sourceId) => {
  const { code, data, message } = await countProductionAreaDistribution({...sourceId})
  if (code === 200) {
    dataList.value = data
    await getEcharts(data)
  } else {
    $message(message)
  }
}

// echarts 配置

const getEcharts = async (data) => {
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById("zwEcharts"), "dark")

  // 指定图表的配置项和数据
  const option = getOption(data)

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}


function getOption(data) {
  let legendData = data.legend.data
  let axisData = data.axis.data
  let xmSeries = data.series[0]
  let ycSeries = data.series[1]

  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    axisPointer: {
      link: { xAxisIndex: 'all' }
    },
    legend: {
      data: legendData,
      x: "center",
      top:16,
      itemGap: 280,
      icon:"diamond",
      itemHeight: 8, //修改icon图形大小
      itemWidth: 8, //修改icon图形大小
      textStyle: {
        fontSize: 13,
        color: '#FFFFFF'
      },
    },
    grid: [{
      top: 40,
      bottoom: 20,
      left: 10,
      height: '80%',
      //right: '40%',
      width: '42%'
    }, {
      top: 40,
      bottoom: 20,
      //left: '60%',
      height: '80%',
      right: 10,
      width: '41%'
    }],
    xAxis: [
      {
        show: false,
        // type: 'value',
        boundaryGap: false,
        inverse: true,
        position: 'right',
        axisTick: {
          show: false
        },
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
      },
      {
        show: false,
        // type: 'value',
        gridIndex: 1,
        boundaryGap: false,
        axisTick: {
          show: false
        },
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
      }
    ],
    yAxis: [
      {
        // show:false,
        splitLine: { show: false }, //去除网格线
        type: 'category',
        position: 'right',
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          fontSize: 10,
          textStyle: {
            color: "#FFFFFF",
          },
        },
        axisLine: {
          show:false,
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
        data: axisData
      },
      {
        // show:false,
        splitLine: { show: false }, //去除网格线
        type: 'category',
        gridIndex: 1,
        inverse: true,
        axisTick: {
          show: false
        },
        axisLabel: {
          fontSize: 10,
          textStyle: {
            color: "#FFFFFF",
          },
        },
        axisLine: {
          show:false,
          lineStyle: {
            color: '#fff',
            width: 1, //这里是为了突出显示加上的
          }
        },
        data: axisData
      }
    ],
    series: [
      {
        label: {
          show: false
        },
        barWidth: "10",
        hoverAnimation: false,
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0, [{//代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: '#00D5E1'
              }, //柱图渐变色
                {
                  offset: 1, //指100%处的颜色
                  color: '#008AE1'
                }
              ]
            ),
          }
        },
        ...xmSeries
      },
      {
        label: {
          show: false,
          //position: 'left'
        },
        barWidth: "10",
        xAxisIndex: 1,
        yAxisIndex: 1,
        hoverAnimation: false,
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0, [{//代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: '#00E15A'
              }, //柱图渐变色
                {
                  offset: 1, //指100%处的颜色
                  color: '#3FFDC0'
                }
              ]
            ),
          }
        },
        ...ycSeries
      }
    ]
  }

  return option
}