echarts 柱图分组统计

统计按单位统计每个单位下子系统的信息

html

<div id="chart" style="height: 100%;"></div>

js

option = {
  	color: ['#3e6591', '#eb7d22', '#d73f45'],
	tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
  	grid: {
      	left: 250
    },
    xAxis: {
      	axisLine: {
          	lineStyle: {color: '#ccc'}
        },
      	axisLabel: {
          	textStyle: {color: '#777'}
        }
    },
    yAxis: [{
      	inverse: true,
      	splitLine: {
          	show: true
        },
      	axisTick: {
          	length: 100,
          	lineStyle: {color: '#ccc'}          
        },
      	axisLine: {
          	lineStyle: {color: '#ccc'}
        },
        data: ['-', '-', '-', '-', '-','-', '-','-', '-','-']      
    }, {
      	name: '',
      	nameLocation: 'start',      
      	nameTextStyle: {
          	fontWeight: 'bold'
        },
	    position: 'left',
      	offset: 130,
      	axisLine: {
          	onZero: false,
          	show: false          
        },
      	axisTick: {
          	length: 70,
          	inside: true,
          	lineStyle: {color: '#ccc'}
        },      
      	axisLabel: {
          	inside: true
        },      
      	inverse: true,      
      	data: []
    }, {
      	name: '                下属单位',
      	nameLocation: 'start',
      	nameTextStyle: {
          	fontWeight: 'bold'
        },      
		position: 'left',
      	offset: 220,
      	axisLine: {
          	onZero: false,
          	show: false
        },
      	axisTick: {
          	length: 100,
          	inside: true,
          	lineStyle: {color: '#ccc'}          
        },
      	axisLabel: {
          	inside: true
        },
      	inverse: true,
      	data: ['xxx站', 'YYY站', 'nnn站', 'ppp站', 'qqq站','eee站', 'aaa站', 'bbb站', 'ccc站','ddd站']      
    }],
    series: [{
		name:"火警未处理",
		stack: '火警',
        type: 'bar',
        data:[220, 182, 191, 234, 290,123, 131, 254, 278,121],
        label: {
         	normal: {
              	show: true,
              	position: 'left',
              	textStyle: {color: '#008000'},
              	formatter: '火灾报警系统',              
            }
        }
    },{
		name:"故障未处理",
		stack: '火警',
        type: 'bar',
        data:[220, 182, 191, 234, 290,212, 131, 254, 278,121],
        // label: {
        //  	normal: {
        //       	show: true,
        //       	position: 'left',
        //       	textStyle: {color: '#000'},
        //       	formatter: '火灾报警系统',              
        //     }
        // }
    },{
		name:"告警未处理",
		stack: '火警',
        type: 'bar',
        data:[220, 182, 191, 234, 290,230, 131, 254, 278,121]
    }, {
		name:"任务完成",
        type: 'bar',
		stack: '巡检',
        data:[210, 132, 91, 204, 220,132, 131, 254, 278,121],
        label: {
         	normal: {
              	show: true,
              	position: 'left',
              	textStyle: {color: '#FFA500'},
              	formatter: '巡检系统',              
            }
        }      
    }, {
		name:"任务未完成",
        type: 'bar',
		stack: '巡检',
        data:[210, 132, 91, 204, 220,153, 131, 254, 278,121]
    }, {
		name:"告警数",
        type: 'bar',
		stack: '电气火灾',
        data:[210, 132, 91, 204, 220,261, 131, 254, 278,121],
        label: {
         	normal: {
              	show: true,
              	position: 'left',
              	textStyle: {color: '#B10E81'},
              	formatter: '电气火灾系统',              
            }
        }      
    }, {
		name:"告警数",
        type: 'bar',
		stack: '电气火灾',
        data:[210, 132, 91, 204, 220,201, 131, 254, 278,121]
    }, {
		name:"告警数",
        type: 'bar',
		stack: '防火门',
        data:[210, 132, 91, 204, 220,211, 131, 254, 278,121],
        label: {
         	normal: {
              	show: true,
              	position: 'left',
              	textStyle: {color: 'cadetblue'},
              	formatter: '防火门系统',              
            }
        }      
    },, {
		name:"故障数",
        type: 'bar',
		stack: '防火门',
        data:[210, 132, 91, 204, 220,152, 131, 254, 278,121]
    }, {
		name:"压力异常",
        type: 'bar',
		stack: '水',
        data:[120, 132, 131, 254, 278,162, 131, 254, 278,121],
        label: {
         	normal: {
              	show: true,
              	position: 'left',
              	textStyle: {color: '#000'},
              	formatter: '水系统',              
            }
        }      
    }, {
		name:"液位异常",
        type: 'bar',
		stack: '水',
        data:[120, 132, 131, 254, 278,121, 131, 254, 278,121]
    }, {      
        type: 'bar',
        data:['-', '-', '-', '-', '-','-', '-','-', '-','-'],
      	yAxisIndex: 1
    }, {
        type: 'bar',
        data:['-', '-', '-', '-', '-','-', '-','-', '-','-'],
      	yAxisIndex: 2
    }]
};


var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);

效果