接口

2023-12-01 18:21:40 +08:00
parent 9ab26f4915
commit 2319af2203
13 changed files with 931 additions and 867 deletions
@@ -1,83 +1,83 @@
 <template>
    <div>
-        <public-title title="长庆油田大病人数"/>
+        <public-title title="长庆油田大病人数" />
        <div class="inner" ref="healthChart"></div>
    </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import * as echarts from 'echarts';
-import PublicTitle from "../publicTitle.vue";
+    import { ref, onMounted } from 'vue';
+    import * as echarts from 'echarts';
+    import PublicTitle from '../publicTitle.vue';

-const healthChart = ref<HTMLElement>()
-onMounted(()=>{
-  let xdata = ['创伤类', '心血管', '心神类', '呼吸类' , '消化类', '肿瘤类', '其他'];
-  let ydata = [120, 200, 150, 80, 70, 110, 130];
-  initChart(xdata,ydata)
-})
-function initChart(xData,ydata){
-  let myChart = echarts.init(healthChart.value)
-  let options = {
-    title:{
-      text:'总人数\n',
-      subtext: '1980',
-      x: 'center',
-      y: 'center',
-      textStyle: {
-        fontSize:18,
-        color: '#ffffff',
-      },
-      subtextStyle: {
-        color: '#ffffff',
-        fontSize: 28,
-      },
-    },
-    color:['#0098FA','#0CD9B5','#3B72AD'],
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      bottom: '0',
-      left: 'center',
-      icon: 'circle',
-      textStyle:{
-        color:'#ffffff',
-        fontSize:16,
-      },
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: ['50%', '80%'],
-        avoidLabelOverlap: false,
-        label: {
-          show: true,
-          position: 'inner',
-          formatter: '{d}%',
-          color:'#ffffff',
-          fontSize:16
-        },
-        labelLine: {
-          show: false
-        },
-        data: [
-          { value: 1048, name: '高危人数' },
-          { value: 735, name: '中危人数' },
-          { value: 580, name: '可控人数' },
-        ]
-      }
-    ]
-  }
-  myChart.setOption(options)
-  window.addEventListener('resize', () => {
-    myChart.resize();
-  });
-}
+    const healthChart = ref<HTMLElement>();
+    onMounted(() => {
+        let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
+        let ydata = [120, 200, 150, 80, 70, 110, 130];
+        initChart(xdata, ydata);
+    });
+    function initChart(xData, ydata) {
+        let myChart = echarts.init(healthChart.value);
+        let options = {
+            title: {
+                text: '总人数\n',
+                subtext: '1980',
+                x: 'center',
+                y: 'center',
+                textStyle: {
+                    fontSize: 18,
+                    color: '#ffffff',
+                },
+                subtextStyle: {
+                    color: '#ffffff',
+                    fontSize: 28,
+                },
+            },
+            color: ['#0098FA', '#0CD9B5', '#3B72AD'],
+            tooltip: {
+                trigger: 'item',
+            },
+            legend: {
+                bottom: '0',
+                left: 'center',
+                icon: 'circle',
+                textStyle: {
+                    color: '#ffffff',
+                    fontSize: 16,
+                },
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['50%', '80%'],
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: true,
+                        position: 'inner',
+                        formatter: '{d}%',
+                        color: '#ffffff',
+                        fontSize: 16,
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    data: [
+                        { value: 1048, name: '高危人数' },
+                        { value: 735, name: '中危人数' },
+                        { value: 580, name: '可控人数' },
+                    ],
+                },
+            ],
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
 </script>
 <style scoped lang="less">
-.inner {
-    width: 90%;
-    margin: 0 auto;
-    height: calc(100% - 40px);
-}
-</style>
+    .inner {
+        width: 90%;
+        margin: 0 auto;
+        height: calc(100% - 40px);
+    }
+</style>