使用echarts实现一个柱状散点图（双X轴）

import React, { Component } from "react";
import * as echarts from "echarts";

export default class App extends Component {
  state = {
    data: []
  };

  componentDidMount() {
    this.getEchartData();
  }

  componentWillUnmount() {
    // 组件卸载前卸载图表
    this.dispose();
  }

  getEchartData = ()=> {
    const dateToStr = (time) => { 
      let datetime = new Date(time)
      let month = datetime.getMonth()+1;//js从0开始取 
      let date = datetime.getDate(); 
      let hour = datetime.getHours(); 
      let m = datetime.getMinutes();
      let s = datetime.getSeconds();
      month = month < 10 ?  "0" + month : month ;
      date  = date<10 ?  "0" + date : date;
      hour  = hour <10 ? "0" + hour : hour;
      m  = m <10 ? "0" + m : m;
      s  = s <10 ? "0" + s : s;
      return date + '-' + month + ' '+ hour + ':' + m + ':' + s;
    }
    this.myChart = echarts.init(this.el);

    this.myChart.setOption({
      title: {
        text: "B4(TBM103)的生胎数量",
        left: "center",
        subtext: "2021-04-12 00:00:00 —— 2021-04-14 00:00:00"
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        top: 100
      },
      xAxis: [
        {
          type: "category",
          data: [
            "04-12 07:29",
            "04-12 15:29",
            "04-12 23:29",
            "04-13 07:29",
            "04-13 15:29",
            "04-13 23:29",
            "04-14 07:29"
          ]
        },
        {
          axisLabel: {
            formatter: function (val,xAxisIndex) {
              return dateToStr(new Date().getTime() + xAxisIndex*2*60*60*1000);
            }
          },
        }
      ],
      yAxis: [
        {
          type: "value",
          scale: true,
          name: "产量",
          max: 150,
          min: 0,
          boundaryGap: [0.2, 0.2],
          nameGap: 30,
        },
        {
          type: "value",
          scale: true,
          name: "循环时间",
          max: 200,
          min: 0,
          boundaryGap: [0.2, 0.2],
          nameGap: 30,
        }
      ],
      series: [
        {
          name: "产量",
          type: "bar",
          xAxisIndex: 0,
          yAxisIndex: 0,
          data: [115,137,145,130,123,145,7],
          itemStyle: {
            color: '#4D97D5'
          },
        },
        {
          name: "循环时间",
          type: "scatter",
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: (function () {
            var res = [];
            var len = 300;
            while (len--) {
              res.push([Math.random()*3,(80 + Math.random() * 30 + (Math.random() < 0.2 ? (Math.random() > 0.5 ? Math.random() * 50 : Math.random() * -50 ) : 0)).toFixed(2)]);
            }
            return res;
          })(),
          itemStyle: {
            color: 'red'
          },
        },
      ]
    });
    window.onresize = () => {
      this.myChart.resize();
    };
  };

  dispose = () => {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  };

  render() {
    return (
      <div style={{ width: "100%", height: "100%" }} ref={el => (this.el = el)} />
    );
  }
}

图示: