jiahe_device/src/views/energySourcesProvince/component/emissionAll.vue

<template>
  <div class="box">
    <tit :title="'碳排放总量'">
      <!-- <div class="tit-r">单位：t</div> -->
    </tit>
    <div class="card-num">
      <div class="card-num-item" v-for="(item, index) in num" :key="index">
        <div :style="item === '.' ? 'background: transparent' : ''"></div>
        <div :style="item === '.' ? 'background: transparent' : ''"></div>
        <div style="color: #00FFC6;font-family: Acumin-Pro-Condensed-Black-2;">
          {{ item }}
        </div>
      </div>
      <span>t</span>
    </div>
    <div class="font1">
      碳排放计划量
    </div>
    <div class="font2">
      {{ jnjhl }}
      <span>t</span>
    </div>
    <div id="mainEmissionAll"></div>
  </div>
</template>

<script>
import tit from "./tit.vue";

import { getTotalCarbonEmissions } from "@/api/energySourcesProvince/energySourcesProvince"
export default {
  data() {
    return {
      num: 0,
      jnjhl: 0,
      timeFun: null
    };
  },
  components: {
    tit
  },
  created() {
    this.$nextTick(() => {
      this.getData()
    })
    this.timeFun = setInterval(() => {
      this.getData()
    }, 300000)
  },
  beforeDestroyed() {
    clearInterval(this.timeFun)
  },
  methods: {
    getData() {
      getTotalCarbonEmissions().then(res => {
        const { ypfzb, jnzl, jnjhl } = res.data.data
        this.jnjhl = jnjhl
        this.num = jnzl.toString().split('')
        this.echartsInit(ypfzb)//已排发占比
      })
    },
    echartsInit(source) {
      const chartDom = document.getElementById('mainEmissionAll');
      const myChart = this.$echarts.init(chartDom);
      const color = this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: '#11A0EB',
        },
        {
          offset: 1,
          color: '#00FFFC',
        },
      ]);
      const option = {

        series: [
          {
            type: 'gauge',
            center: ['50%', '60%'],
            radius: 80,
            splitNumber: 10,
            progress: {
              show: false,
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 2
              }
            },
            axisTick: {
              distance: 0,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            splitLine: {
              distance: 0,
              length: 10,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              show: false
            },
            anchor: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              show: false,
            },
          },

          {
            type: 'gauge',
            center: ['50%', '60%'],
            radius: 60,
            splitNumber: 10,
            progress: {
              show: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 16,
                color: [[1, '#4183a6']]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, '15%'],
              fontSize: 14,
              fontWeight: 'bolder',
              formatter: '已排放',
              color: '#9da1ae'
            },
            data: [
              {
                value: 100
              }
            ]
          },
          {
            type: 'gauge',
            center: ['50%', '60%'],
            radius: 60,
            splitNumber: 10,
            z: 10,
            progress: {
              show: true,
              width: 16,

              itemStyle: {
                color: color
              },
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, '-15%'],
              fontSize: 20,
              fontWeight: 'bolder',
              formatter: '{value} %',
              color: '#fff'
            },
            data: [
              {
                value: source
              }
            ]
          },

        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 4.6rem;
  height: 2.32rem;
  border-radius: 4px;
  box-sizing: border-box;
  background: url("../../../../public/img/energySourcesProvince/emissionAll.png");
  background-size: 100% 100%;
  padding: 0.54rem 0.22rem 0 0.22rem;
  position: absolute;
  top: 0.86rem;
  left: 0.24rem;
  z-index: 9;

  .tit-r {
    font-size: 0.14rem;
    color: rgba($color: #fff, $alpha: 0.4);
    margin-top: 0.04rem;
  }

  .card-num {
    display: flex;
    margin-top: 0.16rem;

    span {
      line-height: 0.3rem;
      font-size: 0.18rem;
      font-family: Acumin Variable Concept;
      font-weight: bold;
      color: #14D1FA;
      margin-left: 0.04rem;
    }

    .card-num-item {
      width: 0.22rem;
      height: 0.36rem;
      position: relative;
      margin-right: 0.02rem;

      &>div {
        width: 100%;
        background: rgba($color: #0090FF, $alpha: 0.5);
      }

      &>div:nth-child(1) {
        height: 0.17rem;
        margin-bottom: 0.01rem;
      }

      &>div:nth-child(2) {
        height: 0.17rem;
        margin-top: 0.01rem;
      }

      &>div:nth-child(3) {
        height: 0.4rem;
        line-height: 0.4rem;
        position: absolute;
        top: 0;
        left: 0;
        background: transparent;
        text-align: center;
        font-size: 0.26rem;
        font-family: Acumin Variable Concept;
        font-weight: bold;
      }
    }
  }

  .font1 {
    margin-top: 0.2rem;
    font-size: 0.16rem;
    font-family: Acumin-Pro-Condensed-Black-2;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.8;
  }

  .font2 {
    font-size: 0.36rem;
    font-family: Acumin-Pro-Condensed-Black-2;
    font-weight: bold;
    color: #FFFFFF;
    margin-top: 0.06rem;

    span {
      line-height: 10px;
      font-size: 0.2rem;
      font-family: Acumin-Pro-Condensed-Black-2;
      font-weight: bold;
      color: #FFFFFF;
      vertical-align: super;
      // margin-left: -0.02rem;
    }
  }

  #mainEmissionAll {
    position: absolute;
    top: 0.62rem;
    right: 0.2rem;
    width: 46%;
    height: 140px;
  }
}
</style>