{site_name}

{site_name}

🌜 搜索

ECharts brush配置 区域选择组件(brush)是ECharts提供的

前端 𝄐 0
echarts brushselected,echarts配置项,echarts区域选中效果,echarts position的设置,echarts selectedmode,echarts自定义组件
ECharts brush配置 区域选择组件(brush)是ECharts提供的一种交互式组件,允许用户在图表上划定一个矩形区域来选择数据范围。该组件可应用于直角坐标系、极坐标系和地理坐标系等不同类型的图表中。

用户可以通过设置brush组件的各种属性来自定义其行为和样式,例如选择模式(单选或多选)、方向(横向或纵向)、选择框样式、遮罩颜色等。

以下是一个简单的例子,展示如何在柱状图中使用brush组件来选择数据范围:

javascript
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
color: '#61a0a8'
}
}],
brush: {
toolbox: ['rect', 'clear'],
xAxisIndex: 0,
brushLink: 'all',
throttleType: 'debounce',
throttleDelay: 300,
inBrush: {
opacity: 1
},
outOfBrush: {
opacity: 0.1
}
}
};


在该例子中,我们创建了一个柱状图,并在option中添加了brush配置。该brush组件允许用户使用矩形框选择x轴上的数据范围。我们还定义了一些其他属性来修改brush组件的行为和外观,如toolbox、brushLink、throttleType等。

这个例子可以在ECharts官方文档中进行交互式体验:https://echarts.apache.org/examples/zh/editor.html?c=doc-example/brush-x-axis