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

<template>
  <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]">
    <div class="w-[26.85vh] h-[26.85vh] mx-auto m-[2vh]" ref="echartsContainer"></div>
    <div class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBox  mx-auto mt-[3.7vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center">
      <section>
        <div class="flex">
          <img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
          <span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80">总人数</span>
        </div>
        <p class="text-[#733FF3] text-[4.07vh] mt-[1.4vh] youshe leading-none">350</p>
      </section>
      <section>
        <template v-for="(item, index) in peopleData">
          <div class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center" :class="!index && 'mb-[1.85vh]'" :key="index">
            <div class="flex items-end">
              <img src="@/assets/svg/Operation/LeftTop/PointBlue.svg" />
              <span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{ item['itemName'] }}</span>
            </div>
            <div class="flex items-center">
              <span class="text-[#733FF3] text-[2.4vh] youshe">{{ item['itemVal'] }}</span>
              <span class="text-[1.11vh] opacity-65 ml-[0.74vh]">人</span>
            </div>
          </div>
        </template>
      </section>
    </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/Operation/LeftTop/Box.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bgTopLeftItemBox {
  background-image: url('@/assets/svg/Operation/LeftTop/ItemBox.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.peopleItemBox {
  background: linear-gradient(271deg, rgba(85, 255, 212, 0.045) 2%, rgba(35, 150, 121, 0.066) 99%);
  border: 1.5px solid;
  border-image: linear-gradient(159deg, rgba(169, 213, 255, 0.4) -8%, rgba(169, 213, 255, 0) 38%) 1.5;
}
</style>