qiuwang/src/components/common/pieChart.vue

<template>
  <div style="width:100%;height:100%;">
    <div ref="chart" style="width:100%;height:100%;"></div>
    <!-- <div class="boxPeople aa">
      <div class="name" style="color: #fcecb8;">架子工</div>
      <div class="nucm" style="color: #eadfb4;">33<span
          style=" font-size: 18px; font-weight: 400;color: #fcecb8;">%</span></div>
    </div>
    <div class="boxPeople bb">
      <div class="name" style="color: #1AD694">电工</div>
      <div class="nucm" style="color: #49fbbc;">18<span style=" font-size: 18px; font-weight: 400;color:#1AD694">%</span>
      </div>
    </div>
    <div class="boxPeople cc">
      <div class="name" style="color: #CDD0FF">土建专工</div>
      <div class="nucm" style="color: #d9def4;">9<span style=" font-size: 18px; font-weight: 400;color:#CDD0FF">%</span>
      </div>
    </div>
    <div class="boxPeople dd">
      <div class="name" style="color: #53E3FF">项目监理组</div>
      <div class="nucm" style="color: #d9def4;">40<span style=" font-size: 18px; font-weight: 400;color:#d9def4">%</span>
      </div>
    </div> -->
  </div>
</template>
<script>

import { List } from 'echarts/lib/export'
import giftImageUrl from '../../assets/pic/circle.png'
export default {
  props: {
    picIsShow: {
      type: Boolean,
      default: true
    },
    colorList: {
      type: Array,
      default(){
            return ['#00A572', '#007EC1', '#DA9300', '#878787']
        } 
    },
    constructionPersonnel:{
      type: Array,
      default:null 
    }
  },

  components: {
  },

  data() {
    return {}
  },
  mounted() {
    
  },
  watch: {
    // // 监听父组件中的数据变化，重新触发Echarts
    // chartData: {
    //   deep: true,
    //   handler() {
    //     this.resetOption()
    //   }
    // },
    constructionPersonnel:{
      deep: true,
      handler(newVal) {
        this.initCharts(newVal)
      }
    }
  },
  methods: {
    initCharts(dataList) {
      let myChart = this.$echarts.init(this.$refs.chart)
      var val1data2 = []
        val1data2 = Object.keys(dataList).map((item,index)=>{
          return {name:dataList[item].post,value:dataList[item].percent}
        })
      var arr = ['middleLost', 0.6, val1data2, '今日完成进度']
      // 绘制图表
      myChart.setOption({
        tooltip:{
          trigger:'item',
          formatter: '{b}：{c}%',
        },
        graphic: {
          elements: [{
            type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
            style: {
              image: this.picIsShow ? giftImageUrl : '', //这里添加图片地址
              width:120,
              height:120
            },
            left: '162',//
            top: '104' //配置图片居中
          }]
        },
        series: [
        // ['48%', '60%']
          {
            type: 'pie',
            radius: this.picIsShow ? ['48%', '60%'] : ['57%', '57%'],
            center: ['50%', '55%'],
            color: this.colorList,
            hoverAnimation: true, /// /设置饼图默认的展开样式
            label: {
              show: true,
              formatter: '{b|{b}}:{c|{c}}%',
              padding:[0,0,0,0],
              itemStyle: { // 此配置
                normal: {
                  borderWidth: 2,
                  borderColor: '#52FFC1'
                }
              },
             rich: {
                b: {
                  fontSize: 15,
                  lineHeight: 33,
                },
                c: {
                  fontSize: 18,
                  lineHeight: 22,
                  align: "center",
                  opacity: 0.1
                },
              },
              position: '',
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: { // 此配置
              normal: {
                borderWidth: 2,
                borderColor: '#FFF6DA'
              }
            },
            data: arr[2]
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.dd {
  top: 214px;
  right: 17px;

  @media only screen and (max-height: 1000px) {
    top: 194px;
  }
}

.cc {
  top: 243px;
  left: 52px;

  @media only screen and (max-height: 1000px) {
    top: 213px;
  }
}

.aa {
  top: 96px;
  left: 48px;
}

.bb {
  top: 68px;
  right: 82px;
}

.boxPeople {
  position: absolute;

  display: flex;
  align-items: center;

  .nucm {
    font-size: 20px;
    font-weight: 700;

  }

  .name {
    font-size: 14px;
    font-weight: 500;

  }

}
</style>