计划报表修改

src/components/echarts/WordPopulation.vue

@@ -0,0 +1,114 @@
+<template>
+    <echartsBase :option="setOption"/>
+</template>
+
+<script setup>
+import { nextTick, onMounted, ref, watch } from 'vue'
+import echartsBase from './index.vue'
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '管理费用项目分摊占比情况'
+    },
+    color: {
+        type: Array,
+        default: () => (['#5087EC', '#68BBC4'])
+    },
+    unit: {
+        type: String,
+        default: '元'
+    },
+    datas: {
+        type: Array,
+        default: () => ([])
+    }
+})
+
+//初始变量
+const setOption = ref({})
+const titles = ref(props.title)
+const colors = ref(props.color)
+const units = ref(props.unit)
+const datas = ref(props.datas)
+
+watch(() => [
+    props.title,
+    props.color,
+    props.unit,
+], ([title, color, unit]) => {
+    titles.value = title
+    colors.value = color
+    units.value = unit
+    setOptions()
+})
+
+//深度监听数据变化
+watch(() => [
+    props.datas,
+], ([data]) => {
+    datas.value = data
+    setOptions()
+}, { deep: true })
+
+
+//设置图表
+const setOptions = () => {
+    setOption.value = {
+        color: colors.value,
+        title: {
+    
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  legend: {},
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'value',
+    boundaryGap: [0, 0.01],
+  
+  },
+  yAxis: {
+    type: 'category',
+    data: ['张三', '李四', '王五', '赵六', '陈琦', '五把'],
+   
+  },
+  series: [
+    {
+      name: '任务完成率',
+      type: 'bar',
+      data: [10, 20, 40, 60, 80, 99],
+      itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            formatter: function (a, b, c) {
+                                return a.data + "%";
+                            }
+                        }
+                    }
+     },
+      
+    },
+  
+    
+  ]
+}
+}
+
+//渲染完成
+onMounted(() => {
+    nextTick(() => {
+        setOptions()
+    })
+})
+</script>

src/views/static/plan.vue

@@ -45,7 +45,7 @@
                     <HcCardItem ui="hac-card-item">
                         <HcCardItem ui="hac-card-item">
                             <div class="hc-row-echarts-box" style="height: 360px;">
-                                <StackedLine isMonth :datas="planDatas1" />
+                                <WordPopulation isMonth />
                             </div>
                         </HcCardItem>
                     </HcCardItem>
@@ -53,7 +53,7 @@
                 <el-col :span="12">
                     <HcCardItem ui="hac-card-item">
                         <div class="hc-row-echarts-box" style="height: 360px;">
-                            <StackedLine isMonth :datas="planDatas1" />
+                            <StackedLine isMonth />
                         </div>
                     </HcCardItem>
                 </el-col>
@@ -68,8 +68,8 @@
  <script setup>
  import {ref, watch} from "vue";
  import BarLabelRotation from "~com/echarts/BarLabelRotation.vue";
- import ProgressChart from "~com/echarts/ProgressChart.vue";
  import StackedLine from "~com/echarts/StackedLine.vue";
+ import WordPopulation from "~com/echarts/WordPopulation.vue";
  const searchForm=ref({
     department:'',person:''
  })