echarts图形

1.实现效果

目录

 父界面

<template>
  <div>
    <div class="leftBoxs">
      <div class="throw flex">
        <div class="throw-r sixth flex">
          <div class="throw-r-item querter">
            <i class="iconfont icon-kehuishou blueColor"></i>
            <div class="throwChart">
              <Circles :color="blue"></Circles>
            </div>
            <p class="classificationnum">12.12 t</p>
            <p class="blueColor classificationname">可回收垃圾</p>
            <p class="blueColor classificationnameen">Recyclable</p>
          </div>
          <div class="throw-r-item querter">
            <i class="iconfont icon-chuyu greenColor"></i>
            <div class="throwChart">
              <Circles :color="green"></Circles>
            </div>
            <p class="classificationnum">34.31 t</p>
            <p class="greenColor classificationname">厨余垃圾</p>
            <p class="greenColor classificationnameen">Food waste</p>
          </div>
          <div class="throw-r-item querter">
            <i class="iconfont icon-youhai redColor"></i>
            <div class="throwChart">
              <Circles :color="red"></Circles>
            </div>
            <p class="classificationnum">0.02 t</p>
            <p class="redColor classificationname">有害垃圾</p>
            <p class="redColor classificationnameen">Hazardous waste</p>
          </div>
          <div class="throw-r-item querter">
            <i class="iconfont icon-kehuishou yellowColor"></i>
            <div class="throwChart">
              <Circles :color="yellow"></Circles>
            </div>
            <p class="classificationnum">12.12 t</p>
            <p class="yellowColor classificationname">其他垃圾</p>
            <p class="yellowColor classificationnameen">Other waste</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import Circles from "@/components/echarts/circle";
export default {
  components: {
    Circles,
  },
  data() {
    return {
      blue: "#27A1FF",
      green: "#16FFB3",
      red: "#E83C33",
      yellow: "#FFA02F",
    }
  },
};
</script>
<style lang="scss">


.throw {
  padding-top: 30px;

  .throw-l {
    .throw-l-l {
      img {
        width: 164px;
        height: 244px;
      }
    }

    .throw-l-r {
      width: calc(100% - 204px);
      margin-left: 40px;

      .todaytf {
        font-size: $pxthirtytwo;
        color: $colorwhite;
        font-weight: bold;
      }

      .todaytfALL {
        font-size: $pxsixty;
        color: $colorwhite;
        font-weight: bold;
        margin: 28px 0 7px;
        padding-bottom: 7px;
        border-bottom: 2px solid $colorsys;

        span {
          margin-left: 23px;
          font-size: $pxtwentyfour;
          color: $colorsys;
          font-weight: normal;
        }
      }

      .todaytfbili {
        font-size: $pxthirtytwo;
        color: $colorsys;
        margin-bottom: 8px;
      }

      .todaytftag {
        font-size: $pxtwentyfour;
        color: $colorsys;
        font-weight: 500;
      }
    }
  }

  .throw-r {
    .throw-r-item {
      text-align: center;

      .iconfont {
        font-size: $pxthirty;
      }

      .classificationnum {
        font-size: $pxtwentyfour;
        color: $colorwhite;
        font-weight: bold;
        text-align: center;
      }

      .classificationname {
        font-size: $pxtwentyfour;
        font-weight: bold;
        text-align: center;
      }

      .classificationnameen {
        font-size: $pxtwelve;
        text-align: center;
      }

      .throwChart {
        height: 12vh;
      }
    }
  }
}



</style>


</style>

子界面

<template>
  <div class="circle" ref="circle"></div>
</template>
<script>
export default {
  props: {
    data:Object,
    color:String,
  },
  data() {
    return {};
  },

  mounted() {
    this.$nextTick(() => {
      this.drawLine();
    });
  },
  watch: {
    data: function (newVal, oldVal) {
      this.$nextTick(() => {
        this.drawLine();
      });
    },
  },

  methods: {
    drawLine() {
      let myChart = this.$echarts.init(this.$refs.circle);
      var percent = 30;
      var option = {
          series: [
              {
                  type: 'pie',
                  radius: ['79%', '80%'],
                  label: {
                      normal: {
                          show: fals