echarts 柱图分组统计

我会带着你远行 2024-04-18 06:59 66阅读 0赞

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

## html ##

## 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);

## 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d78e763897f34cbaa684aed46068cb49.png