mky-vent-base/src/views/vent/home/configurable/bule/components/yj_risk.vue

<template>
  <div class="dz-risk">
    <div class="risk-container">
      <div class="risk-center"></div>
      <div ref="riskPie" class="risk-pie"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

let props = defineProps({
  echartData: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
let riskPie = ref(null);
let echartData = ref<any[]>([]);

function getOption() {
  nextTick(() => {
    const colorList = [
      {
        type: 'radial',
        r: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(182, 242, 255,1)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(95, 228, 255,1)', // 100% 处的颜色
          },
        ],
      },
      {
        type: 'radial',
        r: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(176, 255, 236,1)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(86, 255, 171,1)', // 100% 处的颜色
          },
        ],
      },
      {
        type: 'radial',
        r: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(255, 253, 176,1)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(255, 255, 86,1)', // 100% 处的颜色
          },
        ],
      },
      {
        type: 'radial',
        r: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(215, 179, 255,1)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(134, 88, 255,1)', // 100% 处的颜色
          },
        ],
      },
    ];
    let myChart = echarts.init(riskPie.value);
    let option = {
      color: colorList,
      // tooltip: {
      //     trigger: 'item'
      // },
      series: [
        {
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['30%', '50%'],
          emphasis: {
            label: {
              show: true,
            },
            opacity: 1,
            color: function (params) {
              return colorList[params.dataIndex];
            },
          },
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex];
              },
            },
          },
          label: {
            show: true,
            position: 'outside',
            textStyle: {
              color: '#fff',
              fontSize: 10,
            },
            formatter: '{b}：{c}',
            rich: {
              a: {
                padding: [-10, 5, -15, 5],
              },
            },
          },

          labelLine: {
            normal: {
              length: 10,
              length2: 5,
              lineStyle: {
                width: 1,
              },
            },
          },
          data: echartData.value,
        },
      ],
    };
    myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  });
}

watch(
  () => props.echartData,
  (newV, oldV) => {
    echartData.value = newV;
    getOption();
  },
  { immediate: true }
);
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';
.dz-risk {
  --image-model_risk-container: url('@/assets/images/home-warn/2.png');
  --image-model_risk-center: url('@/assets/images/home-warn/1.png');
  height: 100%;
  .risk-container {
    position: relative;
    height: 100%;
    width: 100%;
    height: 100%;
    background: var(--image-model_risk-container) no-repeat center;
    background-size: auto 100%;

    .risk-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 60px;
      background: var(--image-model_risk-center) no-repeat center;
      background-size: auto 100%;
    }

    .risk-pie {
      left: -28px;
      top: -17px;
      position: absolute;
      width: 276px;
      height: 205px;
    }
  }
}
</style>