1122

cdTMP/src/views/dashboard/workplace/components/cpns/st-project-chart.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class="ma-content-block p-3 mt-3 bg-white">
+        <ma-chart height="300px" :option="loginChartOptions" />
+    </div>
+</template>
+
+<script setup>
+import { nextTick, onMounted, ref } from "vue"
+import { graphic } from "echarts"
+
+function graphicFactory(side) {
+    return {
+        type: "text",
+        bottom: "8",
+        ...side,
+        style: {
+            text: "",
+            textAlign: "center",
+            fill: "#4E5969",
+            fontSize: 12
+        }
+    }
+}
+
+const xAxis = ref([
+    "2022-07-06",
+    "2022-07-07",
+    "2022-07-08",
+    "2022-07-09",
+    "2022-07-10",
+    "2022-07-11",
+    "2022-07-12",
+    "2022-07-13",
+    "2022-07-14",
+    "2022-07-15"
+])
+const chartsData = ref([32, 56, 61, 89, 12, 33, 56, 92, 180, 25])
+const graphicElements = ref([graphicFactory({ left: "2.6%" }), graphicFactory({ right: 0 })])
+
+const loginChartOptions = ref({
+    grid: {
+        left: "2.6%",
+        right: "0",
+        top: "10",
+        bottom: "30"
+    },
+    xAxis: {
+        type: "category",
+        offset: 2,
+        data: xAxis.value,
+        boundaryGap: false,
+        axisLabel: {
+            color: "#4E5969",
+            formatter(value, idx) {
+                if (idx === 0) return ""
+                if (idx === xAxis.value.length - 1) return ""
+                return `${value}`
+            }
+        },
+        axisLine: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            show: true,
+            interval: (idx) => {
+                if (idx === 0) return false
+                if (idx === xAxis.value.length - 1) return false
+                return true
+            },
+            lineStyle: {
+                color: "#E5E8EF"
+            }
+        },
+        axisPointer: {
+            show: true,
+            lineStyle: {
+                color: "#23ADFF",
+                width: 2
+            }
+        }
+    },
+    yAxis: {
+        type: "value",
+        axisLine: {
+            show: false
+        },
+        axisLabel: {
+            formatter(value, idx) {
+                if (idx === 0) return value
+                return `${value}`
+            }
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                type: "dashed",
+                color: "#E5E8EF"
+            }
+        }
+    },
+    tooltip: {
+        trigger: "axis",
+        formatter(params) {
+            return `<div class="login-chart">
+        <p class="tooltip-title">${params[0].axisValueLabel}</p>
+        <div class="content-panel"><span>项目新增</span><span class="tooltip-value">${Number(
+            params[0].value
+        ).toLocaleString()}</span></div>
+      </div>`
+        }
+    },
+    graphic: {
+        elements: graphicElements.value
+    },
+    series: [
+        {
+            data: chartsData.value,
+            type: "line",
+            smooth: true,
+            symbolSize: 12,
+            emphasis: {
+                focus: "series",
+                itemStyle: {
+                    borderWidth: 2
+                }
+            },
+            lineStyle: {
+                width: 3,
+                color: new graphic.LinearGradient(0, 0, 1, 0, [
+                    {
+                        offset: 0,
+                        color: "rgba(30, 231, 255, 1)"
+                    },
+                    {
+                        offset: 0.5,
+                        color: "rgba(36, 154, 255, 1)"
+                    },
+                    {
+                        offset: 1,
+                        color: "rgba(111, 66, 251, 1)"
+                    }
+                ])
+            },
+            showSymbol: false,
+            areaStyle: {
+                opacity: 0.8,
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: "rgba(17, 126, 255, 0.16)"
+                    },
+                    {
+                        offset: 1,
+                        color: "rgba(17, 128, 255, 0)"
+                    }
+                ])
+            }
+        }
+    ]
+})
+</script>