echarts上下双图，共用一个dataZoom

export const ananualTimeSeries = (datas: any, type: any) => {
  const xAxisData = datas.map((item) => (type === 'year' ? item.hours : item.month));

  const option = {
    toolbox: {
      feature: {
        dataZoom: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    grid: [{ bottom: '60%', top: '10%' }, { top: '50%' }],
    dataZoom: [
      {
        start: 0,
        end: 10,
        xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提示就会出问题
        type: 'slider',
        // showDetail: false,
        // filterMode: 'empty',
        height: 30,
        left: 'center',
        // zoomLoxk: true,
        // handleSize: 0,
        bottom: 3
      }
      // {
      //   type: 'inside',
      //   xAxisIndex: [0, 1],
      //   zoomOnMouseWheel: false,
      //   moveOnMouseMove: true,
      //   moveOnMouseWheel: true
      // }
    ],
    legend: {},
    tooltip: {
      trigger: 'axis',
      confine: true,
      borderColor: 'rgba(65, 119, 254, 1)', //边框颜色
      alwaysShowContent: false,
      backgroundColor: 'rgba(238, 241, 255, 1)', //背景颜色
      textStyle: {
        align: 'left',
        fontSize: 14,
        color: 'rgba(51, 71, 93, 1)'
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: [
      {
        data: xAxisData,
        gridIndex: 0
      },
      {
        data: xAxisData,
        gridIndex: 1
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '电量',
        position: 'left',
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[1]
          }
        },
        axisLabel: {
          formatter: '{value} KW'
        },
        gridIndex: 0
      },
      {
        type: 'value',
        name: '制氢量/耗水量',
        position: 'right',
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[2]
          }
        },
        axisLabel: {
          formatter: '{value} kg'
        },
        gridIndex: 0
      },
      {
        type: 'value',
        name: '电量',
        position: 'left',
        alignTicks: true,
        axisLabel: {
          formatter: '{value} KW'
        },
        gridIndex: 1
      }
    ],
    series: [
      {
        name: '制氢量',
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 1,
        color: '#fab11e',
        tooltip: {
          valueFormatter: function (value) {
            return formatMoney(value) + ' kg';
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [5, 5, 0, 0]
          }
        },
        data: datas.map((item) => item.loadH2Zql)
      },
      {
        name: '耗水量',
        type: type === 'year' ? 'line' : 'bar',
        xAxisIndex: 0,
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return formatMoney(value) + ' kg';
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [5, 5, 0, 0]
          }
        },
        data: datas.map((item) => item.loadH2Hsl)
      },
      {
        name: '风力发电量',
        type: 'line',
        smooth: true,
        xAxisIndex: 0,
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value) {
            return formatMoney(value) + ' kW';
          }
        },
        data: datas.map((item) => item.wtPower)
      },
      {
        name: '光伏发电量',
        type: 'line',
        smooth: true,
        xAxisIndex: 0,
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value) {
            return formatMoney(value) + ' kW';
          }
        },
        data: datas.map((item) => item.pvPower)
      },
      {
        name: '负荷耗电量',
        type: 'line',
        smooth: true,
        xAxisIndex: 0,
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value) {
            return formatMoney(value) + ' kW';
          }
        },
        data: datas.map((item) => item.loadH2Power)
      },
      {
        name: '下网电量',
        type: 'line',
        smooth: true,
        xAxisIndex: 0,
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value) {
            return formatMoney(value) + ' kW';
          }
        },
        data: datas.map((item) => item.xwdl)
      },
      {
        name: '上网电量',
        type: 'line',
        smooth: true,
        xAxisIndex: 0,
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value) {
            return formatMoney(value) + ' kW';
          }
        },
        data: datas.map((item) => item.swdl)
      },
      {
        name: '弃电量',
        type: 'line',
        smooth: true,
        xAxisIndex: 0,
        yAxisIndex: 0,
        tooltip: {
          valueFormatter: function (value) {
            return formatMoney(value) + ' kW';
          }
        },
        data: datas.map((item) => item.qdl)
      },

      {
        name: '储能系统充电量',
        type: 'bar',
        // label: {
        //   show: true,
        //   position: 'inside',
        //   valueFormatter: function (value) {
        //     return formatMoney(value) + ' kW';
        //   }
        // },
        tooltip: {
          valueFormatter: function (value) {
            return formatMoney(value) + '  kWh';
          }
        },
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          normal: {
            barBorderRadius: [5, 5, 0, 0]
          }
        },
        data: datas.map((item) => item.cncdl),
        xAxisIndex: 1,
        yAxisIndex: 2
      },
      {
        name: '储能系统放电量',
        type: 'bar',
        // stack: 'Total',
        // label: {
        //   show: true,
        //   position: 'inside'
        // },
        color: '#00acff',
        tooltip: {
          valueFormatter: function (value) {
            return formatMoney(value) + '  kWh';
          }
        },
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          normal: {
            barBorderRadius: [0, 0, 5, 5]
          }
        },
        data: datas.map((item) => Number(item.cnfdl) * -1),
        xAxisIndex: 1,
        yAxisIndex: 2
      },
      {
        name: '储能系统SOC',
        type: 'line',
        // stack: 'Total',
        smooth: true,
        tooltip: {
          valueFormatter: function (value) {
            return formatMoney(value) + '  kWh';
          }
        },
        // label: {
        //   show: true
        // },
        emphasis: {
          focus: 'series'
        },
        data: datas.map((item) => item.socPercent),
        xAxisIndex: 1,
        yAxisIndex: 2
      }
    ]
  };
  if (type !== 'year') {
    option.series.pop();
    delete option.dataZoom;
  }

  return option;
};