对接

shj

2022-08-19 444aeabb015bb0a101b80233e65939b35e8e622c

 src/views/goalManagement/targetStatistics/index.vue

@@ -1,19 +1,53 @@
<template>
   <div>
      <div ref="main" style="width: 100%; height: 400px"></div>
   <div style="background-color: #fff">
      <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: 400px;"></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() {
      onMounted(() => {
         init();
      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: '未完成',
               });
               arr.push({
                  value: res.data.data.complete,
                  name: '已完成',
               });
               console.log(arr);
               init(arr);
            });
      };
      const main = ref();
      const init = () => {
      const init = (data: any) => {
         var myChart = echarts.init(main.value);
         var option = {
            // title: {
@@ -26,20 +60,14 @@
            },
            legend: {
               orient: 'vertical',
               left: 'left',
               left: '30%',
            },
            series: [
               {
                  name: 'Access From',
                  // name: 'Access From',
                  type: 'pie',
                  radius: '100%',
                  data: [
                     { value: 1048, name: 'Search Engine' },
                     { value: 735, name: 'Direct' },
                     { value: 580, name: 'Email' },
                     { value: 484, name: 'Union Ads' },
                     { value: 300, name: 'Video Ads' },
                  ],
                  radius: '90%',
                  data: data,
                  emphasis: {
                     itemStyle: {
                        shadowBlur: 10,
@@ -54,8 +82,10 @@
         myChart.setOption(option);
      };
      return {
         form,
         main,
         init,
         listApi,
      };
   },
});