公车管理 会议管理-时间轴插件 调整楼层概览图标样式

src/components/common/timeLine.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="timeline" ref="timeLine">
+    <div class="kedu_content">
+      <div
+        v-for="(num, index) in timekedu"
+        :key="index"
+        :class="['xiaoshikd', 'xiaoshikd' + index]"
+        :ref="'xiaoshikd' + index"
+      >
+        <div class="shifenkd"></div>
+        <div class="shifenkd"></div>
+        <div class="shifenkd"></div>
+        <div class="shifenkd"></div>
+        <div class="shifenkd"></div>
+      </div>
+    </div>
+    <div class="timepoint_content">
+      <div
+        v-for="(str, index) in timePointDataArr"
+        :key="index"
+        v-html="str"
+        :class="['timepoint', 'timepoint' + index]"
+        :ref="'timepoint' + index"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    startTime: Number,
+    endTime: Number,
+  },
+  data() {
+    return {
+      timePointWidth: 30,
+      timePointDataArr: [],
+      timekedu: [],
+    };
+  },
+  mounted() {
+    this.setTimeLine();
+  },
+  methods: {
+    setTimeLine() {
+      let that = this;
+      // 17 - 8 = 9
+      // 0 1 2  3  4  5  6  7  8  9
+      // 8 9 10 11 12 13 14 15 16 17
+      let totalTimeHour = this.endTime - this.startTime; // 9个小时，10个时间刻度
+      for (let i = 0; i <= totalTimeHour; i++) {
+        let str =
+          this.startTime + i >= 10
+            ? this.startTime + i + ":00"
+            : "0" + (this.startTime + i) + ":00";
+        this.timePointDataArr.push(str);
+
+        if (i != 0) this.timekedu.push({});
+      }
+
+      // let totalTimeMinute = totalTimeHour * 60;
+      // debugger;
+      // this.$refs.timeLine.clientWidth;
+      // this.$refs.timeLine.clientHeight;
+
+      setTimeout(() => {
+        let positionPY = (that.$refs.timeLine.clientWidth - 50) / totalTimeHour;
+        for (let i = 0; i <= totalTimeHour; i++) {
+          // 时间点 left 偏移
+          that.$refs["timepoint" + i][0].style.left = positionPY * i + "px";
+        }
+        for (let i = 0; i <= that.timekedu.length; i++) {
+          // 时间刻度 宽度
+          that.$refs["xiaoshikd" + i][0].style.width =
+            (that.$refs.timeLine.clientWidth - 50) / totalTimeHour + "px";
+        }
+      }, 100);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.timeline {
+  width: 100%;
+  height: 100%;
+  .kedu_content {
+    height: calc(100% - 24px);
+    margin-left: 25px;
+    margin-right: 25px;
+    .xiaoshikd {
+      height: 100%;
+      display: inline-block;
+      box-sizing: border-box;
+      border-right: 2px solid #eeeeee;
+      border-bottom: 2px solid #eeeeee;
+      position: relative;
+      &:first-child {
+        border-left: 2px solid #eeeeee;
+      }
+      .shifenkd {
+        position: absolute;
+        margin-top: 8px;
+        width: 2px;
+        height: calc(100% - 8px);
+        background: #eeeeee;
+        &:nth-child(1) {
+          left: calc(100% / 6 * 1 - 1px);
+        }
+        &:nth-child(2) {
+          left: calc(100% / 6 * 2 - 1px);
+        }
+        &:nth-child(3) {
+          left: calc(100% / 6 * 3 - 1px);
+        }
+        &:nth-child(4) {
+          left: calc(100% / 6 * 4 - 1px);
+        }
+        &:nth-child(5) {
+          left: calc(100% / 6 * 5 - 1px);
+        }
+      }
+    }
+  }
+  .timepoint_content {
+    height: 24px;
+    position: relative;
+    .timepoint {
+      width: 50px;
+      text-align: center;
+      font-size: 16px;
+      font-weight: bold;
+      display: inline-block;
+      position: absolute;
+    }
+  }
+}
+</style>

src/components/work/bus/workBus.vue

@@ -1,142 +1,566 @@
 <template>
-    <div>
-      <div class="border-shadow">
-        <query></query>
-        <card :title="'核心指标'">
-          <CoreData :data-list="coreData"></CoreData>
-        </card>
-      </div>
-      <a-row :style="{ marginTop: '15px' }">
-        <a-col :span="18">
-          <div class="left border-shadow">
-            <card :title="'会议室管理'"></card>
-            <div class="fjfbt"></div>
-          </div>
-        </a-col>
-        <a-col :span="6">
-          <div class="right border-shadow"></div>
-        </a-col>
-      </a-row>
+  <div>
+    <div class="border-shadow">
+      <query></query>
+      <card :title="'核心指标'">
+        <CoreData :data-list="coreData"></CoreData>
+      </card>
     </div>
-  </template>
+    <a-row :style="{ marginTop: '15px' }">
+      <a-col :span="18">
+        <div class="left border-shadow">
+          <card :title="'文印管理'">
+            <div
+              class="myChart"
+              ref="myChart1"
+              :style="{ height: '515px' }"
+            ></div>
+          </card>
+        </div>
+      </a-col>
+      <a-col :span="6">
+        <div class="right border-shadow">
+          <card :title="'成本趋势'">
+            <div class="cben">
+              <div class="total">成本趋势： <span>增速10%</span></div>
+              <div
+                class="myChart"
+                ref="myChart2"
+                :style="{ height: '484px' }"
+              ></div>
+            </div>
+          </card>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
   <script>
-  import query from "@/components/common/query.vue";
-  import card from "@/components/common/card.vue";
-  export default {
-    components: {
-      query,
-      card,
+import query from "@/components/common/query.vue";
+import card from "@/components/common/card.vue";
+export default {
+  components: {
+    query,
+    card,
+  },
+  data() {
+    const listData = [];
+    for (let i = 0; i < 100; i++) {
+      listData.push({
+        index: i + 1,
+        name: "物理饭",
+        department: "技术开发部门",
+        time: "2023.02.03 00:00:00",
+      });
+    }
+    return {
+      options: [
+        {
+          value: 1,
+          name: "中讯1",
+        },
+        {
+          value: 2,
+          name: "中讯2",
+        },
+      ],
+      floors: [
+        {
+          value: 7,
+          name: "7层",
+        },
+        {
+          value: 8,
+          name: "8层",
+        },
+      ],
+      columns: [
+        { title: "序号", dataIndex: "index", key: "1", width: 48 },
+        { title: "姓名", dataIndex: "name", key: "2", width: 60 },
+        { title: "部门", dataIndex: "department", key: "3", width: 80 },
+        { title: "最后进入时间", dataIndex: "time", key: "4", width: 90 },
+      ],
+      listData: listData,
+      coreData: [
+        {
+          title: "车辆平均成本",
+          num: "100",
+          unit: "元",
+          historyDesc: "同比",
+          historyNum: 0.4,
+        },
+        {
+          title: "车辆平均出车次数",
+          num: "80",
+          unit: "",
+          historyDesc: "同比",
+          historyNum: 0.4,
+        },
+        {
+          title: "车辆平均碳排放",
+          num: "80",
+          unit: "tco2e",
+          historyDesc: "同比",
+          historyNum: 0.4,
+        },
+        {
+          title: "平均出车时长",
+          num: 80,
+          unit: "小时",
+          historyDesc: "同比",
+          historyNum: 0.4,
+        },
+        {
+          type: 1,
+          isHighLight: false,
+          title: "值得关注",
+          content: "增加20个公车数量",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.setEchart1();
+    this.setEchart2();
+  },
+  methods: {
+    handleChange(value) {
+      console.log(`selected ${value}`);
+    },
+    getTimeRange() {
+      this.$refs.timeRange.getTimeRange(); // 获取时间段
     },
-    data() {
-      const listData = [];
-      for (let i = 0; i < 100; i++) {
-        listData.push({
-          index: i + 1,
-          name: "物理饭",
-          department: "技术开发部门",
-          time: "2023.02.03 00:00:00",
-        });
-      }
-      return {
-        options: [
+
+    setEchart1() {
+      let chart = this.$echarts.init(this.$refs.myChart1);
+      let options = {
+        tooltip: {
+          trigger: "axis",
+          // axisPointer: {
+          //    type: "shadow",
+          // },
+        },
+        legend: {
+          top: "5%",
+          textStyle: {
+            color: "#000", // 文字的颜色。
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: "1%",
+          right: "5%",
+          top: "15%",
+          bottom: "5%",
+          containLabel: true,
+          backgroundColor: "transparent",
+        },
+        yAxis: [
           {
-            value: 1,
-            name: "中讯1",
+            xtype: "value",
+            name: "出车次数",
+            nameTextStyle: {
+              fontSize: 20,
+              color: "#000",
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#1ebfda",
+                type: "dashed",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#000",
+              fontSize: 18,
+            },
           },
           {
-            value: 2,
-            name: "中讯2",
+            type: "value",
+            position: "right",
+            name: "出车时长（h）",
+            min: 0,
+            max: 2000,
+            nameTextStyle: {
+              fontSize: 20,
+              color: "#000",
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#1ebfda",
+                type: "dashed",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#000",
+              fontSize: 18,
+            },
           },
         ],
-        floors: [
+        xAxis: {
+          type: "category",
+          data: [
+            "00:00",
+            "01:00",
+            "02:00",
+            "03:00",
+            "04:00",
+            "05:00",
+            "06:00",
+            "07:00",
+            "08:00",
+            "09:00",
+            "10:00",
+            "11:00",
+            "12:00",
+            "13:00",
+            "14:00",
+            "15:00",
+            "16:00",
+            "17:00",
+            "18:00",
+            "19:00",
+            "20:00",
+            "21:00",
+            "22:00",
+            "23:00",
+          ],
+          axisLine: {
+            show: true,
+            textStyle: {
+              color: "#1ebfda",
+            },
+            lineStyle: {
+              color: "#1ebfda", //刻度线的颜色
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#000",
+            fontSize: 18,
+          },
+        },
+        series: [
           {
-            value: 7,
-            name: "7层",
+            name: "平均出车时长",
+            type: "bar",
+            barWidth: 20,
+            barGap: "40%",
+            data: [
+              430, 300, 320, 480, 410, 520, 570, 610, 610, 440, 630, 630, 300,
+              320, 480, 410, 610, 440, 630, 320, 480, 440, 630, 200,
+            ],
+            itemStyle: {
+              barBorderRadius: [4, 24, 0, 0],
+            },
+            color: "#5087ec",
           },
           {
-            value: 8,
-            name: "8层",
+            name: "出车次数",
+            type: "bar",
+            barWidth: 20,
+            barGap: "40%",
+            data: [
+              810, 580, 700, 860, 810, 1010, 1080, 1100, 1220, 1220, 1000, 1300,
+              1080, 1300, 810, 580, 700, 860, 810, 1010, 1080, 1000, 1300, 1080,
+            ],
+            itemStyle: {
+              barBorderRadius: [4, 24, 0, 0],
+            },
+            color: "#68bbc4",
           },
         ],
-        columns: [
-          { title: "序号", dataIndex: "index", key: "1", width: 48 },
-          { title: "姓名", dataIndex: "name", key: "2", width: 60 },
-          { title: "部门", dataIndex: "department", key: "3", width: 80 },
-          { title: "最后进入时间", dataIndex: "time", key: "4", width: 90 },
-        ],
-        listData: listData,
-        coreData: [
-          {
-            title: "会议室饱和度",
-            num: "90%",
-            unit: "/月",
-            historyDesc: "同比",
-            historyNum: 0.4,
+      };
+      chart.setOption(options);
+    },
+    setEchart2() {
+      let chart = this.$echarts.init(this.$refs.myChart2);
+      let color = ["#2eb4ff", "#9b9aea", "#f4e23e"];
+      let echartData = [
+        {
+          name: "1月",
+          value1: 1366,
+          value2: 0,
+          value3: 0,
+        },
+        {
+          name: "2月",
+          value1: 3694,
+          value2: 0,
+          value3: 0,
+        },
+        {
+          name: "3月",
+          value1: 19727,
+          value2: 1000,
+          value3: 0,
+        },
+        {
+          name: "4月",
+          value1: 17046,
+          value2: 1000,
+          value3: 500,
+        },
+        {
+          name: "5月",
+          value1: 14780,
+          value2: 13396,
+          value3: 6365,
+        },
+        {
+          name: "6月",
+          value1: 19359,
+          value2: 13220,
+          value3: 5940,
+        },
+        {
+          name: "7月",
+          value1: 14229,
+          value2: 10836,
+          value3: 8234,
+        },
+        {
+          name: "8月",
+          value1: 13176,
+          value2: 12478,
+          value3: 10755,
+        },
+        {
+          name: "9月",
+          value1: 16515,
+          value2: 12911,
+          value3: 10806,
+        },
+        {
+          name: "10月",
+          value1: 13658,
+          value2: 9479,
+          value3: 8613,
+        },
+        {
+          name: "11月",
+          value1: 16364,
+          value2: 10839,
+          value3: 8826,
+        },
+        {
+          name: "12月",
+          value1: 19973,
+          value2: 10016,
+          value3: 9291,
+        },
+      ];
+
+      let legendItem = ["成本"];
+
+      let xAxisData = echartData.map((v) => v.name);
+      //  ["1", "2", "3", "4", "5", "6", "7", "8"]
+      let yAxisData1 = echartData.map((v) => v.value1);
+      // [100, 138, 350, 173, 180, 150, 180, 230]
+      const hexToRgba = (hex, opacity) => {
+        let rgbaColor = "";
+        let reg = /^#[\da-f]{6}$/i;
+        if (reg.test(hex)) {
+          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
+            "0x" + hex.slice(3, 5)
+          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+        }
+        return rgbaColor;
+      };
+
+      let options = {
+        // backgroundColor: bgColor,
+        color: color,
+        legend: {
+          center: true,
+          top: 10,
+          data: legendItem,
+          textStyle: {
+            color: "#000000",
+          },
+        },
+        // calculable: true,
+        tooltip: {
+          trigger: "axis",
+          formatter: function (params) {
+            let html = "";
+            params.forEach((v) => {
+              console.log(v);
+              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
+                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ffffff;"></span>
+                ${v.seriesName}.${v.name}
+                <span style="color:${
+                  color[v.componentIndex]
+                };font-weight:700;font-size: 18px">${v.value}</span>
+                人`;
+            });
+
+            return html;
           },
+          extraCssText:
+            "background: #ffffff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
+          // axisPointer: {
+          //     type: 'shadow',
+          //     shadowStyle: {
+          //         // color: '#ffffff',
+          //         shadowColor: 'rgba(225,225,225,1)',
+          //         shadowBlur: 5
+          //     }
+          // }
+        },
+        grid: {
+          left: "1%",
+          right: "5%",
+          top: "15%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        dataZoom: [
+          // x轴进度条，x轴超过15条数据就会展示出来
           {
-            title: "会议室占用率",
-            num: "80%",
-            unit: "/天",
-            historyDesc: "同比",
-            historyNum: 0.4,
+            type: "slider",
+            show: xAxisData.length > 5,
+            start: 0,
+            end: xAxisData.length > 5 ? 30 : 100, // 控制初始化时展示的百分比数量
+            height: 15,
+            left: "5%",
+            right: "5%",
+            bottom: "2%",
+            moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
           },
+        ],
+        xAxis: [
           {
-            title: "会议室占用率",
-            num: "80%",
-            unit: "/天",
-            historyDesc: "同比",
-            historyNum: 0.4,
+            type: "category",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                type: "solid",
+                color: "#0000004d",
+              },
+            },
+            axisLabel: {
+              inside: false,
+              textStyle: {
+                color: "#000000", // x轴颜色
+                fontWeight: "normal",
+                fontSize: "14",
+                lineHeight: 22,
+              },
+            },
+
+            data: xAxisData,
           },
+        ],
+        yAxis: [
           {
-            title: "人均成本（会议）",
-            num: 80,
-            unit: "元/人/月",
-            historyDesc: "同比",
-            historyNum: 0.4,
+            type: "value",
+            name: "",
+            axisLabel: {
+              textStyle: {
+                color: "#000000",
+              },
+            },
+            nameTextStyle: {
+              color: "#000000",
+              fontSize: 12,
+              lineHeight: 40,
+              padding: [0, 0, 0, -20],
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "solid",
+                color: "#0000004d",
+              },
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                type: "solid",
+                color: "#000000",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
           },
+        ],
+        series: [
           {
-            type: 1,
-            isHighLight: false,
-            title: "值得关注",
-            content: "增加会议室",
+            name: legendItem[0],
+            type: "line",
+            smooth: false, //是否平滑
+            // showSymbol: false,/
+            symbolSize: 8,
+            zlevel: 3,
+            lineStyle: {
+              normal: {
+                color: color[0],
+                shadowBlur: 3,
+                shadowColor: hexToRgba(color[0], 0.5),
+                shadowOffsetY: 0,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: hexToRgba(color[0], 0.3),
+                    },
+                    {
+                      offset: 1,
+                      color: hexToRgba(color[0], 0.1),
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: hexToRgba(color[0], 0.1),
+                shadowBlur: 10,
+              },
+            },
+            data: yAxisData1,
           },
         ],
       };
+      chart.setOption(options);
     },
-    mounted() {},
-    methods: {
-      handleChange(value) {
-        console.log(`selected ${value}`);
-      },
-      getTimeRange() {
-        this.$refs.timeRange.getTimeRange(); // 获取时间段
-      },
-    },
-  };
-  </script>
+  },
+};
+</script>
     
   
   <style lang="less" scoped>
-  .left {
-    padding-right: 15px;
-    margin-right: 5px;
-  }
-  .right {
-    padding-left: 15px;
-    margin-left: 5px;
-  }
-  
-  .fjfbt,
-  .drmj_list {
-    height: 50px;
-    height: 775px;
-    .total {
-      font-size: 16px;
-      font-weight: bold;
-      height: 50px;
-      span {
-        font-size: 26px;
-      }
-    }
+.left {
+  padding-right: 15px;
+  margin-right: 5px;
+}
+.right {
+  padding-left: 15px;
+  margin-left: 5px;
+}
+.cben {
+  font-weight: bold;
+  span {
+    font-size: 20px;
   }
-  </style>
+}
+</style>

src/components/work/meeting/workMeeting.vue

@@ -10,11 +10,29 @@
       <a-col :span="18">
         <div class="left border-shadow">
           <card :title="'会议室管理'"></card>
-          <div class="fjfbt"></div>
+          <div class="fjfbt">
+            <timeline
+              v-bind="{
+                startTime: 8,
+                endTime: 17,
+              }"
+            ></timeline>
+          </div>
         </div>
       </a-col>
       <a-col :span="6">
-        <div class="right border-shadow"></div>
+        <div class="right border-shadow">
+          <card :title="'成本趋势'">
+            <div class="cben">
+              <div class="total">成本趋势： <span>成本集中</span></div>
+              <div
+                class="myChart"
+                ref="myChart2"
+                :style="{ height: '484px' }"
+              ></div>
+            </div>
+          </card>
+        </div>
       </a-col>
     </a-row>
   </div>
@@ -22,10 +40,12 @@
 <script>
 import query from "@/components/common/query.vue";
 import card from "@/components/common/card.vue";
+import timeline from "@/components/common/timeLine.vue";
 export default {
   components: {
     query,
     card,
+    timeline,
   },
   data() {
     const listData = [];
@@ -103,7 +123,9 @@ export default {
       ],
     };
   },
-  mounted() {},
+  mounted() {
+    this.setEchart2();
+  },
   methods: {
     handleChange(value) {
       console.log(`selected ${value}`);
@@ -111,6 +133,220 @@ export default {
     getTimeRange() {
       this.$refs.timeRange.getTimeRange(); // 获取时间段
     },
+    setEchart1() {},
+    setEchart2() {
+      let that = this;
+      let chart = this.$echarts.init(this.$refs.myChart2);
+
+      let xLabel = ["3.26", "3.27", "3.28", "3.29", "3.30", "3.31"];
+
+      let yData = [
+        {
+          name: "市场部",
+          color: "#5087ec",
+          startColor: "rgba(80,135,236,.6)",
+          endColor: "rgba(80,135,236,.6)",
+          data: ["110", "130", "150", "170", "150", "130"],
+        },
+        {
+          name: "办公室",
+          color: "#68bbc4",
+          startColor: "rgba(104,187,196,.6)",
+          endColor: "rgba(104,187,196,.6)",
+          data: ["210", "230", "250", "270", "250", "230"],
+        },
+        {
+          name: "产品中心",
+          color: "#60b565",
+          startColor: "rgba(96,181,101,.6)",
+          endColor: "rgba(96,181,101,.6)",
+          data: ["310", "330", "350", "370", "350", "330"],
+        },
+        {
+          name: "智慧院",
+          color: "#f2bd42",
+          startColor: "rgba(242,189,66,.6)",
+          endColor: "rgba(242,189,66,.6)",
+          data: ["410", "430", "450", "470", "450", "430"],
+        },
+        {
+          name: "业务一部",
+          color: "#ee752f",
+          startColor: "rgba(238,117,47,.6)",
+          endColor: "rgba(238,117,47,.6)",
+          data: ["510", "530", "550", "570", "550", "530"],
+        },
+        {
+          name: "其他部门",
+          color: "#d95040",
+          startColor: "rgba(217,80,64,.6)",
+          endColor: "rgba(217,80,64,.6)",
+          data: ["610", "630", "650", "670", "650", "630"],
+        },
+      ];
+      let ySeries = yData.map(function (item) {
+        return {
+          name: item.name,
+          type: "line",
+          stack: "Total",
+          // symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: true,
+          symbolSize: 8,
+          smooth: true,
+          lineStyle: {
+            normal: {
+              width: 2,
+              color: item.color, // 线条颜色
+            },
+          },
+          itemStyle: {
+            color: item.color,
+          },
+          areaStyle: {
+            normal: {
+              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+              color: new that.$echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: item.startColor,
+                  },
+                  {
+                    offset: 1,
+                    color: item.endColor,
+                  },
+                ],
+                false
+              ),
+            },
+          },
+          data: item.data,
+        };
+      });
+
+      let options = {
+        // backgroundColor: "#000237",
+        tooltip: {
+          trigger: "axis",
+          // backgroundColor: "transparent",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(126,199,255,0)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(126,199,255,1)", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(126,199,255,0)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
+        },
+        legend: {
+          align: "left",
+          top: "5%",
+          textStyle: {
+            color: "#000000",
+            fontSize: 16,
+          },
+        },
+        grid: {
+          top: "20%",
+          left: "15%",
+          right: "10%",
+          bottom: "10%",
+          // containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            // boundaryGap: false,
+            axisLine: {
+              //坐标轴轴线相关设置。数学上的x轴
+              show: true,
+              lineStyle: {
+                color: "#6e7079",
+              },
+            },
+            axisLabel: {
+              //坐标轴刻度标签的相关设置
+              textStyle: {
+                color: "#000000",
+                padding: 8,
+                fontSize: 14,
+              },
+              formatter: function (data) {
+                return data;
+              },
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#233653",
+              },
+            },
+            axisTick: {
+              show: true,
+              inside: true,
+            },
+            data: xLabel,
+          },
+        ],
+        yAxis: [
+          {
+            min: 0,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#e8e8e8",
+              },
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: "#233653",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#000000",
+                padding: 8,
+              },
+              formatter: function (value) {
+                if (value === 0) {
+                  return value;
+                }
+                return value;
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: ySeries,
+      };
+      chart.setOption(options);
+    },
   },
 };
 </script>
@@ -126,17 +362,15 @@ export default {
   margin-left: 5px;
 }
 
-.fjfbt,
-.drmj_list {
-  height: 50px;
-  height: 775px;
-  .total {
-    font-size: 16px;
-    font-weight: bold;
-    height: 50px;
-    span {
-      font-size: 26px;
-    }
+.cben {
+  font-weight: bold;
+  span {
+    font-size: 20px;
   }
 }
+
+.fjfbt {
+  width: 100%;
+  height: 60px;
+}
 </style>

src/components/work/overview/workOverview.vue

@@ -79,7 +79,7 @@ export default {
         { title: "序号", dataIndex: "index", key: "1", width: 48 },
         { title: "姓名", dataIndex: "name", key: "2", width: 60 },
         { title: "部门", dataIndex: "department", key: "3", width: 80 },
-        { title: "最后进入时间", dataIndex: "time", key: "4", width: 90 },
+        { title: "最后进入时间", dataIndex: "time", key: "4", width: 95 },
       ],
       listData: listData,
       coreData: [