Echart-bar-brush练习测试-折腾笔记

app.title = '柱状图框选';

var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
var data5 = [];
var data6 = [];
var data7 = [];
var data8 = [];

    xAxisData.push('操作时间');
    xAxisData.push('开机时间');
    xAxisData.push('制造时间');
    xAxisData.push('生产时间');
    xAxisData.push('理论生产时间');
    xAxisData.push('实际生产时间');
    
    
    data1.push(453);
    data2.push(27);
    data3.push(0);
    data4.push(0);
    data5.push(0);
    data6.push(0);
    data7.push(0);
    data8.push(0);
    
    data1.push(400);
    data2.push(0);
    data3.push(10);
    data4.push(43);
    data5.push(0);
    data6.push(0);
    data7.push(0);
    data8.push(0);
    
    data1.push(375);
    data2.push(0);
    data3.push(0);
    data4.push(0);
    data5.push(25);
    data6.push(0);
    data7.push(0);
    data8.push(0);
    
    data1.push(335);
    data2.push(0);
    data3.push(0);
    data4.push(0);
    data5.push(0);
    data6.push(40);
    data7.push(0);
    data8.push(0);
    
    data1.push(303);
    data2.push(0);
    data3.push(0);
    data4.push(0);
    data5.push(0);
    data6.push(0);
    data7.push(32);
    data8.push(0);
    
    
    data1.push(283);
    data2.push(0);
    data3.push(0);
    data4.push(0);
    data5.push(0);
    data6.push(0);
    data7.push(0);
    data8.push(20);
    

var itemStyle = {
    normal: {
    },
    emphasis: {
        barBorderWidth: 1,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0,0,0,0.5)'
    }
};

option = {
    backgroundColor: '#eee',
    brush: {
        toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
        xAxisIndex: 0
    },
    toolbox: {
        feature: {
            magicType: {
                type: ['stack', 'tiled']
            },
            dataView: {}
        }
    },
    tooltip: {},
    xAxis: {
        data: xAxisData,
        name: '项',
        silent: false,
        axisLine: {onZero: true},
        splitLine: {show: false},
        splitArea: {show: false}
    },
    yAxis: {
        name: '时间',
        //inverse: true,
        splitArea: {show: false}
    },
    grid: {
        left: 100
    },
    series: [
        {
            name: '剩余时间',
            type: 'bar',
            stack: 'one',
            itemStyle: itemStyle,
            data: data1
        },
        {
            name: '非计划停机',
            type: 'bar',
            stack: 'one',
            itemStyle: itemStyle,
            data: data2
        },
        {
            name: '计划停机',
            type: 'bar',
            stack: 'one',
            itemStyle: itemStyle,
            data: data3
        },
        {
            name: '工程师测试',
            type: 'bar',
            stack: 'one',
            itemStyle: itemStyle,
            data: data4
        },
        {
            name: '设备空闲',
            type: 'bar',
            stack: 'one',
            itemStyle: itemStyle,
            data: data5
        },
        {
            name: '效率损失',
            type: 'bar',
            stack: 'one',
            itemStyle: itemStyle,
            data: data6
        },
        {
            name: '不良品损失',
            type: 'bar',
            stack: 'one',
            itemStyle: itemStyle,
            data: data7
        },
        {
            name: 'bar8',
            type: 'bar',
            stack: 'one',
            itemStyle: itemStyle,
            data: data8
        }
    ]
};

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'
            }
        }
    });
}