| 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().toFixed(2)); |
| data3.push((Math.random() * 5).toFixed(2)); |
| data4.push((Math.random() + 0.3).toFixed(2)); |
| } |
| |
| var emphasisStyle = { |
| itemStyle: { |
| barBorderWidth: 1, |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowOffsetY: 0, |
| shadowColor: 'rgba(0,0,0,0.5)' |
| } |
| }; |
| |
| option = { |
| backgroundColor: '#eee', |
| 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: { |
| inverse: true, |
| splitArea: {show: false} |
| }, |
| grid: { |
| left: 100 |
| }, |
| visualMap: { |
| type: 'continuous', |
| dimension: 1, |
| text: ['High', 'Low'], |
| inverse: true, |
| itemHeight: 200, |
| calculable: true, |
| min: -2, |
| max: 6, |
| top: 60, |
| left: 10, |
| inRange: { |
| colorLightness: [0.4, 0.8] |
| }, |
| outOfRange: { |
| color: '#bbb' |
| }, |
| controller: { |
| inRange: { |
| color: '#2f4554' |
| } |
| } |
| }, |
| 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: 0, |
| width: 100, |
| textStyle: { |
| fontSize: 12, |
| color: '#fff' |
| } |
| } |
| }); |
| } |