合并

Your Name

2022-09-08 5a1616f169d75ece07d2d12a8edac3e5f660a920

 src/views/goalManagement/targetStatistics/index.vue

@@ -0,0 +1,92 @@
<template>
   <div style="background-color: #fff">
     <h2 style="line-height:40px;text-align: center;padding: 20px 0;">目标完成情况统计</h2>
      <el-row style="padding:20px 0">
         <el-col :span="4" :offset="17">
            <el-select v-model="form.targetType" placeholder="" @change="listApi" style="width:100%">
               <el-option label="年指标" :value="1" />
               <el-option label="月指标" :value="2" />
               <el-option label="半年" :value="3" />
               <el-option label="季度" :value="4" />
            </el-select>
         </el-col>
      </el-row>
      <div ref="main" style="width: 100%; height: 450px;"></div>
   </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
   setup() {
      const form = ref({
         qName: '',
         indexNum: '',
         targetType: 1,
         divideStatus: '',
      });
      onMounted(() => {
         listApi();
      });
      const listApi = () => {
         goalManagementApi()
            .gettargetstatistics(form.value.targetType)
            .then((res) => {
               let arr = [];
               arr.push({
                  value: res.data.data.noComplete,
                  name: `未完成 ${res.data.data.noComplete}`,
               });
               arr.push({
                  value: res.data.data.complete,
                  name: `已完成 ${res.data.data.complete}`,
               });
               init(arr);
            });
      };
      const main = ref();
      const init = (data: any) => {
         var myChart = echarts.init(main.value);
         var option = {
            // title: {
            //    text: 'Referer of a Website',
            //    subtext: 'Fake Data',
            //    left: 'center',
            // },
            tooltip: {
               trigger: 'item',
            },
            legend: {
               orient: 'vertical',
               left: '30%',
            },
            series: [
               {
                  // name: 'Access From',
                  type: 'pie',
                  radius: '90%',
                  data: data,
                  emphasis: {
                     itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                     },
                  },
               },
            ],
         };

         myChart.setOption(option);
      };
      return {
         form,
         main,
         init,
         listApi,
      };
   },
});
</script>