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

<template>
  <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]">
    <div class="w-[22vh] h-[22vh] mx-auto mt-[4.6vh]" ref="echartsContainer"></div>
    <div class="w-[37.96vh] h-[6.29vh] mx-auto mt-[8.6vh] px-[4.96vh] flex justify-between items-center bgTopLeftItemBox">
      <div class="flex">
        <img src="@/assets/svg/Room/LeftTop/TrianglePurple.svg" />
        <span class="text-[1.85vh] youshe ml-[1.4vh]">手术间数</span>
      </div>
      <p class="text-[2.96vh] text-[#733FF3] youshe">100</p>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      chartOptions: {
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            max: 100,
            radius: '100%',
            center: ['50%', '50%'],
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#9C85FA',
                    },
                    {
                      offset: 1,
                      color: '#5531E7',
                    },
                  ],
                  global: false,
                },
              },
            },
            axisLine: {
              lineStyle: {
                color: [[1, '#4F518C']],
                opacity: 0.7,
                width: 30,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 86,
                name: '首台准点率',
                title: {
                  offsetCenter: ['0%', '20%'],
                  fontSize: 22,
                  fontFamily: 'Microsoft YaHei',
                  color: '#fff',
                  overflow: 'break',
                  lineHeight: 20,
                },
                detail: {
                  valueAnimation: true,
                  offsetCenter: ['0%', '-15%'],
                  fontSize: 40,
                  fontFamily: 'DIN-Bold,Microsoft YaHei',
                  color: '#03FFFF',
                  formatter: `{value}%`,
                },
              },
            ],
          },
        ],
      },
      peopleData: [
        {
          itemName: '进行中',
          itemVal: '50',
        },
        {
          itemName: '待进行',
          itemVal: '300',
        },
      ],
    };
  },
  mounted() {
    const chartContainer = this.$refs.echartsContainer;
    const chart = echarts.init(chartContainer);
    chart.setOption(this.chartOptions);
  },
};
</script>

<style>
.bgLeftTopBox {
  background-image: url('@/assets/svg/Room/LeftTop/Box.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bgTopLeftItemBox {
  background-image: url('@/assets/svg/Room/LeftTop/ItemBox.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
</style>