echart 多Y轴

 <EchartLine
     :selectedData="selectedData"
     :ListChart="tableDataLine"
     :tableHeader="tableHeaderLine"
  ></EchartLine>

注释：selectedData  表示图表中需要默认选中的因子，再后面要用到判断   tableDataLine 表示图表中要用到的数据   

tableHeader 表示所有的legend 

 整个代码

export default {
  props: {
    ListChart: {
      type: Array,
      default: () => [],
    },
    tableHeader: {
      type: Array,
      default: () => [],
    },
    selectedData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      getchart: null,
      legend: [],
      xData: [],
      yAxisData:[],
      series: [],
      colorAchart:[],
    };
  },
  watch: {
    ListChart: {
      handler(val, oldVal) {
        console.log(this.tableHeader)
        this.legend = [];
        this.xData = [];
        this.series = [];
        this.yAxisData = [];

        let tableHeader = this.tableHeader;
        let listData = val;
        //这里组装legend
        if (tableHeader && tableHeader.length > 0) {
          for (var i = 0; i < tableHeader.length; i++) {
            this.legend.push({
              name:tableHeader[i]["label"],
              id:tableHeader[i]["id"]
            });
            this.colorAchart.push(tableHeader[i]["color"]);
            let ayy0 = [];
            if (listData && listData.length > 0) {
              for (var j = 0; j < listData.length; j++) {
                ayy0.push(listData[j][tableHeader[i]["id"]]);
              }
            }
            //组装多y轴
            let iRecord = i
            let yBase = iRecord > 1 ? parseInt(iRecord / 2) : 0
            let yAxis = {
              //name: tableHeader[i]["label"],
              id:tableHeader[i]["id"],
              type: 'value',
              axisLine: {
                show: true,
              },
              position: iRecord % 2 == 0 ? 'left' : 'right',
              //水平线
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed",
                  color: "#184980",
                },
              },
              
            }
            this.yAxisData.push(yAxis)
            //组装数据
            this.series.push({
              name: tableHeader[i]["label"],
              type: "line",
              smooth: true,
              yAxisIndex: i,
              itemStyle: {
                color: tableHeader[i]["color"],
              },
              markPoint: {
                // 设置最大值和最小值
                data: [
                  {
                    type: "max",
                    name: "我是最大值",
                  },
                  {
                    type: "min",
                    name: "我是最小值",
                  },
                ],
              },

              data: ayy0,
            });
          }
          if (listData && listData.length > 0) {
            for (var k = 0; k < listData.length; k++) {
              this.xData.push(listData[k]["dataTime"]);
            }
          }
          this.$nextTick(() => {
            this.initChart(this.legend, this.xData,this.yAxisData, this.series);
          });
        } else {
          this.$nextTick(() => {
            this.initChart([], [], []);
          });
        }
      },
      deep: true, // 深度监听
      immediate: true, //初始化监听

    },
  },
  created(){
  },
  mounted() {
   
  },
  methods: {
    
    initChart(legend, xData,yAxisData, series) {
       //组装默认选中
      let arr = {};
      for (let h = 0; h < legend.length; h++) {
          for (let i = 0; i < this.selectedData.length; i++) {
          if(legend[h]['id']==this.selectedData[i]['id']){
            arr[legend[h]['name']] = true;
          }else{
              arr[legend[h]['name']] = false;
          }
        }
      };
      
      this.getchart = this.$echarts.init(this.$refs.YCechart);
      let option = {
        color: this.colorAchart,
        tooltip: {
          trigger: "axis",
        },
        dataZoom: 
 
    {
      type: 'inside',
       show:true
    },
    toolbox: {
      right:30,
      top:"15%",
    feature: {
            myFull: {
              show: true,
              title: "全屏查看",
              iconStyle:{
                color:"white"
              },
              icon:
                "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                this.fullFlag = true;
                let element = this.$refs.YCechart;

                // 一些浏览器的兼容性
                if (element.requestFullScreen) {
                  // HTML W3C 提议
                  element.requestFullScreen();
                } else if (element.msRequestFullscreen) {
                  // IE11
                  element.msRequestFullScreen();
                } else if (element.webkitRequestFullScreen) {
                  // Webkit (works in Safari5.1 and Chrome 15)
                  element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                  // Firefox (works in nightly)
                  element.mozRequestFullScreen();
                }

                // 退出全屏
                if (element.requestFullScreen) {
                  document.exitFullscreen();
                } else if (element.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (element.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (element.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        legend: {
          top: "3%",
          data: legend,
          selected: arr,
          icon: "rect",
          itemHeight: 4,
          itemWidth: 16,
          textStyle: {
            color: "#fff",
            //fontsize: 25,
          },
        },
        grid: {
          //调整图表上下左右位置
          left: "5%",
          right: "4%",
          bottom: "8%",
          top: "20%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#184980",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#fff",
              margin: 15,
            },
          },
        },
        yAxis: yAxisData,
        series: series,
      };
      //这里多y轴会用的，测试也可以不写，根据自己情况
      let leftOffset = ''
      let rightOffset = ''
      let len = option.yAxis.length - 1;
      if (len / 2 > 1) {
        var Offset = 0
        if (len / 2 >= 4) {
          Offset = (4 - 2) * 2 + 7
        } else {
          Offset = (len / 2 - 2) * 2 + 7
        }
        if (len % 2 == 0) {
          leftOffset = Offset + 2 + '%'
          rightOffset = Offset + '%'
        } else {
          rightOffset = Offset + 2 + '%'
          leftOffset = Offset + '%'
        }
      }
      option.grid.left = '4%'
      option.grid.right = '4%'

      let that = this
      this.getchart.setOption(option, true);
      console.log(that.selectedData)
       let _optionXColo = that.getchart.getOption();
          for (let i = 0; i < that.selectedData.length; i++) {
              var ii = 0
              _optionXColo.color.forEach(function (item, index) {
                 if(that.selectedData[i]['id']==_optionXColo.yAxis[index]['id']){
                  _optionXColo.yAxis[index].axisLine.show = true
                }else{
                  _optionXColo.yAxis[index].axisLine.show = false
                }
                //如果默认选中的比较多时可以用，可以自己根据默认选中的条数自行判断，有下面两种方式
                // _optionXColo.yAxis[index].offset = index * 12 
               // _optionXColo.yAxis[index].offset = (ii > 1 ? parseInt(ii / 2) : 0) * 30;
                _optionXColo.yAxis[index].position = ii % 2 == 0 ? 'left' : 'right'
               
                _optionXColo.yAxis[index].axisLine['lineStyle']['color'] =item;
                ii++  
              })
              
           }
        this.getchart.setOption(_optionXColo, true)

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.getchart.resize();
      });
      this.getchart.on('legendselectchanged', function (obj) {

        var _option = that.getchart.getOption()
        var ii = 0
        Object.values(obj.selected).forEach(function (item, index) {
          if (_option.yAxis[index]) {
            _option.yAxis[index].axisLine.show = item
          }
          if (item) {
            _option.yAxis[index].offset = (ii > 1 ? parseInt(ii / 2) : 0) * 32
            _option.yAxis[index].position = ii % 2 == 0 ? 'left' : 'right'
            ii++
          }
        })

        _option.grid[0].right = '2%'
        _option.grid[0].left = '2%'
        that.getchart.setOption(_option, true)

      })



    },
  },
};
</script>