bigScreen/src/views/pageMonitor/bottomMiddle/index.vue

<template>
  <div class="bottomMiddle">
    <dv-border-box-13>
      <div class="chartsBox">
        <div class="chartItem">
          <nav>
            <p class="left">手术量统计</p>
            <div class="right">
              <p class="active">周</p>
              <p>月</p>
            </div>
          </nav>
          <dv-charts :option="option"></dv-charts>
        </div>
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        grid: {
          left: '20%',
          top: '6%',
        },
        xAxis: {
          data: 'value',
          max: '1%',
          min: 0,
          axisLabel: {
            style: {
              fontSize: 0,
            },
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'category',
          data: ['择期手术', '急诊手术', '门诊手术', '无痛手术', '日间手术', '外科手术'],
          axisLabel: {
            style: {
              stroke: '#fff',
              fontSize: 14,
            },
          },
          splitLine: { show: false },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            type: 'bar',
            data: [10, 20, 25, 30, 40, 80],
            barWidth: '40%',
            label: {
              show: true,
              position: 'top',
              offset: [16, 2],
              style: {
                stroke: '#fff',
                fontSize: 14,
              },
            },
            // gradient: {
            //   color: ['#83bff6', '#188df0', '#188df0'],
            // },
            backgroundBar: {
              show: true,
            },
            independentColor: true,
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.bottomMiddle {
  flex-basis: 28%;
  .chartsBox {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    padding-top: 1vh;
    box-sizing: border-box;
    .chartItem {
      width: 100%;
      height: 100%;
      flex-shrink: 0;
      padding: 2vh;
      box-sizing: border-box;
      nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .right {
          display: flex;
          .active,
          p:hover {
            color: #87ceeb;
            border: 1px solid #87ceeb;
          }
          p {
            margin-right: 1.5vh;
            cursor: pointer;
            border: 1px solid #fff;
            font-size: 1.6vh;
            width: 2.6vh;
            height: 2.6vh;
            line-height: 2.6vh;
            text-align: center;
          }
        }
        p {
          font-size: 2.4vh;
        }
      }
    }
  }
}
</style>