gas-injection/src/views/vent/monitorManager/alarmMonitor/common/warnGradeEchart.vue

<template>
  <div class="echartBar">
    <div class="bar" ref="bar"></div>
  </div>
</template>

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

  let props = defineProps({
    echartData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  //获取dom元素节点
  let bar = ref<any>();
  let echartDatas = ref<any[]>([]);
  watch(
    () => props.echartData,
    (newV, oldV) => {
      let data: any[] = [];
      Object.keys(newV).forEach((el) => {
        if (el == 'dust') {
          data.push({ name: '粉尘', value: newV[el] });
        } else if (el == 'fire') {
          data.push({ name: '火灾', value: newV[el] });
        } else if (el == 'gas') {
          data.push({ name: '瓦斯', value: newV[el] });
        } else if (el == 'vent') {
          data.push({ name: '通风', value: newV[el] });
        }
      });
      echartDatas.value = data;
      getOption();
    },
    { deep: true }
  );

  function getOption() {
    nextTick(() => {
      let myChart = echarts.init(bar.value);
      let option = {
        title: {
          text: '风险比例分析',
          left: '20%',
          top: 0,
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
          backgroundColor: 'rgba(0, 0, 0, .6)',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['30%', '54%'],
            color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: echartDatas.value.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',

            label: {
              normal: {
                formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
                rich: {
                  c: {
                    color: '#00d8ff',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 5,
                  },
                  b: {
                    color: '#fff',
                    fontSize: 12,
                    height: 40,
                  },
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgb(98,137,169)',
                },
                smooth: 0.2,
                length: 2,
                length2: 2,
              },
            },
            itemStyle: {
              normal: {
                shadowColor: 'rgba(0, 0, 0, 0.8)',
                shadowBlur: 50,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }
</script>

<style scoped lang="less">
  .echartBar {
    width: 100%;
    height: 100%;

    .bar {
      width: 100%;
      height: 100%;
    }
  }
</style>