Introduction:
brush area selection component, used to achieve area selection interactive effects. Through the brush component, you can select a data interval in the chart by dragging or zooming with the mouse, thereby realizingdataFilterandFocus.
Precautions:
1The data brush selection effect and data selection in this component are currently only available in scatter points Chart scatter, Histogram bar, K-line chart candlestick. visual element style select the corresponding data and appear can, only in
The configuration code of the screenshot code in the article is at the end of the article and can be used directly in the sample configuration in Echarts.
1. Area selection component brush configuration code
// 区域选择组件配置
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, // 图元以及其附属物的透明度
},
}
}2. Anatomy diagram
3. Screenshot option configuration code
use:
Code:
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]
}
}