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

<template>
  <div class="box">
    <tit :title="'碳减排措施'">
      <!-- <div class="tit-r">单位：t</div> -->
    </tit>
    <div class="font-box">
      <div class="font1">碳减排总量</div>
      <div class="font2">1114.59
        <span>t</span>
      </div>
    </div>
    <div class="quantity">
      <div>
        <div>光伏发电</div>
        <div style="color: #63EEFF;">
          599.59
          <span>t</span>
        </div>
      </div>
      <div>
        <div>工艺优化</div>
        <div style="color: #6380FF;">
          599.59
          <span>t</span>
        </div>
      </div>
      <div>
        <div>设备更换</div>
        <div style="color: #1AD0A3;">
          599.59
          <span>t</span>
        </div>
      </div>
    </div>
    <div id="mainMeasure"></div>
  </div>
</template>

<script>
import tit from "./tit.vue";
export default {
  data() {
    return {
    };
  },
  components: {
    tit
  },
  created() {
    this.$nextTick(() => {
      this.echartsInit()
    })

  },
  mounted() {

  },
  methods: {
    echartsInit() {
      const chartDom = document.getElementById('mainMeasure');
      const myChart = this.$echarts.init(chartDom);
      const option = {
        //       title: {
        //   text: 'Referer of a Website',
        //   subtext: 'Fake Data',
        //   left: 'center'
        // },
        grid: {
          top: "0",
          left: "0",
          right: "10",
          bottom: "0",
          containLabel: true,
        },
        tooltip: {
          show: false
        },
        legend: {
          data: [
            '设备更换',
            '工艺优化',
            '光伏发电',
          ],
          textStyle: {
            color: "#fff",
            fontSize: 14
          },
          right: '0',
          itemWidth: 6,
          itemHeight: 6
        },
        series: [
          {
            type: 'pie',
            radius: [0, '30%'],
            label: {
              position: 'center',
              color: "#fff",
              fontSize: 14
            },
            emphasis: {
              scale: false
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 1548, name: '碳减排占比',
                itemStyle: {
                  color: '#39496d'
                }
              },
            ]
          },
          {
            type: 'pie',
            radius: ['40%', '50%'],
            label: {
              formatter: '{c}%',
              fontSize: 16,
              color: '#fff'
            },
            data: [
              {
                value: 10, name: '设备更换',
                itemStyle: {
                  color: '#1AD0A3'
                }
              },
              {
                value: 70, name: '工艺优化',
                itemStyle: {
                  color: '#6380FF'
                }
              },
              {
                value: 20, name: '光伏发电',
                itemStyle: {
                  color: '#63EEFF'
                }
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 4.6rem;
  height: 3.7rem;
  border-radius: 4px;
  box-sizing: border-box;
  background: url("../../../../public/img/energySourcesProvince/measure.png");
  background-size: 100% 100%;
  padding: 0.54rem 0.22rem 0 0.22rem;
  position: absolute;
  top: 0.86rem;
  right: 0.24rem;
  z-index: 9;

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

  .font-box {
    width: 100%;
    height: 1.68rem;
    padding-top: 0.54rem;

    .font1 {
      margin-top: 0.2rem;
      font-size: 0.16rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      opacity: 0.8;
    }

    .font2 {
      font-size: 0.4rem;
      font-family: Acumin Variable Concept;
      font-weight: bold;
      color: #FFFFFF;
      margin-top: 0.06rem;

      span {
        line-height: 10px;
        font-size: 0.2rem;
        font-family: Acumin Variable Concept;
        font-weight: bold;
        color: #FFFFFF;
        vertical-align: super;
        margin-left: -0.06rem;
      }
    }
  }

  .quantity {
    width: 4.2rem;
    height: 0.8rem;
    margin: 0 auto;
    background: rgba($color: #000, $alpha: 0.2);
    border: 1px solid rgba($color: #63EEFF, $alpha: 0.2);
    display: flex;
    justify-content: space-between;
    padding-top: 0.14rem;
    box-sizing: border-box;

    &>div {
      width: 33%;
      height: 0.52rem;
      border-right: 1px solid rgba($color: #fff, $alpha: 0.2);
      color: #fff;
      padding-left: 0.28rem;
      box-sizing: border-box;

      &>div:nth-child(1) {
        font-size: 0.14rem;
        margin-bottom: 0.06rem;
      }

      &>div:nth-child(2) {
        font-size: 0.24rem;
        font-weight: bold;

        span {
          vertical-align: super;
          font-weight: bold;
          margin-left: -0.04rem;
        }
      }
    }

    &>div:nth-child(3) {
      border: 0;
    }
  }

  #mainMeasure {
    position: absolute;
    top: 0.68rem;
    right: 0.12rem;
    width: 60%;
    height: 2.4rem;
  }
}
</style>