Echarts 实现设备运行状态图工业大数据展示

设备运行状态图

需求：

翻阅echarts 官网实例，发现其中的 profile 图就是想要的效果：

https://echarts.apache.org/examples/zh/editor.html?c=custom-profile

var data = [];
var dataCount = 100;// 测试数据条数
var startTime = 1525835791000; // 2018/5/9 11:16:31
var categories = ['大族激光1', '大族激光2', '大族激光3', '大族激光4'].reverse();
var types = [{name: '运行',color: 'green'},{name: '待机',color: 'yellow'},{name: '停机',color: 'red'},
];// Generate mock data// echarts.util.each(categories, function(category, index) {
//     var baseTime = startTime;
//     for (var i = 0; i < dataCount; i++) {
//         var typeItem = types[Math.round(Math.random() * (types.length - 1))];
//         var duration = Math.round(Math.random() * 10000);
//         data.push({
//             name: typeItem.name,
//             value: [
//                 index,
//                 baseTime,
//                 baseTime += duration,
//                 duration
//             ],
//             itemStyle: {
//                 normal: {
//                     color: typeItem.color
//                 }
//             }
//         });
//         baseTime += Math.round(Math.random() * 200);
//     }
// });data = [{name: '运行',value: [0, 1525835791000, 1525835791000 + 600000, 600000],itemStyle:{normal: {color: 'green'}}},{name: '停机',value: [0, 1525836391000, 1525836391000 + 600000, 600000],itemStyle:{normal: {color: 'red'}}},{name: '运行',value: [0, 1525836991000, 1525836991000 + 600000, 600000],itemStyle:{normal: {color: 'green'}}},{name: '停机',value: [0, 1525837591000, 1525837591000 + 600000, 600000],itemStyle:{normal: {color: 'red'}}},// value 第一个参数: 设备 index; //       第二个参数: 状态的开始时间; //       第三个参数: 状态的结束时间; //       第四个参数: 状态的持续时间; {name: '运行',value: [1, 1525835791000, 1525835791000 + 600000, 600000],itemStyle:{normal: {color: 'green'}}},{name: '运行',value: [1, 1525836391000, 1525836391000 + 600000, 600000],itemStyle:{normal: {color: 'green'}}},{name: '停机',value: [1, 1525836991000, 1525836991000 + 600000, 600000],itemStyle:{normal: {color: 'red'}}},{name: '运行',value: [1, 1525837591000, 1525837591000 + 600000, 600000],itemStyle:{normal: {color: 'green'}}},]function renderItem(params, api) {var categoryIndex = api.value(0);var start = api.coord([api.value(1), categoryIndex]);var end = api.coord([api.value(2), categoryIndex]);var height = api.size([0, 1])[1] * 0.6;return {type: 'rect',shape: echarts.graphic.clipRectByRect({x: start[0],y: start[1] - height / 2,width: end[0] - start[0],height: height}, {x: params.coordSys.x,y: params.coordSys.y,width: params.coordSys.width,height: params.coordSys.height}),style: api.style()};
}option = {tooltip: {formatter: function(params) {console.log(params)return params.marker + params.name + ': ' + params.value[3] / 1000 + ' s';}},title: {text: '设备状态',left: 'center'},legend: {data: types,bottom: 30,right: 20,selectedMode: false,},dataZoom: [{type: 'slider',filterMode: 'weakFilter',showDataShadow: false,top: 400,height: 10,start: 0,end: 100, borderColor: 'transparent',backgroundColor: '#e2e2e2',handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:linehandleSize: 20,handleStyle: {shadowBlur: 6,shadowOffsetX: 1,shadowOffsetY: 2,shadowColor: '#aaa'},labelFormatter: ''}, {type: 'inside',filterMode: 'weakFilter'}],grid: {height: 300},xAxis: {type: 'time',min: startTime,scale: true,// axisLabel: {//     formatter: function(val) {//         return Math.max(0, val - startTime);//     }// }},yAxis: {data: categories},series: [{name: types[0].name, type: 'bar', data: [], color: 'red'},{name: types[1].name, type: 'bar', data: [], color: 'green'},{name: types[2].name, type: 'bar', data: [], color: 'yellow'},{type: 'custom',renderItem: renderItem,itemStyle: {normal: {opacity: 0.8}},encode: {x: [1, 2, 3],y: 0,},data: data}]
};

最终实现效果：

Echarts 实现设备运行状态图工业大数据展示相关推荐

【工业大数据】大数据驱动的智能车间运行分析与决策方法体系
随着信息化和自动化技术的飞速发展,特别是数控机床.传感器.数据采集装置和其他具备感知能力的智能设备在离散车间底层的大量使用,车间生产从自动化.数字化向智能化发展. 智能车间的制造数据呈现出典型的大数据 ...
工业大数据云平台，设备大数据云平台
工业大数据云平台,设备大数据云平台从工业大数据到智能制作,工业大数据云平台,设备大数据云平台将为工业创新和产能进步带来新的机遇,在万物互联的年代助力出产力的进步,给全球工业带来深入的变革,创新企业的 ...
ApacheCON Asia 2021清华大学软件学院王建民：工业大数据软件与开源创新
演讲人简介王建民教授,清华大学软件学院院长.大数据系统软件国家工程实验室执行主任.清华大学大数据研究中心常务副主任,工业大数据系统与应用重点北京市重点实验室主任.国家工业互联网战略咨询专家委员会委员 ...
工业大数据的真正意义和价值
近年来,以 .移动互联网.大数据.云计算为代表的新一代信息技术,以 . .人机协作为代表的新型制造技术,与新能源.新材料与生物科技呈现多点突破.交叉融合,智能制造技术创新不断取得新突破.2016年是我 ...
工业大数据的应用与实践
工业大数据的应用与实践袁爱进1,岳滨楠2,闫鑫2,黄健2 1. 三一集团有限公司,上海 201299 2. 上海华兴数字科技有限公司,上海 201299 摘要:随着物联网和信息物理系统时代的来临,更 ...
【2017年第4期】工业大数据技术与架构
郑树泉,1,3, 覃海焕,2,3, 王倩,1,3 1. 上海计算机软件技术开发中心,上海 201112 2. 上海电机学院电子信息学院,上海 201306 3. 上海产业技术研究院工程大数据服务创新中 ...
如何利用工业大数据降本增效
工业大数据是互联网,大数据和工业产业结合的产物,同时又反作用于产业升级发展.对于制造业而言,了解行业大数据产生的背景,归纳行业大数据的分类和特点,从数据流推动本身价值创造的视角看待.重造工业价值流程, ...
工业大数据发展面临四方面挑战
推动以数据为核心的工业转型升级,不仅已成为产业宏观层面的共识,也给微观层面的企业带来了实实在在的效益,但工业大数据的发展也面临着数据资源不足.数据管理滞后.孤岛普遍存在.应用深度不足等四大挑战,因此, ...
工业大数据的发展面临哪四大挑战
以数据为关键因素推动产业转型升级,不仅成为行业在宏观层面的共识,而且在微观层面上也给企业带来了实实在在的利益.然而,工业大数据的发展也面临着数据资源不足.数据管理滞后.孤岛普遍存在.应用深度不足等四大 ...
【工业互联网】郭朝晖：工业互联网平台背景下的工业大数据与智能制造
4月11日,工业互联网平台宣讲团第二季第三讲继续开讲,由走向智能研究院工业大数据首席专家.清华大学访问学者郭朝晖为大家分享"工业互联网平台背景下的工业大数据与智能制造"." ...

Echarts 实现设备运行状态图工业大数据展示

Echarts 实现设备运行状态图工业大数据展示相关推荐

最新文章

热门文章

Echarts 实现 设备运行状态图 工业大数据展示

Echarts 实现 设备运行状态图 工业大数据展示相关推荐

最新文章

热门文章

Echarts 实现设备运行状态图工业大数据展示

Echarts 实现设备运行状态图工业大数据展示相关推荐