echarts 柱图分组统计

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

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

效果

echarts 柱图分组统计相关推荐

echarts柱图分组显示(簇状柱形图)
需求:设计echarts柱图,相同类型数据放在一起,使用不同背景色分割所用属性:yAxis/xAxis.splitArea splitArea:坐标轴在 grid 区域中的分隔区域思路:其实我这个 ...
Echarts 柱图中的柱条（bar）的最小高度设置方法，数字显示不全的解决方法
问题:在使用 echarts 柱图时,如果某个柱条(bar)的数据特别小.那么该柱条会显示的特别小,在柱条中的数字也无法完整的显示. 解决办法:设置 series 的 barMinHeight 配置项 ...
数据可视化大屏电商数据展示平台开发实录(Echarts柱图曲线图、mysql筛选统计语句、时间计算、大数据量统计)
数据可视化大屏电商数据展示平台一.前言二.项目介绍三.项目展示四.项目经验分享 4.1 翻牌器 4.1.1 翻牌器-今日实时交易 4.1.2.翻牌器后端统计SUM函数的使用 4.2 不同时间指 ...
echarts柱图根据值显示不同颜色_视频 | Origin画3D柱图，这篇讲透了！
视频教程东华大学的汪博士提出一个问题:怎样画三维柱状图.汪博士提供了一篇王中林院士的文献图,画一个只有四根柱子的三维柱图. 画了一个草图,A0.A1安排在第二行,A3.A2安排在第一行.相信很多同学 ...
echarts 柱图立体_Echarts 实现象形柱图（三角柱子）
先来看下实现效果: 代码:(vue+typescript+Echarts) HTML部分: TS部分: public mounted() { this.drawBarEcharts(); } publ ...
Echarts最简单的折线图、柱图、饼图、仪表盘+sql语句
注:以后所有升级版的图形化显示都在此基础上延伸,打好基础才是硬道理本人小白一枚〜欢迎来讨论一,柱图显示: HTM页面: <html style="height: 100%" ...
react echarts 绘制带有滑块柱图
实现效果图如下: 需要具备知识: 1 react 项目创建 2 react组件的导入使用方法:react中引入 TrafficColumnQTI 组件<TrafficColumnQTI /&g ...
echarts实现横向柱图文字在柱图上面
前言: echarts实现横向柱图文字在柱图上面效果图: 实现源代码: <div id="lip" style="width:100%;height:800px; ...
echarts分段式的象形柱图
最近做项目UI那边那边提了个比较少见的需求,如图: 我一开始想到的自然是用element ui的进度条来做,但找了许久都没找到这种的样式效果. 于是考虑用柱状图,如果这三个数据只用一个柱状图自然很难实 ...

echarts 柱图分组统计

html

js

效果

echarts 柱图分组统计相关推荐

最新文章

热门文章