简介：
brush 区域选择组件，用于实现区域选择交互效果。通过 brush 组件，可以通过鼠标拖动或缩放操作选中图表中的一段数据区间，从而实现数据的筛选和聚焦。
注意事项：
1该组件中的 数据刷选效果和数据选中，目前只在 散点图 scatter、柱状图 bar、K 线图candlestick，中才能选中对应数据并出现视觉元素样式。
文章中截图代码的配置代码在文章最后，可直接在 Echarts 中的示例配置中使用。
一、区域选择组件 brush 配置代码
// 区域选择组件配置
option={
brush:{
id:'1', // 组件ID
z:1, // 选框的 z-index
toolbox:['rect', 'polygon', 'keep', 'clear'],// toolbox 中的按钮 rect 矩形，polygon 任意形状等。
brushLink:[1,2], // 指定相关系列关联在一起，一起展示刷选突出的效果。可设置 'all'。
seriesIndex:[1，2], // 指定相关系统可以触发刷选效果，可设置 'all'。
geoIndex:[1,2], // 指定相关 geo 地理坐标系可触发刷选， 可设置 'all'。
xAxisIndex:[1,2], // 指定相关的 xAxisIndex 可刷选，可设置 'all'。
yAxisIndex:[1,2], // 指定相关的 yAxisIndex 可刷选，可设置 'all'。
brushType:'rect', // 默认的刷选类型
brushMode:'multiple', // 默认刷选的模式
transoformable:true, // 刷选的区域是否可以移动
throttleType:'fixRate', // 在刷选区域变化时，展示数据动画的更新模式，是刷选停止后还是按照一定时间频率来更新
throttleDelay:100, // 刷选区域变化时，数据动画更新时间。
removeOnClick:true, // 是否支持单击清除所有选框
// 刷选框样式
brushStyle:{
color:'red', // 图形颜色
borderColor:'red', // 图形描边颜色
borderWidth:5, // 图形描边宽度
borderType:'solid', // 图形描边线类型
borderDashOffset:5, // 图形描边线为虚线时，虚线的偏移量
borderCap:'butt', // 指定线段末端形状
borderJoin:'bevel', // 两个线段相连部分的形状
borderMiterLimit:10, // borderJoin 为 miter 时,斜接面比例
shadowBlur:20, // 图形阴影大小
shadowColor:'red', // 图形阴影颜色
shadowOffsetX:10, // 图形阴影水平偏移量
shadowOffsetY:10, // 图形阴影竖直偏移量
opacity:0.5, // 图形透明度
},
// 选框中的视觉元素样式
inBrush:{
symbol:'circle', // 图元图形 可以是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin'
symbolSize:32, // 图元大小
color:'red', // 图元颜色
colorAlpha:0.5, // 图元透明度
opacity:0.8, // 图元以及其附属物的透明度
},
// 未选中的视觉元素样式
outOfBrush:{
symbol:'circle', // 图元图形 可以是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin'
symbolSize:32, // 图元大小
color:'red', // 图元颜色
colorAlpha:0.5, // 图元透明度
opacity:0.8, // 图元以及其附属物的透明度
},
}
}二、解剖图
三、截图 option 配置代码
使用：
代码：
option = {
color: ["#3398DB"],
tooltip: {
trigger: "axis"
},
brush:{
toolbox:['rect', 'polygon', 'keep', 'clear'],
},
// 缩放组件
dataZoom:[
{ type:'inside',}
],
// 视觉映射组件
visualMap:{
color:['rgb(84,112,198)','rgb(145,204,117)','rgb(250,200,88)','rgb(238,102,102)','rgb(155,192,222)','rgb(59,162,114)'],
},
xAxis: {
data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"]
},
yAxis: {
splitLine: {
show: false
}
},
series: {
name: "Beijing AQI",
type: "bar",
data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188, 194, 159, 159, 169, 244, 199, 163, 149, 80, 67, 162, 140, 143, 125, 76, 119, 70, 104, 109, 159, 124, 135, 150, 164, 169, 83, 155, 75, 59, 78, 136, 103, 104, 176, 89, 127, 54, 100, 140, 186, 200, 61, 109, 111, 114, 97, 94, 66, 54, 87, 80, 84, 117, 168, 129, 127, 64, 60, 144, 170, 58, 87, 70, 53, 92, 78, 123, 95, 54, 68, 200, 314, 379, 346, 233, 80, 73, 76, 132, 211, 289, 250, 82, 99, 163, 267, 353, 78, 72, 88, 140, 206, 204, 65, 59, 150, 79, 63, 93, 80, 95, 59, 65, 77, 143, 98, 64, 93, 282, 155, 94, 196, 293, 83, 114, 276, 54, 65, 51, 62, 89, 65, 82, 276, 153, 52, 69, 113, 82, 99, 53, 103, 100, 73, 155, 243, 155, 125, 65, 65, 79, 200, 226, 122, 60, 85, 190, 105, 208, 59, 160, 211, 265, 386, 118, 89, 94, 77, 113, 143, 257, 117, 185, 119, 65, 87, 60, 108, 188, 143, 62, 100, 152, 166, 55, 59, 175, 293, 326, 153, 73, 267, 183, 394, 158, 86, 207]
}
}