v3-lab-web/src/views/safetyCheck/schoolWorktable/coverageRateEcharts.vue

<template>
  <div class="coverageRateEcharts" id="coverageRateEcharts-box">
  </div>
</template>

<script>
import {
  securityIndexStatisticsCheckOverlap,
} from '@/api/safetyCheck/index'
  import echarts from 'echarts'
  export default {
    name: 'coverageRateEcharts',
    props:{
      propsData:{},
    },
    data(){
      return{
        newData:{},
      }
    },
    created(){

    },
    mounted(){
      this.securityIndexStatisticsCheckOverlap();
    },
    methods:{
      securityIndexStatisticsCheckOverlap(){
        let obj = {
          source:this.propsData.source,
          schoolAdmin:this.propsData.schoolAdmin,
          deptId:this.propsData.deptId,
          subIds:this.propsData.subIds,
        }
        securityIndexStatisticsCheckOverlap(obj).then(response => {
          this.$set(this,'newData',{
            notCheckRatio:parseInt(response.data.notCheckRatio),
            checkRatio:parseInt(response.data.checkRatio),
            subNum:parseInt(response.data.subNum),
          });
          this.$nextTick(()=>{
            this.eCharts(this.newData);
          })
        });
      },
      //eCharts方法
      eCharts(newData){
        let myChart = this.$echarts.init(document.getElementById('coverageRateEcharts-box'));
        const datalist= [
          { value: newData.notCheckRatio, name: '未检查' },
          { value: newData.checkRatio, name: '已检查' },
        ]
        let option = {

          legend:[
            {
              data: ['未检查'],
              orient: 'vertical',
              itemWidth: 12,
              itemHeight: 12,
              left: '60%',
              icon: 'circle',
              top: "38%",
              formatter: (name) => {
                var total = 0;
                var target;
                var rate;
                for (var i = 0; i < datalist.length; i++) {
                  total += datalist[i].value;
                  if (datalist[i].name == '未检查') {
                    target = datalist[i].value;
                  }
                  rate =  (target / total * 100).toFixed(2)
                }
                return `{one|${name}} {two|${rate}%}`;
              },
              textStyle: {
                color: '#000',
                rich: {
                  one: {
                    color: '#333333',
                    fontSize: 12,
                    padding: [0, 5, 0, 0],
                  },
                  two: {
                    color: '#FFA200',
                    fontSize: 14,
                  },
                },
              },
            },
            {
              data: ['已检查'],
              orient: 'vertical',
              itemWidth: 12,
              itemHeight: 12,
              left: '60%',
              icon: 'circle',
              top: "54%",
              formatter: (name) => {
                var total = 0;
                var target;
                var rate;
                for (var i = 0; i < datalist.length; i++) {
                  total += datalist[i].value;
                  if (datalist[i].name == name) {
                    target = datalist[i].value;
                  }
                  rate =  (target / total * 100).toFixed(2)
                }
                return `{one|${name}} {two|${rate}%}`;
              },
              textStyle: {
                color: '#000',
                rich: {
                  one: {
                    color: '#333333',
                    fontSize: 12,
                    padding: [0, 5, 0, 0],
                  },
                  two: {
                    color: '#0183FA',
                    fontSize: 14,
                  },
                },
              },
            }
          ],
          title: [
            {
              text: '实验室',
              subtext: newData.subNum+'间',
              textStyle: {
                fontSize: 12,
                color: "#333333"
              },
              subtextStyle: {
                fontSize: 16,
                color: '#333333'
              },
              textAlign: "center",
              x: '24%',
              y: '38%',
            }
          ],
          color:[ '#FFA200','#0183FA'],
          series: [
            {
              name: '检查覆盖率',
              type: 'pie',
              radius: ['48%', '80%'],
              center: ['26%', '50%'],
              avoidLabelOverlap: false,
              padAngle: 10,
              itemStyle: {
                borderColor: '#FFF',
                borderWidth: 3,
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data:datalist
            }
          ]
        };

        myChart.setOption(option);
      },
    }
  }
</script>

<style scoped lang="scss">
  .coverageRateEcharts{
    width: 366px;
    height: 175px;
  }
</style>