FE-V2-PC/src/views/safetyCheck/worktable/coverageRateEcharts.vue

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

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

      }
    },
    created(){

    },
    mounted(){
      this.eCharts();
    },
    methods:{
      //eCharts方法
      eCharts(){
        yearRate().then(response => {
          let myChart = this.$echarts.init(document.getElementById('coverageRateEcharts-box'));
          let getname = ['未检查', '已检查', '检查中']; // 课程名
          let getbl = [0, 0, 0]; // 比例
          let getNum = [0, 0, 0]; // 数量
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].type == 0){
              if(response.data[i].rate.indexOf('%') != -1){
                response.data[i].rate = response.data[i].rate.split('%')[0]
                getbl[0] = response.data[i].rate
              }else{
                getbl[0] = response.data[i].rate
              }
              getNum[0] = response.data[i].number
            }else if(response.data[i].type == 2){
              if(response.data[i].rate.indexOf('%') != -1){
                response.data[i].rate = response.data[i].rate.split('%')[0]
                getbl[1] = response.data[i].rate
              }else{
                getbl[1] = response.data[i].rate
              }
              getNum[1] = response.data[i].number
            }else if(response.data[i].type == 1){
              if(response.data[i].rate.indexOf('%') != -1){
                response.data[i].rate = response.data[i].rate.split('%')[0]
                getbl[2] = response.data[i].rate
              }else{
                getbl[2] = response.data[i].rate
              }
              getNum[2] = response.data[i].number
            }
          }
          let data = [];
          for (let i = 0; i < getname.length; i++) {
            data.push({ name: getname[i], value: getbl[i], num: getNum[i] })
          }
          let option = {
            legend: {
              type: "scroll",
              orient: 'vertical',
              height: '80%',
              right: '0%',
              top: 'center',
              //icon: "circle", //设置为圆，删除则为矩形
              itemWidth: 14,
              itemHeight: 6,
              itemGap: 25,
              data: getname,
              formatter: function (name) {
                for (let i = 0; i < getname.length; i++) {
                  if (name == data[i].name) {
                    return '{name|' + name + '}'
                  }
                }
              },
              textStyle: {
                rich: {
                  name: {
                    fontSize: 14,
                    fontWeight: 400,
                    width: 100,
                    height: 20,
                    padding: [0, 0, 0, 5],
                    color: 'rgba(0, 0, 0, 0.85)',
                    fontFamily: 'Source Han Sans CN-Regular',
                  },
                  num: {
                    fontSize: 14,
                    fontWeight: 500,
                    height: 20,
                    width: 50,
                    color: 'rgba(0, 0, 0, 0.65)',
                    fontFamily: 'Source Han Sans CN-Regular',
                  },
                  value: {
                    fontSize: 14,
                    fontWeight: 500,
                    height: 20,
                    width: 50,
                    color: 'rgba(0, 0, 0, 0.65)',
                    fontFamily: 'Source Han Sans CN-Regular',
                  }
                }
              }

            },
            series: [{
              type: 'pie',
              top:20,
              bottom:20,
              left:10,
              right:10,
              radius: ['55%', '70%'],
              center: ["38%", "50%"],
              // label: {
              //   formatter: params => {
              //     let name = params.name;
              //     if (name == getname[0]) {
              //       return `{name0|${name}：${params.data.num}\n${params.value}%}`
              //     } else if (name == getname[1]) {
              //       return `{name1|${name}：${params.data.num}\n${params.value}%}`
              //     } else if (name == getname[2]) {
              //       return `{name2|${name}：${params.data.num}\n${params.value}%}`
              //     }
              //   },
              //   rich: {
              //     name0: {
              //       fontSize: 14,
              //       fontFamily: 'Source Han Sans CN-Regular',
              //       color: fontColor[0],
              //       padding: [2, 6, 4, 6],
              //       borderRadius: 100
              //     },
              //     name1: {
              //       fontSize: 14,
              //       fontFamily: 'Source Han Sans CN-Regular',
              //       color: fontColor[1],
              //       padding: [2, 6, 4, 6],
              //       borderRadius: 100
              //     },
              //     name2: {
              //       fontSize: 14,
              //       fontFamily: 'Source Han Sans CN-Regular',
              //       color: fontColor[2],
              //       padding: [2, 6, 4, 6],
              //       borderRadius: 100
              //     },
              //   }
              // },
              // labelLine: {
              //   show: false,
              //   normal: {
              //     length: 5,
              //     length2: 50
              //   }
              // },
              label: {
                normal: {
                    formatter: params => {
                      let name = params.name;
                      if (name == getname[0]) {
                        return `${name}：${params.data.num}\n${params.value}%`
                      } else if (name == getname[1]) {
                        return `${name}：${params.data.num}\n${params.value}%`
                      } else if (name == getname[2]) {
                        return `${name}：${params.data.num}\n${params.value}%`
                      }
                    },
                  textStyle: {
                    fontSize: 12,
                    color:'#333'
                  },
                  padding: [0, -60, 26, -60],
                }
              },
              labelLine: {
                normal: {
                  length: 10,
                  length2: 60,
                }
              },
              data: data,
              itemStyle: {
                shadowBlur: 8,
                shadowColor: "rgba(255, 255, 255, 0)",
                borderColor: '#FFF',
                borderWidth: 2,
                color: function (colors) {
                  var colorList = ['#FFA200', '#0183FA', '#FF5D3D'];
                  return colorList[colors.dataIndex];
                }
              },
            }
            ]
          };

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

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