主诉分类

src/components/body-d-right/twoR.vue

@@ -1,16 +1,80 @@
 <template>
     <div>
-        <public-title title="健康状况/慢病"/>
-        <div class="inner"></div>
+        <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";
+
+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: 32,
+      },
+    },
+    color:['#0098FA','#0CD9B5','#3B72AD'],
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      bottom: '0',
+      left: 'center',
+      icon: 'circle',
+      textStyle:{
+        color:'#ffffff',
+        fontSize:18,
+      },
+    },
+    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)
+}
 </script>
 <style scoped lang="less">
 .inner {
+    width: 90%;
+    margin: 0 auto;
     height: calc(100% - 40px);
-
 }
 </style>