前端选择日期然后更新echars图

最近在做一个前端的网页项目，就是有一个选择日期功能，用户点击日期，然后就可以显示当天的一个数据分析，那个数据分析使用echarts图标做的。
怎么样才能实现呢？谢谢！非常感谢

前端页面，有两个内容：

一个是日期选择器，日期更改，携带新日期向后端请求新日期的数据；
另一个是echarts图表，在日期更新后获取到新数据之后，重新渲染，echarts重新渲染示例如下；

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echars重新渲染</title>
  </head>

  <body>
    <div id="echartId" style="width: 500px;height: 400px;"></div>
    <script>
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 10,
          left: 60,
          right: 60,
          bottom: 30,
          textStyle: {
            color: '#fff',
          },
        },
        legend: {
          show: false,
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          scale: true,
          name: '总量',
        },
        series: [
          {
            name: 'test',
            type: 'bar',
            stack: '总量',
            data: [
              '-',
              '-',
              40,
              80,
              120,
              80,
              40,
              '-',
              '-',
              40,
              80,
              120,
              80,
              40,
              '-',
            ],
          }
        ],
      } // _option，更改日期后需要更新_option内数据，然后重新渲染

      let myChart = echarts.getInstanceByDom(
        document.getElementById('echartId'),
      )
      if (myChart == null) {
        let chartDom = document.getElementById('echartId')
        myChart = echarts.init(chartDom)
      }

      myChart.setOption(_option, true)
    </script>
  </body>

</html>

1）把日期传到后台，后台组织好数据，传到前台echarts，echarts负责展示，就这样呢！

将echarts的渲染封装成一个函数（参数：获取到的数据）。切换时间，获取数据，将数据传入封装好的函数调用

echarts图表展示的数据来源是后端服务接口，跟后端开发约定好接口传参，根据指定的日期返回数据，将数据传给封装好的组件用来前端显示