大屏项目初始化

2026-02-25 22:57:12 +08:00
parent 774ef69108
commit 8ce4adbab4
16 changed files with 1986 additions and 0 deletions
--- a/screen-vue/src/views/desktop/screen/Test/components/ChartYbp.vue
+++ b/screen-vue/src/views/desktop/screen/Test/components/ChartYbp.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">年度销售额完成率</span>
+    </div>
+    <div class="gauge-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+
+const chartRef = ref(null)
+let chartInstance = null
+
+const initGaugeChart = () => {
+  const el = chartRef.value
+  if (!el) return
+
+  chartInstance = echarts.init(el)
+
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70', fontSize: 11 },
+      padding: [8, 12],
+      borderRadius: 6,
+      formatter: '完成率：{c}%<br/>目标：1500万元<br/>已完成：1275万元'
+    },
+    series: [
+      {
+        name: '完成率',
+        type: 'gauge',
+        startAngle: 180,
+        endAngle: 0,
+        min: 0,
+        max: 100,
+        splitNumber: 10,
+        radius: '80%',
+        center: ['50%', '70%'],
+        axisLine: {
+          lineStyle: {
+            width: 15,
+            color: [
+              [0.3, '#F56C6C'],
+              [0.7, '#E6A23C'],
+              [1, '#409EFF']
+            ]
+          }
+        },
+        splitLine: {
+          length: 15,
+          lineStyle: {
+            color: '#b4c7e7',
+            width: 2
+          }
+        },
+        axisTick: {
+          length: 8,
+          lineStyle: {
+            color: '#b4c7e7',
+            width: 1
+          }
+        },
+        axisLabel: {
+          color: '#e0e6ff',
+          fontSize: 10,
+          distance: 20
+        },
+        pointer: {
+          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
+          length: '85%',
+          width: 8,
+          color: '#fff',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 5
+        },
+        title: {
+          fontSize: 14,
+          color: '#e0e6ff',
+          offsetCenter: [0, '50%']
+        },
+        detail: {
+          fontSize: 16,
+          color: '#409EFF',
+          fontWeight: 600,
+          offsetCenter: [0, '20%'],
+          formatter: '{value}%'
+        },
+        data: [{ value: 85, name: '销售额完成率' }]
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+  window.addEventListener('resize', () => chartInstance.resize())
+}
+
+onMounted(() => initGaugeChart())
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+
+.gauge-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 0;
+  padding: 0;
+}
+
+:deep(.echarts-tooltip) {
+  background-color: rgba(145, 200, 255, 0.9) !important;
+  border-color: #409EFF !important;
+  color: #0a3b70 !important;
+  border-radius: 6px !important;
+}
+</style>