以下是一个简单的例子，演示如何在 ECharts 中添加数据区域的选框事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 选框事件</title>
<!-- 引入 ECharts 库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 创建一个包含图表的 DOM 元素 -->
<div id="myChart" style="width: 800px; height: 400px;"></div>
<script>
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('myChart'));
// 模拟的数据
var data = [
[1, 2, 3, 4, 5],
[5, 4, 3, 2, 1],
[3, 2, 5, 4, 1],
// 其他数据...
];
// ECharts 配置项
var option = {
xAxis: {
type: 'category',
data: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
data: data[0]
},
{
type: 'line',
data: data[1]
},
{
type: 'line',
data: data[2]
}
// 其他系列...
],
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
show: true,
type: 'slider',
y: '90%',
start: 0,
end: 100
}
],
// 选框事件监听
brush: {
toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
xAxisIndex: 0
}
};
// 使用配置项设置 ECharts 图表
myChart.setOption(option);
</script>
</body>
</html>
在上面的例子中，我们使用了 dataZoom 组件来实现选框功能。其中，type: 'slider' 表示显示滑动条，用户可以通过滑动条选择数据区域。brush 配置项用于定义选框的形状和样式，以及选择的坐标轴。
你可以根据实际需求调整 dataZoom 和 brush 的配置。更多关于这两个配置项的详细信息，可以查阅 ECharts 文档：
- [dataZoom](https://echarts.apache.org/zh/option.html#dataZoom)
- [brush](https://echarts.apache.org/zh/option.html#brush)
转载请注明出处：http://www.zyzy.cn/article/detail/5101/ECharts