echarts dynamic scatter plot + sine chart background

echarts dynamic scatter plot + sine chart background:

dynamic effect video: dynamic effect video link
code:

// 正弦波背景
function func (x) {
  x /= 57.2;
  return Math.sin(x) * 40 + 30;
}
function sinData () {
  let sindata = [];
  for (let i = 0; i <= 360; i += 0.1) {
    sindata.push([i, func(i)]);
  }
  return sindata;
}

// 产生5000个随机坐标
function generateData () {
  var data = [];
  for (var i = 0; i < 50; i++) {
    for (var j = 0; j < 100; j++) {
      data.push([i, j * 3.6, Math.floor(Math.random() * 51)]);
    }
  }
  return data;
}
// 将3600个三维坐标转化为二维坐标
function creatArray (data) {
  var array = data.map(item => [item[1], item[2]])
  var arr = array.map(item => [...item, array.filter(ins => ins[0] === item[0] && ins[1] === item[1]).length]);
  return arr;
}

var data = generateData();
var arr = creatArray(data);
var option = {
  title: {
    // top:'5%',
    text: 'PRPD',
    left: 'center',
    textStyle:{
      color:'#fff',
      fontSize:22,
    }
  },
  grid: {
    top: '22%',
    left: '10%',
    right: '22%',
    bottom: '6%'
  },
  xAxis: {
    type: 'value',
    name: '相位(°)',
    interval: 90,  //坐标轴刻度标签的显示间隔
    min: 0,
    max: 360,
    axisLine: {
      // show: true,
      // interval: 5, // (此处无效？)坐标轴刻度标签的显示间隔，在类目轴中有效。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
      lineStyle: {
        color: '#fff',
        width: 1,//这里是为了突出显示加上的
      },
    },
    axisLabel: {
      show: true,
      margin: 8, // x轴的刻度值到x轴的距离
      interval: 0, // 可控制坐标轴刻度标签的显示间隔，在类目轴中有效
      textStyle: {
        color: '#fff'
      }
    }
  },
  yAxis: {
    type: 'value',
    name: '幅值（dB）',
    min: -10, // 最小值
    max: 70,
    interval: 40,
    // 坐标轴轴线
    axisLine: {
      show: true,
      // interval: 5, // (此处无效？)坐标轴刻度标签的显示间隔，在类目轴中有效。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
      lineStyle: {
        color: '#fff',
        width: 1,//这里是为了突出显示加上的
      },
    },
    // 坐标轴刻度标签
    axisLabel: {
      show: true,
      margin: 6, // y轴的刻度值到y轴的距离
      interval: 0, // 可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
      formatter: '{value}', // 自定义x轴显示数据标签格式
      textStyle: {
        color: '#fff'
      }
    }
  },
  visualMap: [
    {
      left: 'right',
      top: '5%',
      right: 5,
      min: 0,
      max: 5,
      dimension: 2,   //指定用数据的『哪个维度』，映射到视觉元素上
      orient: 'vertical',
      // top: 'center',
      itemWidth:10,
      itemHeight:120,
      text: ['放电次数(次)'],
      textGap: 20,   //组件与text之间的距离
      calculable: true,  //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
      hoverLink: true,   //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
      textStyle: {
        color: '#fff',
        fontSize:12,
      },
      inRange: {
        color: ['#c1da1f', '#bc872a', '#c02221'],
      },
    }
  ],
  series: [
    // 正弦波
    {
      type: 'line',
      showSymbol: false,
      clip: true,
      data: sinData(),
      color: '#fff'
    },
    // 散点图
    {
      symbolSize: 3,  //散点的大小
      data: arr,
      type: 'scatter',
      symbol: 'rectangle',   //设置散点图形状
    }
  ]
};

setInterval(function () {
  for (var num = 0; num < 5000; num++) {
    var tem = data[num][0];
    // +10代表增加10个周期
    data[num][0] = tem + 10
  }
  for (var num3 = 0; num3 <= 9; num3++) {
    for (var num2 = 0; num2 <= 100; num2++) {
      // num2 * 5是因为一周期有71个数但是坐标轴是[0,3600]，所以一格代表3.6，故乘以3.6
      data.unshift([num3, num2 * 3.6, Math.floor(Math.random() * 51)])
      data.pop()
    }
  }
  var array = data.map(item => [item[1], item[2]])   //[x,y,z]=>[y,z]
  var arr = array.map(item => [...item, array.filter(ins => ins[0] === item[0] && ins[1] === item[1]).length]);
  myChart.setOption({
    series: [
      // 正弦波
      {
        type: 'line',
        showSymbol: false,
        clip: true,
        data: sinData(),
        color: '#fff'
      },
      // 散点图
      {
        symbolSize: 3,  //散点的大小
        data: arr,
        type: 'scatter',
        symbol: 'rectangle',   //设置散点图形状
      }
    ]
  })
}, 200);