效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<title>echarts框选2</title>
</head>
<body>
<div id="information"style="height:700px;width: 1000px;"></div>
<script>
var chartDom = document.getElementById('information');
var myChart = echarts.init(chartDom);
var option;
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
for (var i = 0; i < 10; i++) {
xAxisData.push('Class' + i);
data1.push((Math.random() * 2).toFixed(2));
data2.push((Math.random() * 5).toFixed(2));
data3.push((Math.random() + 0.3).toFixed(2));
data4.push(-Math.random().toFixed(2));
}
var emphasisStyle = {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0,0,0,0.3)'
}
};
option = {
legend: {
data: ['bar', 'bar2', 'bar3', 'bar4'],
left: '10%'
},
brush: {
toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
xAxisIndex: 0
},
toolbox: {
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {}
}
},
tooltip: {},
xAxis: {
data: xAxisData,
name: 'X Axis',
axisLine: {onZero: true},
splitLine: {show: false},
splitArea: {show: false}
},
yAxis: {},
grid: {
bottom: 100
},
series: [
{
name: 'bar',
type: 'bar',
stack: 'one',
emphasis: emphasisStyle,
data: data1
},
{
name: 'bar2',
type: 'bar',
stack: 'one',
emphasis: emphasisStyle,
data: data2
},
{
name: 'bar3',
type: 'bar',
stack: 'two',
emphasis: emphasisStyle,
data: data3
},
{
name: 'bar4',
type: 'bar',
stack: 'two',
emphasis: emphasisStyle,
data: data4
}
]
};
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:'10%',
width: 100,
textStyle: {
fontSize: 12,
color: '#fff'
}
}
});
}
option && myChart.setOption(option);
</script>
</body>
</html>
网址:https://echarts.apache.org/examples/zh/editor.html?c=bar-brush