Echarts在线免费图表

 
            function formater(v) {
   let str;
   if (v == "0") {
      str = '深睡';
   } else if (v == "1") {
      str = '浅睡';
   } else if (v == "2") {
      str = '中睡';
   } else if (v == "3") {
      str = '清醒';
   }
   return str;
}
//获取随机睡眠数据0-4
function randomNum(n) {
   var res = [];
   for (var i = 0; i < n; i++) {
      res.push(Math.ceil(Math.random() * 5));
   }
   return res;
}

var stack = [], demodata = [], sleepData = [], timeData = []
sleepData = randomNum(200)
for (let i = 0; i < sleepData.length; i++) {
   stack.push(sleepData[i] * 1 - 1);
   let time = new Date((1696963225 + i * 60) * 1000);
   hours = (time.getHours() < 10 ? '0' + time.getHours() : time.getHours()) + ':';
   minutes = (time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes());
   timeData.push(hours + minutes)
   let obj;
   if (sleepData[i] == 1) {
      obj = {
         value: 1,
         itemStyle: {
            color: '#800080',
            borderColor: '#800080',
         }
      }
   } else if (sleepData[i] == 2) {

      obj = {
         value: 1,
         itemStyle: {
            color: '#00FFFF',
            borderColor: '#00FFFF',
         }
      }
   } else if (sleepData[i] == 3) {
      obj = {
         value: 1,
         itemStyle: {
            color: '#C0C0C0',
            borderColor: '#C0C0C0',
         }
      }
   } else if (sleepData[i] == 4) {
      obj = {
         value: 1,
         itemStyle: {
            color: '	#000080',
            borderColor: '	#000080',
         }
      }
   }
   demodata.push(obj);
}

option = {
   //你的代码
   title: {
      text: '睡眠数据',
      left: 'left',
      top: 0
   },
   legend: {
      show: false
   },

   grid: [
      { left: '4%', top: '20%', width: '90%', height: '42%', containLabel: "true" },
   ],


   xAxis: [
      {
         gridIndex: 0, splitLine: { show: false }, data: timeData,
         axisLabel: {
            align: 'center',
            showMinLabel: true,
            showMaxLabel: true,
            margin: 15,
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
      },
   ],
   yAxis: [
      {
         min: 0, max: 4,
         axisLabel: {
            textStyle: {
               // color: 'rgba(255,255,255,0.40)',
               fontSize: 12,
            },
            verticalAlign: 'top',
            padding: [-25, 0, 0, 0],
            formatter: function (parmas) { return formater(parmas) }
         },
         splitLine: {
            show: true,
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
      },
   ],

   series: [
      {
         name: '',
         type: 'bar',
         xAxisIndex: 0,
         yAxisIndex: 0,
         data: stack,
         stack: 'ad',
         tooltip: {
            show: false
         },
         itemStyle: {
            color: "rgba(0,0,0,0)",
            borderColor: "rgba(0,0,0,0)",
         }
      },
      {
         name: '睡眠数据',
         type: 'bar',
         xAxisIndex: 0,
         yAxisIndex: 0,
         data: demodata,
         stack: 'ad',
         // barWidth: "100%",
      },
   ],
}