折线图

.gitignore

@@ -22,3 +22,4 @@ node_modules
 *.sw?
 stats.html
 yarn.lock
+duty

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ax-web-seats",
+  "name": "duty-management-web",
   "private": true,
   "version": "0.0.0",
   "type": "module",

src/out/git_info.json

@@ -1 +1 @@
-{"提交id":"2a9491a24ebd57a5e593bafdcba0d8a8404bedb4","提交分支":"master","提交时间":"2023-08-02 17:17:04","打包用户":"CzRger","打包邮箱":"526948392@qq.com","打包时间":"2023-08-02 18:38:39"}
+{"提交ID：":"cd5f282ecfb58bfdaef08384adab92f59b019b8e","提交用户：":"CzRger","提交分支：":"(HEAD -> master, origin/master)","提交时间：":"2023-10-31 18:02:04","打包用户：":"CzRger","打包时间：":"2023-11-01 11:12:41"}

src/views/staging/zbgly/left/trend-analysis-chart.vue

@@ -41,59 +41,154 @@ export default defineComponent({
     const ref_chart = ref();
     const initChart = () => {
       const chart = echarts.init(ref_chart.value);
+      const yStyle = {
+        splitNumber: 2,
+        axisLine: {show: false},
+        axisTick: {show: false},
+        axisLabel: {
+          color: '#FDFEFF'
+        },
+        nameTextStyle: {
+          color: '#D8D8D8'
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#1c354f',
+            type: 'dotted',
+          }
+        },
+      }
+      const lineStyle = {
+        symbol: 'none',
+        smooth: true,
+        z: 3
+      }
+      const barStyle = {
+        barWidth: 10,
+        barGap: '30%',
+        z: 1
+      }
+      const pictorialBarStyle = {
+        z: 2,
+        type: 'pictorialBar',
+        barWidth: barStyle.barWidth + 2,
+        barGap: '10%',
+        symbol: 'rect', // 小矩形的形状
+        symbolSize: ['100%', 2], // 小矩形的宽度和高度
+        symbolRepeat: true,
+        symbolRepeatDirection: 'start',
+        symbolMargin: 1,
+        itemStyle: {
+          color: 'rgba(5,26,50,1)'
+        }
+      }
       const option = {
+        grid: {
+          top: 36,
+          bottom: 50
+        },
         tooltip: {
           trigger: 'axis',
+          backgroundColor: 'rgba(0, 0, 0, 0.7)',
+          borderColor: 'rgba(0, 0, 0, 0.7)',
+          extraCssText: 'display: flex;flex-direction: column;min-width: 100px;color: #ffffff;',
+          formatter: (p) => {
+            const barTrue = p.filter(v => v.seriesName === '出勤')[0]
+            const barFalse = p.filter(v => v.seriesName === '异常')[0]
+            const lineTrue = p.filter(v => v.seriesName === '出勤率')[0]
+            const lineFalse = p.filter(v => v.seriesName === '异常率')[0]
+            const s = 'display: flex;justify-content: space-between;margin-top: 6px;'
+            let str = `
+              <div style="margin-bottom: 6px;">${barTrue.name}</div>
+              <div style="${s}color: #3effbb;"><div>${barTrue.seriesName}</div><div>${barTrue.value}</div></div>
+              <div style="${s}color: #3effbb;"><div>${lineTrue.seriesName}</div><div>${lineTrue.value}</div></div>
+              <div style="${s}color: #e5004f;"><div>${barFalse.seriesName}</div><div>${barFalse.value}</div></div>
+              <div style="${s}color: #e5004f;"><div>${lineFalse.seriesName}</div><div>${lineFalse.value}</div></div>
+            `
+            return str
+          }
         },
         xAxis: [
           {
             type: 'category',
             data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
             axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
+              lineStyle: {
+                color: '#213b56'
+              }
             },
+            axisTick: {show: false},
             axisLabel: {
               color: '#ffffff',
-            }
+            },
           }
         ],
         yAxis: [
           {
             type: 'value',
             name: '数量/个',
-            interval: 4,
+            ...yStyle
           },
           {
             type: 'value',
             name: '占比/%',
-            interval: 4,
+            ...yStyle
           }
         ],
         series: [
           {
             name: '出勤',
             type: 'bar',
-            data: [15, 18, 13, 5, 7, 10, 22]
+            data: [15, 18, 13, 5, 7, 10, 22],
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 渐变色的起止位置，可根据需要调整
+                  [
+                    { offset: 0, color: 'rgba(62,255,187,1)' }, // 渐变色起始颜色
+                    { offset: 1, color: 'rgba(62,255,187,0.1)' } // 渐变色结束颜色
+                  ]
+              )
+            },
+            ...barStyle
           },
           {
             name: '异常',
             type: 'bar',
-            data: [15, 18, 13, 5, 7, 10, 22].reverse()
+            data: [15, 18, 13, 5, 7, 10, 22].reverse(),
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 渐变色的起止位置，可根据需要调整
+                  [
+                    { offset: 0, color: 'rgba(229,0,79,1)' }, // 渐变色起始颜色
+                    { offset: 1, color: 'rgba(229,0,79,0.1)' } // 渐变色结束颜色
+                  ]
+              )
+            },
+            ...barStyle
+          },
+          {
+            data: [15, 18, 13, 5, 7, 10, 22],
+            ...pictorialBarStyle
+          },
+          {
+            data: [15, 18, 13, 5, 7, 10, 22].reverse(),
+            ...pictorialBarStyle
           },
           {
             name: '出勤率',
             type: 'line',
             yAxisIndex: 1,
-            data: [0.3, 0.22, 0.33, 0.1, 0.17, 0.34, 0.45]
+            data: [0.3, 0.22, 0.33, 0.1, 0.17, 0.34, 0.45],
+            color: '#3effbb',
+            ...lineStyle
           },
           {
             name: '异常率',
             type: 'line',
             yAxisIndex: 1,
-            data: [0.3, 0.22, 0.33, 0.1, 0.17, 0.34, 0.45].reverse()
+            data: [0.3, 0.22, 0.33, 0.1, 0.17, 0.34, 0.45].reverse(),
+            color: '#e5004f',
+            ...lineStyle
           }
         ]
       };

vite.config.ts

@@ -51,7 +51,7 @@ export default defineConfig({
     }
   },
   build: {
-    outDir: "duty-web",
+    outDir: "duty",
     rollupOptions: {//分包优化
       output: {
         manualChunks(id) {