副屏

src/components/item-d/item-d.vue

@@ -1,15 +1,21 @@
 <template>
     <div>
-        <public-title :title="props.title" />
+        <public-title :title="props.title">
+            <template #title>
+                {{ props.tips }}
+            </template>
+        </public-title>
         <div class="inner" ref="healthChart"></div>
     </div>
 </template>
 <script setup lang="ts">
     import PublicTitle from '/@/components/publicTitle.vue';
     import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
-    import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
+    import { useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
+    import { screenPie } from '/@/components/item-d/pieCharts.ts';
     import { onMounted, ref, unref, watch } from 'vue';
     import * as echarts from 'echarts';
+
     const props = defineProps({
         title: {
             type: String,
@@ -19,6 +25,14 @@
             type: Array,
             default: () => [],
         },
+        color: {
+            type: Array,
+            default: () => [],
+        },
+        tips: {
+            type: String,
+            default: () => '',
+        },
     });
     const healthChart = ref<HTMLElement>();
 
@@ -38,15 +52,15 @@
     const { healthData, getValue, setHealth } = useHealth();
 
     async function init() {
-        setHealth(props.data);
-        const yData = unref(getValue);
-        let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-        initChart(unref(healthData), total);
+        // setHealth(props.data);
+        // const yData = unref(getValue);
+        // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+        initChart(props.data, 78, props.color);
     }
 
-    function initChart(chartData, total) {
+    function initChart(chartData, total, color) {
         let myChart = echarts.init(healthChart.value);
-        let options = ringOption(chartData, total);
+        let options = screenPie(chartData, total, color);
         myChart.setOption(options);
         window.addEventListener('resize', () => {
             myChart.resize();

src/components/item-d/pieCharts.ts

@@ -0,0 +1,59 @@
+export function screenPie(chartData, total, color) {
+    return {
+        title: {
+            text: '总人数',
+            subtext: total + '',
+            x: 'center',
+            y: '35%',
+            textStyle: {
+                fontSize: 14,
+                color: '#ffffff',
+                fontWeight: 'normal',
+            },
+            subtextStyle: {
+                color: '#ffffff',
+                fontSize: 24,
+                fontWeight: 'bold',
+            },
+        },
+        color: color,
+        tooltip: {
+            trigger: 'item',
+            show: true,
+            textStyle: {
+                color: '#fff',
+            },
+            backgroundColor: 'rgba(50,50,50,0.7)',
+            borderColor: '#1b7ef2',
+        },
+        legend: {
+            left: '80%',
+            top: 'center',
+            orient: 'vertical',
+            icon: 'circle',
+            itemGap: 26,
+            textStyle: {
+                color: '#ffffff',
+                fontSize: 16,
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['50%', '90%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: true,
+                    position: 'inner',
+                    formatter: '{d}%',
+                    color: '#ffffff',
+                    fontSize: 14,
+                },
+                labelLine: {
+                    show: false,
+                },
+                data: chartData,
+            },
+        ],
+    };
+}