meilan-web/src/views/dataBigScreen/dashboard-work/SpotCheckContent.vue

<template>
  <div class="abnormal-situation-ranking">
    <div ref="abnormalSituationRankingChart" class="echarts" />

    <div class="item">
      <div v-for="(item, index) in list" class="item-line">
        <span :style="{background:color[index]}" class="color"></span>
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>

</template>

<script setup>
  import { computed, onMounted, ref } from 'vue';
  import * as echarts from 'echarts';
  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
  import { useEcharts } from '@/hooks/chart.js';

  const color = [
    '#1DD8FE',
    '#8639F8',
  ];
  const abnormalSituationRankingChart = ref(null);
  const chartOption = ref({
    color,
    radar: [
      {
        indicator: [],
        nameGap: 3,
        center: ['50%', '50%'],
        radius: 80,
        splitNumber: 4,
        axisName: {
          color: '#fbffff',
        },
        axisLine: {
          lineStyle: {
            color: '#fbffff',
            opacity: 0.1,
          },
        },
        splitArea: {
          areaStyle: {
            color: ['none', 'none'],
          },
        },
        splitLine: {
          lineStyle: {  //所有圆环分隔线。
            color: '#fbffff', //分隔线颜色
            opacity: 0.5,
          },
        },
      },
    ],
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [],
            symbol: 'none',
            areaStyle: {
              color: new echarts.graphic.RadialGradient(1, 1, 1, [
                {
                  color: 'rgba(24,139,178, 0.5)',
                  offset: 0,
                },
                {
                  color: 'rgba(58,146,228, 0.9)',
                  offset: 1,
                },
              ]),
            },
          },
          {
            value: [],
            symbol: 'none',
            areaStyle: {
              color: new echarts.graphic.RadialGradient(1, 1, 1, [
                {
                  color: 'rgba(58,148,228, 0.5)',
                  offset: 0,
                },
                {
                  color: 'rgba(98,49,189, 0.9)',
                  offset: 1,
                },
              ]),
            },
          },
        ],
      },
    ],
  });
  const { setOption } = useEcharts(abnormalSituationRankingChart);

  const list = computed(() => {
    return [
      { name: '抽查正常', color: color[0] },
      { name: '抽查异常', color: color[1] },
    ];
  });

  onMounted(() => {
    executeSqlByKeyAndParam('spot_check_content_distribution', {}).then(res => {
      chartOption.value.radar[0].indicator = res.data.map((el, idx) => {
        return {
          max: el.total_count,
          text: el.category_name,
        };
      });
      chartOption.value.series[0].data[0].value = res.data.map(el => el.pass_count);
      chartOption.value.series[0].data[1].value = res.data.map(el => el.fail_count);

      setOption?.(chartOption.value);
    });
  });
</script>

<style lang="less" scoped>
  .abnormal-situation-ranking {
    display: flex;
    height: calc(100% - 40px);

    .echarts {
      flex: 1;
      height: 100%;
      width: 100%;
    }

    .item {
      width: 100px;
      padding: 20px 0;
      display: flex;
      justify-content: center;
      flex-flow: column;
    }

    .item-line {
      display: flex;
      align-items: center;
      color: #fbffff;
      font-size: 12px;
      width: 100%;
      margin: 8px 0;

      .color {
        display: inline-flex;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        margin-right: 4px;
      }

      .text {
        flex: 1;
        display: flex;
        justify-content: space-between;

        span {
          display: inline-flex;
          width: 33.33%;
        }
      }
    }
  }
</style>