Bonus-AI-LargeScreen/src/views/updateIDCard/pieIDResultCount.vue

<template>
  <div class="pieBoxIDResultCount">
    <div class="pieIDResultCount" ref="pieIDResultCount"></div>
    <div class="pieTextBoxIDResultCount">
      <div class='pieTextIDResultCount'>
        调用正确率
      </div>
      <div class='pieTextIDResultCount'>
        调用失败率
      </div>
    </div>
  </div>
</template>

<script>
import {init, graphic} from 'echarts'
import {getPieData} from "@/api/updateIDCard/updateIDCard.js";


function roundToTwo(num) {
  let tmp_num = num.toFixed(2).toString();

  return tmp_num;
}

export default {
  name: 'pieIDResultCount',
  data() {
    return {
      pieOneChart: null,
      pieEntityNameValue: {
        pieright: '',
        pieerror: ''
      }
    }
  },
  mounted() {
    this.getPieDataID();

  },
  created() {

  },
  methods: {

    getPieDataID() {
      getPieData(1).then(res => {
        try {
          if (res.code == 200) {
            this.pieEntityNameValue.pieright = (res.data.correctNu / res.data.totalNu * 100);
            this.pieEntityNameValue.pieerror = (res.data.incorrectNu / res.data.totalNu * 100);
            this.pieIDResultCount()
          }
        } catch (error) {
          this.$modal.msgError("矩形图加载失败，请刷新页面或者请求管理员");
          this.$modal.closeLoading();
        }
      }).catch(error => {
        this.$modal.msgError("饼图加载失败，请刷新页面或者请求管理员");
        this.$modal.closeLoading();
      });
    },
    pieIDResultCount() {
      let pieBlank = {
        color: 'rgba(255,255,255,.8)',
      };
      let pieEntity = {
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {offset: 0, color: 'rgba(0, 255, 225, 0.3)'},
          {offset: .5, color: 'rgba(100, 255, 100, 1)'},
          {offset: 1, color: 'rgba(0, 255, 255, 0.7)'},
        ]),

      };
      let pieRadius = [30, 60];
      let pieIDResultCount = init(this.$refs.pieIDResultCount);
      console.log(this.pieEntityNameValue)
      console.log(this.pieEntityNameValue.pieright)
      let pieData = [
        {name: 'pieright', value: this.pieEntityNameValue.pieright},
        {name: 'pieerror', value: this.pieEntityNameValue.pieerror}
      ];
      // console.log(pieData)
      pieIDResultCount.setOption({

        series: pieData.map((data, index) => ({
          type: 'pie',
          top: '15%',
          center: [`${23 + 51 * index}%`, '50%'],
          radius: pieRadius,
          label: {
            show: true,
            formatter: function (params) {
              if (params.name === 'blank')
                return roundToTwo(100 - params.value) + "%"
              else
                return roundToTwo(params.value) + "%"//没有这个参数会出现数据漂移的现象，如0.1+0.2=0.3
            },
            position: 'center',
            fontSize: 15,
            fontWeight: 'bold',
            color: 'rgba(0, 255, 255, 0.7)'
          },
          data: [
            {name: 'entity', value: data.value, itemStyle: pieEntity},
            {name: 'blank', value: 100 - data.value, itemStyle: pieBlank}
          ]
        }))
      });
    },
  }
}
</script>

<style scoped>
.pieBoxIDResultCount {
  height: 20rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

}

.pieIDResultCount {
  flex: 10;
  width: 100%;

}

.pieTextBoxIDResultCount {
  flex: 2;
  display: flex;
  color: #fff;
  width: 100%;
  font-size: 1rem;
  margin-left: 30%;
}

.pieTextIDResultCount {
  flex: 1
}
</style>