bigScreen/src/views/pageRoom/rightMiddle/index.vue

<template>
  <div class="rightMiddle">
    <dv-charts :option="option"></dv-charts>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          position: 'top',
          data: 'value',
          min: 0,
          max: 23,
          minInterval: 1,
          splitNumber: 24,
          axisLabel: {
            style: {
              stroke: '#fff',
              fontSize: 14,
            },
            formatter: dataItem => `${String(dataItem.value).padStart(2, '0')}:00`,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          data: [],
          splitLine: { show: false },
          axisLabel: {
            style: {
              stroke: '#fff',
              fontSize: 14,
            },
          },
        },
        series: [],
      },
    };
  },
  created() {
    // 手术间数量
    const num = 8;
    // 生成手术间
    for (let index = num; index >= 1; index--) {
      this.option.yAxis.data.push(`手术间${String(index).padStart(2, '0')}`);
    }
    // 生成对应的使用率数据
    for (let index = 1; index <= 24; index++) {
      let seriesData = {
        name: `bar${String(index).padStart(2, '0')}`,
        type: 'bar',
        stack: 'bar',
        data: [],
        independentColor: true,
        independentColors: [],
        barWidth: 10,
      };
      for (let sunIndex = 0; sunIndex < num; sunIndex++) {
        const isUse = Math.random() < 0.7;
        seriesData.data.push(1);
        if (isUse) {
          seriesData.independentColors.push('#87ceeb');
        } else {
          seriesData.independentColors.push('rgb(128,128,128)');
        }
      }
      this.option.series.push(seriesData);
    }
  },
};
</script>

<style lang="scss" scoped>
.rightMiddle {
  height: 100%;
  background-color: gray;
}
</style>