echarts多y轴优化方案

优化方向：点击图例，对y轴进行屏蔽，自动计算y轴位置

效果如下：

对应实现思路：通过监听图例点击事件，渲染y轴显示隐藏和y轴对应位置。

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import * as echarts from "echarts";
let myChart: any = null;

let colors = ref();
let option = ref();
colors.value = [
  "#5470C6",
  "#91CC75",
  "#EE6666",
  "#29b061",
  "#9D6630",
  "#FFC24C",
  "#2B71C3",
  "#9B2222",
];
option.value = {
  backgroundColor: "#ffffff",
  color: colors.value,
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
    },
  },
  grid: {
    top: 50,
    bottom: 30,
    left: 60,
    containLabel: true,
  },
  legend: {
    selected: {
      '含氧量': true,
      '温度': true,
      '湿度测试111': true,
      '降雨量': true,
    },
    data: ["温度", "降雨量", "湿度测试111", "含氧量"],
  },
  xAxis: [
    {
      type: "category",
      axisTick: {
        alignWithLabel: true,
      },
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
    },
  ],
  yAxis: [],
  series: [],
};
let selected = ref();
selected.value = {
  '含氧量': true,
  '温度': true,
  '湿度测试111': true,
  '降雨量': true,
};
const seriesDatas = reactive([
  {
    name: "温度",
    type: "bar",
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
  },
  {
    name: "降雨量",
    type: "line",
    yAxisIndex: 1,
    data: [253.6, 543.9, 964.0, 11265.4, 11628.7, 11370.7, 11175.6, 11182.2, 21248.7, 1718.8, 156.0, 612.3],
  },
  {
    name: "湿度测试111",
    type: "line",
    yAxisIndex: 2,
    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
  },
  {
    name: "含氧量",
    type: "line",
    yAxisIndex: 3,
    data: [20.6, 45.9, 95.0, 6.4, 56.7, 76.7, 145.6, 256.2, 78.7, 96.8, 45.0, 66.3],
  },
]);
function init() {
  var chartDom = document.getElementById("container");
  myChart = echarts.init(chartDom);
  const { series, gridRight, yAxis } = filselected();
  
  option.value.grid.right = gridRight;
  option.value.yAxis = yAxis;
  option.value.series = series;
  myChart.setOption(option.value);
  myChart.on("legendselectchanged", (params: any) => {
    handleLegend(params);
  });
  window.addEventListener("resize", myChart.resize);
}

function handleLegend(params: any) {
  selected.value = params.selected;
  refreshCharts();
}

function refreshCharts() {
  if (!myChart) {
    init();
  }

  const { series, gridRight, yAxis } = filselected();
  
  option.value.legend.selected = selected.value;
  option.value.grid.right = gridRight;
  option.value.yAxis = yAxis;
  option.value.series = series;
  myChart.setOption(option.value, false);
}

function filselected() {
  let series: any[] = [],
    yAxis: any[] = [];
  let ii = 0;
  let jj = 0;

  seriesDatas.forEach((item: any, index: any) => {
    series.push({
      ...item,
      yAxisIndex: jj,
    });
    jj++;
    
    yAxis.push({
      type: "value",
      show: selected.value[item.name],
      name: item.name,
      position: ["温度"].includes(item.name) ? "left" : "right",
      alignTicks: true,
      offset: ["温度"].includes(item.name) ? 0 : 60 * ii,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors.value[index],
        },
      },
    });

    if (selected.value[item.name] && !["温度"].includes(item.name)) {
      ii++;
    }
    
  });
  return {
    series,
    gridRight: ii === 0 ? 20 : 30 * (ii - 1) + 20,
    yAxis,
  };
}

onMounted(() => {
  init();
});
</script>

<template>
  <div class="page">
    <div id="container" style="height: 400px; width: 1000px"></div>
  </div>
</template>

<style lang="scss" scoped>
.page {
  height: 100%;
}
</style>