echarts设备状态运行图

ratel️
已于 2023-07-19 09:03:02 修改
阅读量1.9k
点赞数 3
文章标签： echarts javascript 前端
于 2023-01-11 16:36:27 首次发布
本文链接：https://blog.csdn.net/cjy_fly/article/details/128647074
版权
<!DOCTYPE html>
<html style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: auto">
  <div id="container" style="height: 100%"></div>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
  <script type="text/javascript">

    function formatDuring(mss) {
      var days = parseInt(mss / (1000 * 60 * 60 * 24));
      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = (mss % (1000 * 60)) / 1000;
      return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
    }

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};


    var colors = ['#ccc', '#75d874', '#FFA500', '#FF0000']; //三种状态的颜色
    var state = ['停机', '运行', '待机', '故障']; //三种状态
    var abc = ''


    // echart配置
    var option = {
      title: {
        text: '当前设备运行状态表',
        left: 'center',
        top: '1%'
      },
      color: colors,
      tooltip: {//提示框
        formatter: function (params) {
          abc = params
          return params.name + ':<br/>' + (params.value[0] == '1' ? '运行' : (params.value[0] == 0 ? '停机' : params.value[0] == 2 ? '待机' : '故障')) + '时间' + ': ' + params.value[1] + '~' + params.value[2] + '<br/>' + '总时长: ' + formatDuring(Date.parse(params.value[2]) - Date.parse(params.value[1])).slice(2); // (Math.abs(parseInt((new Date(params.value[3]).getTime() - new Date(params.value[2]).getTime()) / (1000 * 60 * 60 * 24))))
        }//数据的值
      },
      legend: {//图例
        data: ['停机', '运行', '待机', '故障'],
        top: '5%',
        selectedMode: false, // 图例设为不可点击
        textStyle: {
          color: '#000'
        },

        formatter: function (abc) {
          console.log(abc);
          var data = option.series[4].data;
          var tarValue = 0;
          for (var i = 0; i < data.length; i++) {
            if (data[i].value[0] == 0) {
              data[i].value[0] = '停机'
            }
            if (data[i].value[0] == abc) {
              if (data[i].value[0] == '停机') {
                console.log(data[i]);
                tarValue += (Date.parse(data[i].value[2]) - Date.parse(data[i].value[1]))
                console.log(formatDuring(tarValue));
              }

            }


            if (data[i].value[0] == 1) {
              data[i].value[0] = '运行'
            }
            if (data[i].value[0] == abc) {
              if (data[i].value[0] == '运行') {
                console.log(data[i]);
                tarValue += (Date.parse(data[i].value[2]) - Date.parse(data[i].value[1]))
                console.log(formatDuring(tarValue));
              }

            }

            if (data[i].value[0] == 2) {
              data[i].value[0] = '待机'
            }
            if (data[i].value[0] == abc) {
              if (data[i].value[0] == '待机') {
                console.log(data[i]);
                tarValue += (Date.parse(data[i].value[2]) - Date.parse(data[i].value[1]))
                console.log(formatDuring(tarValue));
              }

            }

            if (data[i].value[0] == 3) {
              data[i].value[0] = '故障'
            }
            if (data[i].value[0] == abc) {
              if (data[i].value[0] == '故障') {
                console.log(data[i]);
                tarValue += (Date.parse(data[i].value[2]) - Date.parse(data[i].value[1]))
                console.log(formatDuring(tarValue));
              }

            }
          }
          var v = formatDuring(tarValue);
          var p = ((tarValue / 86400000) * 100).toFixed(2);
          return `${abc}(${p}%) ${v.slice(2)} `;
        },
      },
      grid: {//绘图网格
        left: '6%',
        right: '6%',
        top: '10%',
        bottom: '10%',
      },
      xAxis: {
        type: 'time',
        scale: true,
        //interval: 3600  * 2000,   //以一个小时递增 
        //interval: 3600  * 1000,   //以一个小时递增 
        min: '2023-01-10 08:00', //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
        axisLabel: {
          formatter: function (value) {
            // console.log(value);
            var date = new Date(value); return getzf(date.getHours()) + ':00';

            function getzf(num) {
              // console.log(num);
              if (parseInt(num) < 10) { num = '0' + num; }
              return num;
            }
          },
        }
      },
      yAxis: {
        axisTick: {
          show: false,  //刻度线
        },
        data: ['焊接机器人']
      },
      series: [

        { name: '停机', type: 'bar', data: [] },
        { name: '运行', type: 'bar', data: [] },// 用空bar来显示三个图例
        { name: '待机', type: 'bar', data: [] },// 用空bar来显示三个图例
        { name: '故障', type: 'bar', data: [] },// 用空bar来显示三个图例
        {
          type: 'custom',
          renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
            var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
            var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 10;

            return {
              type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
              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()
            };
          },
          encode: {
            x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
            y: 0// data 中『维度0』对应到 Y 轴
          },
          data: [ // 维度0 维度1 维度2
            {
              itemStyle: { normal: { color: colors[1] } },//条形颜色
              name: '焊接机器人',
              value: [1, '2023-01-10 08:00', '2023-01-10 09:00', 0]//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
            },
            {
              itemStyle: { normal: { color: colors[0] } },//条形颜色
              name: '焊接机器人',
              value: [0, '2023-01-10 09:00', '2023-01-10 09:10', 0]//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
            },
            {
              itemStyle: { normal: { color: colors[1] } },//条形颜色
              name: '焊接机器人',
              value: [1, '2023-01-10 09:10', '2023-01-10 09:20', 0]//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
            },
            {
              itemStyle: { normal: { color: colors[2] } },//条形颜色
              name: '焊接机器人',
              value: [2, '2023-01-10 09:20', '2023-01-10 09:30', 0]//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
            },
            {
              itemStyle: { normal: { color: colors[3] } },//条形颜色
              name: '焊接机器人',
              value: [3, '2023-01-10 09:30', '2023-01-10 09:50', 0]//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
            },
          ]
        }
      ]
    };


    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>
</body>

</html>
注意: 返回数据格式 [1, '2023-01-10 09:00', '2023-01-10 09:10', 0] 1是当前维度