直接上代码

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Basic Scatter Chart - Apache ECharts Demo</title>
</head>
<body>
  <div id="chart-container"></div>
  <script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}
#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

JS

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};

var option;

option = {
  xAxis: {},
  yAxis: {},
  //配置选框方式按钮
  brush:{
    toolbox:['rect', 'polygon', 'keep', 'clear','keep']
  },
  series: [
    {
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.2],
        [11.5, 7.2],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5.02, 5.68]
      ],
      type: 'scatter'
    }
  ]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
  //设置默认进页面就可以多个矩形框选
  myChart.dispatchAction({
      type: 'takeGlobalCursor',
      key: 'brush',
      brushOption: {
           brushType: 'rect', //选框类型                
           brushMode: 'multiple'   //单选还是多选           
       }            
     });  
}

window.addEventListener('resize', myChart.resize);