brush只有在全是line的情况下不能提取出坐标echarts slider配置项内容和展示
brush只有在全是line的情况下不能提取出坐标，只有其中一个改成bar就可以了
配置项如下
option = {
// color: ['#D53A35', '#E98F6F', '#6AB0B8', '#334B5C'],
animation: false,
//title: {
// text: '报警次数'
//},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
axis: 'x',
},
backgroundColor: 'rgba(245, 245, 245, 0.8)',
borderWidth: 2,
borderColor: '#ccc',
padding: [5, 20, 5, 10],
textStyle: {
color: '#f41',
fontWeight: 'bolder',
},
formatter: function(params) {
return params[0].name + '<br/>' +
params[0].seriesName + ' : ' + params[0].value + ' ' + '<br/>' +
params[1].seriesName + ' : ' + params[1].value + ' ' + '<br/>' +
params[2].seriesName + ' : ' + params[2].value + ' ' + '<br/>' +
params[3].seriesName + ' : ' + params[3].value + ' ' + '<br/>' +
params[4].seriesName + ' : ' + params[4].value + ' ' + '<br/>' +
params[5].seriesName + ' : ' + params[5].value + ' ' + '<br/>';
}
//formatter: "{b} <br> 合格率: {c}%"
},
legend: {
data: ['1', '2', '3', '4', '5', '6'],
// bottom: 10,
left: 'center',
textStyle: {
// color: '#f41',
fontWeight: 'lighter',
fontSize: 30,
fontFamily: 'serif'
},
},
grid: {
left: '10%',
right: '10%',
height: '75%',
// containLabel: true
},
brush: {
xAxisIndex: 'all',
brushLink: 'all',
brushType: 'polygon',
brushStyle: {
borderWidth: 2,
color: 'rgba(0,0,0,0.2)',
borderColor: 'rgba(0,0,0,0.5)',
},
throttleType: 'debounce',
throttleDelay: 300,
outOfBrush: {
colorAlpha: 0.1
}
},
// brush: {
// outOfBrush: {
// color: '#abc'
// },
// brushStyle: {
// borderWidth: 2,
// color: 'rgba(0,0,0,0.2)',
// borderColor: 'rgba(0,0,0,0.5)',
// },
// seriesIndex: [0, 1],
// throttleType: 'debounce',
// throttleDelay: 300,
// // xAxisIndex: 0
// // geoIndex: 0
// },
dataZoom: {
show: true,
// xAxisIndex: [0, 1],
// type: 'slider',
// top: '85%',
// start: 98,
// end: 100
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: false
},
brush: {
type: ['lineX', 'clear']
}
}
},
xAxis: {
type: 'category',
name: '日期',
boundaryGap: false,
data: ['5.1', '5.2', '5.3', '5.4', '5.5', '5.6', '5.7'],
min: 'dataMin',
max: 'dataMax',
splitNumber: 20,
scale: true,
boundaryGap: false,
axisLine: {
onZero: false
},
splitLine: {
show: false
},
axisPointer: {
z: 100
}
},
yAxis: {
type: 'value',
// name: '报警次数',
scale: true,
splitArea: {
show: true
}
},
series: [{
name: '1',
type: 'line',
// stack: '总量',
smooth: true,
lineStyle: {
normal: {
opacity: 0.6
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '2',
type: 'line',
// stack: '总量',
smooth: true,
lineStyle: {
normal: {
opacity: 0.6
}
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '3',
type: 'line',
// stack: '总量',
smooth: true,
lineStyle: {
normal: {
opacity: 0.6
}
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '4',
type: 'line',
// stack: '总量',
smooth: true,
lineStyle: {
normal: {
opacity: 0.6
}
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '5',
type: 'line',
// stack: '总量',
smooth: true,
lineStyle: {
normal: {
opacity: 0.6
}
},
data: [120, 132, 101, 134, 190, 130, 320]
},
{
name: '6',
type: 'line',
// stack: '总量',
smooth: true,
lineStyle: {
normal: {
opacity: 0.6
}
},
data: [20, 32, 30, 33, 30, 33, 32]
},
{
name: '数据空',
type: 'bar',
stack: '总量',
data: [0, 0, 0, 0, 0, 0, 0]
},
]
};
myChart.setOption(option);
setTimeout(function() {
myChart.dispatchAction({
type: 'brush',
areas: [{
geoIndex: 0,
brushType: 'polygon',
coordRange: [
[119.72, 34.85],
[119.68, 34.85],
[119.5, 34.84],
[119.19, 34.77],
[118.76, 34.63],
[118.6, 34.6],
[118.46, 34.6],
[118.33, 34.57],
[118.05, 34.56],
[117.6, 34.56],
[117.41, 34.56],
[117.25, 34.56],
[117.11, 34.56],
[117.02, 34.56],
[117, 34.56],
[116.94, 34.56],
[116.94, 34.55],
[116.9, 34.5],
[116.88, 34.44],
[116.88, 34.37],
[116.88, 34.33],
[116.88, 34.24],
[116.92, 34.15],
[116.98, 34.09],
[117.05, 34.06],
[117.19, 33.96],
[117.29, 33.9],
[117.43, 33.8],
[117.49, 33.75],
[117.54, 33.68],
[117.6, 33.65],
[117.62, 33.61],
[117.64, 33.59],
[117.68, 33.58],
[117.7, 33.52],
[117.74, 33.5],
[117.74, 33.46],
[117.8, 33.44],
[117.82, 33.41],
[117.86, 33.37],
[117.9, 33.3],
[117.9, 33.28],
[117.9, 33.27],
[118.09, 32.97],
[118.21, 32.7],
[118.29, 32.56],
[118.31, 32.5],
[118.35, 32.46],
[118.35, 32.42],
[118.35, 32.36],
[118.35, 32.34],
[118.37, 32.24],
[118.37, 32.14],
[118.37, 32.09],
[118.44, 32.05],
[118.46, 32.01],
[118.54, 31.98],
[118.6, 31.93],
[118.68, 31.86],
[118.72, 31.8],
[118.74, 31.78],
[118.76, 31.74],
[118.78, 31.7],
[118.82, 31.64],
[118.82, 31.62],
[118.86, 31.58],
[118.86, 31.55],
[118.88, 31.54],
[118.88, 31.52],
[118.9, 31.51],
[118.91, 31.48],
[118.93, 31.43],
[118.95, 31.4],
[118.97, 31.39],
[118.97, 31.37],
[118.97, 31.34],
[118.97, 31.27],
[118.97, 31.21],
[118.97, 31.17],
[118.97, 31.12],
[118.97, 31.02],
[118.97, 30.93],
[118.97, 30.87],
[118.97, 30.85],
[118.95, 30.8],
[118.95, 30.77],
[118.95, 30.76],
[118.93, 30.7],
[118.91, 30.63],
[118.91, 30.61],
[118.91, 30.6],
[118.9, 30.6],
[118.88, 30.54],
[118.88, 30.51],
[118.86, 30.51],
[118.86, 30.46],
[118.72, 30.18],
[118.68, 30.1],
[118.66, 30.07],
[118.62, 29.91],
[118.56, 29.73],
[118.52, 29.63],
[118.48, 29.51],
[118.44, 29.42],
[118.44, 29.32],
[118.43, 29.19],
[118.43, 29.14],
[118.43, 29.08],
[118.44, 29.05],
[118.46, 29.05],
[118.6, 28.95],
[118.64, 28.94],
[119.07, 28.51],
[119.25, 28.41],
[119.36, 28.28],
[119.46, 28.19],
[119.54, 28.13],
[119.66, 28.03],
[119.78, 28],
[119.87, 27.94],
[120.03, 27.86],
[120.17, 27.79],
[120.23, 27.76],
[120.3, 27.72],
[120.42, 27.66],
[120.52, 27.64],
[120.58, 27.63],
[120.64, 27.63],
[120.77, 27.63],
[120.89, 27.61],
[120.97, 27.6],
[121.07, 27.59],
[121.15, 27.59],
[121.28, 27.59],
[121.38, 27.61],
[121.56, 27.73],
[121.73, 27.89],
[122.03, 28.2],
[122.3, 28.5],
[122.46, 28.72],
[122.5, 28.77],
[122.54, 28.82],
[122.56, 28.82],
[122.58, 28.85],
[122.6, 28.86],
[122.61, 28.91],
[122.71, 29.02],
[122.73, 29.08],
[122.93, 29.44],
[122.99, 29.54],
[123.03, 29.66],
[123.05, 29.73],
[123.16, 29.92],
[123.24, 30.02],
[123.28, 30.13],
[123.32, 30.29],
[123.36, 30.36],
[123.36, 30.55],
[123.36, 30.74],
[123.36, 31.05],
[123.36, 31.14],
[123.36, 31.26],
[123.38, 31.42],
[123.46, 31.74],
[123.48, 31.83],
[123.48, 31.95],
[123.46, 32.09],
[123.34, 32.25],
[123.22, 32.39],
[123.12, 32.46],
[123.07, 32.48],
[123.05, 32.49],
[122.97, 32.53],
[122.91, 32.59],
[122.83, 32.81],
[122.77, 32.87],
[122.71, 32.9],
[122.56, 32.97],
[122.38, 33.05],
[122.3, 33.12],
[122.26, 33.15],
[122.22, 33.21],
[122.22, 33.3],
[122.22, 33.39],
[122.18, 33.44],
[122.07, 33.56],
[121.99, 33.69],
[121.89, 33.78],
[121.69, 34.02],
[121.66, 34.05],
[121.64, 34.08]
]
}]
});
}, 0);
myChart.on('brushselected', renderBrushed);
function renderBrushed(params) {
var brushed = [];
var brushComponent = params.batch[0];
for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
var rawIndices = brushComponent.selected[sIdx].dataIndex;
brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
}
myChart.setOption({
title: {
backgroundColor: '#333',
text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
bottom: 0,
right: 0,
width: 100,
textStyle: {
fontSize: 12,
color: '#fff'
}
}
});
}
截图如下
