mky-vent-base/src/views/vent/home/clique/components/echart-scene.vue

<template>
  <div class="echartScene">
    <div class="scene" ref="scene"></div>
    <div class="pic">
      <img src="../../../../../assets/images/company/echart-zu.png" alt="" />
    </div>
    <div class="percent">
      <div class="percent-box">
        <span class="per-v">{{ percent.jf }}</span>
        <span class="per-d">m³/min</span>
      </div>
      <div class="percent-box">
        <span class="per-v">{{ percent.yf }}</span>
        <span class="per-d">m³/min</span>
      </div>
      <div class="percent-box">
        <span class="per-v">{{ percent.hf }}</span>
        <span class="per-d">m³/min</span>
      </div>
    </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 scene = ref<any>();

  let percent = reactive({
    jf: 0,
    yf: 0,
    hf: 0,
    jfEcharts: 0,
    yfEcharts: 0,
    hfEcharts: 0,
  });

  function getOption() {
    nextTick(() => {
      let placeHolderStyle = {
        normal: {
          color: '#fff',
          opacity: 0.1,
        },
        emphasis: {
          color: '#fff',
          opacity: 0.1,
        },
      };
      console.log(scene.value, 'scene');
      const myChart = echarts.init(scene.value);
      let option = {
        color: ['#4edaff', '#53ffde', '#a696ed'],
        textStyle: {
          fontSize: 14,
          color: '#40E7F4 ',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} : {b}{c} ({d}%)',
        },
        legend: [
          {
            // orient: 'vertical',
            x: '58%',
            y: '15%',
            itemWidth: 8,
            itemHeight: 8,
            align: 'left',
            textStyle: {
              fontSize: 12,
              color: '#ccc',
            },
            data: ['进风区'],
          },
          {
            // orient: 'vertical',
            x: '58%',
            y: '45%',
            itemWidth: 8,
            itemHeight: 8,
            align: 'left',
            textStyle: {
              fontSize: 12,
              color: '#ccc',
            },
            data: ['用风区'],
          },
          {
            // orient: 'vertical',
            x: '58%',
            y: '73%',
            itemWidth: 8,
            itemHeight: 8,
            align: 'left',
            textStyle: {
              fontSize: 12,
              color: '#ccc',
            },
            data: ['回风区'],
          },
        ],

        series: [
          {
            name: '进风区',
            type: 'pie',
            radius: ['55%', '62%'],
            center: ['25%', '50%'],
            label: true,
            startAngle: 50,
            clockWise: true,
            hoverAnimation: true,
            hoverOffset: 8,
            data: [
              {
                value: percent.jf,
                name: '占比',
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          // 0% 处的颜色
                          offset: 0,
                          color: 'rgba(80, 219, 255,1)',
                        },
                        {
                          // 100% 处的颜色
                          offset: 1,
                          color: 'rgba(80, 219, 255,.7)',
                        },
                      ],

                      false
                    ),
                  },
                },
              },
              {
                value: percent.jfEcharts,
                name: '未占比',
                hoverAnimation: true,
                itemStyle: placeHolderStyle,
              },
            ],
          },
          {
            name: '用风区',
            type: 'pie',
            radius: ['40%', '47%'],
            center: ['25%', '50%'],
            label: false,
            startAngle: 200,
            clockWise: true,
            hoverAnimation: true,
            hoverOffset: 3,
            data: [
              {
                value: percent.yf,
                name: '占比',
                itemStyle: {
                  color: {
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(84, 255, 222,1)', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(84, 255, 222,.7)', // 100% 处的颜色
                      },
                    ],
                  },
                },
              },
              {
                value: percent.yfEcharts,
                hoverAnimation: true,
                name: '未占比',
                itemStyle: placeHolderStyle,
              },
            ],
          },
          {
            name: '回风区',
            type: 'pie',
            radius: ['25%', '32%'],
            center: ['25%', '50%'],
            label: false,
            startAngle: 80,
            clockWise: true, //顺时加载
            hoverAnimation: true,
            hoverOffset: 3,
            data: [
              {
                value: percent.hf,
                name: '占比',
                itemStyle: {
                  color: {
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(161, 142, 242,1)', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(161, 142, 242,.7)', // 100% 处的颜色
                      },
                    ],
                  },
                },
              },
              {
                value: percent.hfEcharts,
                name: '未占比',
                hoverAnimation: true, //鼠标移入变大
                itemStyle: placeHolderStyle,
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }

  watch(
    () => props.echartData,
    (newV, oldV) => {
      console.log(newV, 'newV-----------');
      percent.jf = newV.jfq;
      percent.yf = newV.yfq;
      percent.hf = newV.hfq;
      percent.jfEcharts = Math.ceil(newV.zf - percent.jf);
      percent.yfEcharts = Math.ceil(newV.zf - percent.yf);
      percent.hfEcharts = Math.ceil(newV.zf - percent.hf);
      getOption();
    },
    {
      immediate: true,
      deep: true,
    }
  );
</script>

<style scoped lang="less">
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../assets/font/douyuFont.otf');
  }

  .echartScene {
    width: 100%;
    height: 100%;
    position: relative;

    .scene {
      width: 100%;
      height: 100%;
    }

    .pic {
      height: 100%;
      position: absolute;
      left: 50%;
      top: 0;
      display: flex;
      align-items: center;

      img {
        height: 60%;
      }
    }

    .percent {
      position: absolute;
      left: 72%;
      top: 0;
      width: 100px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .percent-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0px 10px 0px 15px;
        box-sizing: border-box;

        .per-v {
          font-family: 'douyuFont';
          font-size: 14px;
        }

        .per-d {
          font-size: 12px;
          color: #ccc;
        }

        &:nth-child(1) {
          position: absolute;
          top: 14%;
          color: #4edaff;
        }

        &:nth-child(2) {
          position: absolute;
          top: 44%;
          color: #53ffde;
        }

        &:nth-child(3) {
          position: absolute;
          top: 72%;
          color: #a696ed;
        }
      }
    }
  }
</style>