资料进度图修改

src/views/schedule/components/echarts/ReportChart.vue

@@ -1,140 +1,175 @@
 <template>
     <div class="BarChart-box">
-        <div ref="echart" class="BarChart-echarts" :style="`width : ${chart?.clientWidth}px`"/>
+        <div
+            ref="echart"
+            class="BarChart-echarts"
+            :style="`width : ${chart?.clientWidth}px`"
+        />
     </div>
 </template>
 
 <script setup>
-import * as echarts from 'echarts'
-import { nextTick, onMounted, onUnmounted, ref,watch } from 'vue'
+import * as echarts from "echarts";
+import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 const props = defineProps({
     datas: {
         type: Array,
-        default: () => ([])
-    }
-})
-
+        default: () => [],
+    },
+});
 
 //初始变量
 let chart = null;
-const echart = ref(null)
-const datas = ref(props.datas)
+const echart = ref(null);
+const datas = ref(props.datas);
 
 //监听
-watch(() => props.datas, (data) => {
-    datas.value = data
-    setDatas(data)
-})
+watch(
+    () => props.datas,
+    (data) => {
+        datas.value = data;
+        setDatas(data);
+    }
+);
 
 //初始化图表
 const initChart = () => {
-    chart = echarts.init(echart.value)
-    setDatas(props.datas)
-}
+    chart = echarts.init(echart.value);
+    setDatas(props.datas);
+};
 
 //设置数据
 const setDatas = (data) => {
-    let AxisData = [], approvalAmount = [], awaitAmount = [], submitAmount = [];
+    let AxisData = [],
+        approvalAmount = [],
+        awaitAmount = [],
+        submitAmount = [];
+    let inSubmitCount = [];
     for (let i = 0; i < data.length; i++) {
-        AxisData.push(data[i].title)
-        approvalAmount.push(data[i]?.approvalAmount)
-        awaitAmount.push(data[i]?.awaitAmount)
-        submitAmount.push(data[i]?.submitAmount)
+        AxisData.push(data[i].title);
+        approvalAmount.push(data[i]?.approvalAmount);
+        awaitAmount.push(data[i]?.awaitAmount);
+        submitAmount.push(data[i]?.submitAmount);
+        inSubmitCount.push(
+            data[i]?.submitAmount -
+                data[i]?.awaitAmount -
+                data[i]?.approvalAmount
+        );
     }
-    setOptions(AxisData,approvalAmount,awaitAmount,submitAmount)
-}
+    setOptions(
+        AxisData,
+        approvalAmount,
+        awaitAmount,
+        submitAmount,
+        inSubmitCount
+    );
+};
 
 //监听浏览器窗口变化
 const windowResize = () => {
     window.addEventListener("resize", resizeEvent);
-}
+};
 
 const resizeEvent = () => {
     window.requestAnimationFrame(() => {
         chart.resize();
-    })
-}
+    });
+};
 
 //设置图表
-const setOptions = (AxisData,approvalAmount,awaitAmount,submitAmount) => {
+const setOptions = (
+    AxisData,
+    approvalAmount,
+    awaitAmount,
+    submitAmount,
+    inSubmitAmount
+) => {
     chart.setOption({
-        color: ['#F7AD2D', '#3187FF', '#1ACC96'],
+        color: ["#F7AD2D", "#3187FF", "#1ACC96", "#8c9099"],
         tooltip: {
-            trigger: 'axis',
+            trigger: "axis",
             axisPointer: {
-                type: 'shadow'
-            }
+                type: "shadow",
+            },
         },
         legend: {
-            top: 'bottom',
-            data: ['待审批', '已填报', '已审批']
+            top: "bottom",
+            data: ["待审批", "已填报", "已审批", "未上报"],
         },
         xAxis: {
-            type: 'value',
+            type: "value",
             interval: 1000,
         },
         yAxis: {
-            type: 'category',
-            data: AxisData
+            type: "category",
+            data: AxisData,
         },
         series: [
             {
-                name: '待审批',
-                type: 'bar',
+                name: "待审批",
+                type: "bar",
                 data: awaitAmount,
                 label: {
                     show: true,
-                    position: 'right'
-                }
+                    position: "right",
+                },
             },
             {
-                name: '已填报',
-                type: 'bar',
+                name: "已填报",
+                type: "bar",
                 data: submitAmount,
                 label: {
                     show: true,
-                    position: 'right'
-                }
+                    position: "right",
+                },
             },
             {
-                name: '已审批',
-                type: 'bar',
+                name: "已审批",
+                type: "bar",
                 data: approvalAmount,
                 label: {
                     show: true,
-                    position: 'right'
-                }
-            }
-        ]
-    })
-}
+                    position: "right",
+                },
+            },
+            {
+                name: "未上报",
+                type: "bar",
+                data: inSubmitAmount,
+                label: {
+                    show: true,
+                    position: "right",
+                },
+            },
+        ],
+    });
+};
 
 //渲染完成
 onMounted(() => {
     nextTick(() => {
-        initChart()
-        windowResize()
-    })
-})
+        initChart();
+        windowResize();
+    });
+});
 
 //被卸载
 onUnmounted(() => {
-    window.removeEventListener("resize",resizeEvent);
-    chart.dispose()
-    chart = null
-})
-
+    window.removeEventListener("resize", resizeEvent);
+    chart.dispose();
+    chart = null;
+});
 
 const onResize = () => {
     nextTick(() => {
         chart.resize();
-    })
-}
+    });
+};
 
 // 暴露出去
 defineExpose({
-    onResize
-})
+    onResize,
+});
 </script>
 
 <style lang="scss" scoped>