echat 上下两个折线图 共用一个y轴，滚动条

 const xAxis = (data) => {
    return [
      {
        type: 'category',
        interval: 0, // 必须显示x轴文字
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true, // 坐标轴横线
          lineStyle: {
            color: lineColor,
          },
        },
        textStyle: {
          color: textColor,
        },
        data,
      },
      {
        gridIndex: 1,
        type: 'category',
        interval: 0, // 必须显示x轴文字
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true, // 坐标轴横线
          lineStyle: {
            color: lineColor,
          },
        },
        textStyle: {
          color: textColor,
        },
        data,
      },
    ];
  };

  const grid = () => {
    return [
      {
        left: 40,
        bottom: '60%',
        top: 28,
        right: 40,
        containLabel: true,
      },
      {
        left: 40,
        top: '52%',
        right: 40,
        containLabel: true,
        bottom: 50,
      },
    ];
  };

  const yAxis = (name1, name2, name3, name4, tip) => {
    return [
      {
        type: 'value',
        name: name1,
        scale: false,
        alignTicks: true, // 双y轴变为一条线
        min: 0,
        max: (value) => {
          return value.max ? null : 1;
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: lineColor,
          },
        },
        textStyle: {
          color: textColor,
        },
        axisLabel: {
          formatter(value) {
            return `${value.toFixed(2)}`;
          },
        },
      },
      {
        type: 'value',
        name: name2,
        scale: false,
        alignTicks: true,
        min: 0,
        max: (value) => {
          return value.max ? null : 1;
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: lineColor,
          },
        },
        textStyle: {
          color: textColor,
        },
        axisLabel: {
          formatter(value) {
            return `${value.toFixed(2)}`;
          },
        },
      },
      {
        type: 'value',
        name: name3,
        gridIndex: 1,
        scale: false,
        alignTicks: true,
        min: 0,
        max: (value) => {
          return value.max ? null : 1;
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: lineColor,
          },
        },
        textStyle: {
          color: textColor,
        },
        axisLabel: {
          formatter(value) {
            return `${value.toFixed(2)}`;
          },
        },
      },
      {
        type: 'value',
        name: name4,
        gridIndex: 1,
        scale: false,
        alignTicks: true,
        min: 0,
        max: (value) => {
          return value.max ? null : 1;
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: lineColor,
          },
        },
        textStyle: {
          color: textColor,
        },
        axisLabel: {
          formatter(value) {
            return `${value.toFixed(2)}`;
          },
        },
      },
    ];
  };

  const series = (name1, name2, name3, name4, data1, data2, data3, data4) => {
    return [
      {
        name: name1,
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 0,
        emphasis: {
          disabled: true,
          focus: 'none',
        },
        data: data1,
      },
      {
        name: name2,
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 1,
        smooth: true,
        symbol: 'none',
        emphasis: {
          disabled: true,
          focus: 'none',
        },
        data: data2,
      },
      {
        name: name3,
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 2,
        emphasis: {
          disabled: true,
          focus: 'none',
        },
        data: data3,
      },
      {
        name: name4,
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex: 3,
        smooth: true,
        symbol: 'none',
        emphasis: {
          disabled: true,
          focus: 'none',
        },
        data: data4,
      },
    ];
  };

  const tooltip = () => {
    return {
      trigger: 'axis',
      textStyle: {
        color: '#fff',
      },
      borderWidth: 1,
      backgroundColor:
        theme === 'dark' ? 'rgba(0, 0, 0,0.9)' : 'rgba(0,0,0,0.65)',
      borderColor:
        theme === 'dark' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.16)',
      formatter(params) {
        let str = '';
        str += `<div>${params[0].name}</div>`;
        for (let i = 0; i < params.length; i += 1) {
          str +=
            `<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${
              params[i].color
            };"></span>
            <span style="display: inline-block;width:80px">${
              params[i].seriesName
            }${params[i].seriesType === 'bar' ? '(亿元)' : '(%)'}</span>` +
            `<span style="text-align: right;display: inline-block;width:100px"">${
              params[i]?.data ? `${Number(params[i]?.data).toFixed(2)}` : '0.00'
            }${params[i].seriesType === 'line' ? '%' : ''}</span></br>`;
        }
        return str;
      },
    };
  };

  const option = (tip) => {
    return {
      animation: false,
      animationDuration: 0, // 这里两个动画设置可以让图表更顺滑
      animationEasing: 'cubicInOut', // 这里两个动画设置可以让图表更顺滑
      color: ['#6998f6', '#efe8c8', '#8695f0', '#8cb6f7'],
      legend: {
        x: 'center',
        y: 'buttom',
        icon: 'react',
        top: '94%',
        textStyle: {
          color: textColor,
        },
        itemWidth: 8,
        itemHeight: 8,
      },
      grid: grid(),
      tooltip: tooltip(),
      // 将上下两个tootip合成一个
      axisPointer: {
        link: { xAxisIndex: 'all' },
      },
      xAxis: xAxis(tip ? xAxisExchange : xAxisBank),
      yAxis: yAxis(
        '大白',
        '小黑',
        '小红花',
        '小绿',
        'flag'
      ),
      dataZoom: [
        {
          type: 'slider',
          xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提示就会出问题
          show: true,
          height: 16,
          maxSpan,
            // 刚进入页面 滚动条的位置
         // startValue: moment(watchSelectRow?.firstBuyDay).format('YYYY-MM-DD'),
        // endValue: moment(watchSelectRow?.finalSellDay).format('YYYY-MM-DD'),
        },
      ],
      series: series(
        '大白',
        '小黑',
        '小红花',
        '小绿',
        data1,
        data2,
        data3,
        data4
      ),
    };
  };