主诉分类

src/components/body-d-left/twoL.vue

@@ -8,12 +8,15 @@
             </div>
             <div>全部数据</div>
           </div>
+          <div class="line-chart" ref="chiefChart"></div>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref,onMounted } from 'vue';
 import PublicTitle from "../publicTitle.vue";
+import * as echarts from 'echarts';
+
 const typeTime = ref([
   {
     name:'男',
@@ -24,10 +27,70 @@ const typeTime = ref([
   },
 ])
 const selectIndex = ref(0)
+const chiefChart = 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(chiefChart.value)
+  let options = {
+    grid:{
+      top: '10%',
+      left:'8%',
+      right:'8%',
+      bottom: '14%'
+    },
+    xAxis: {
+      type: 'category',
+      data: xData,
+      axisLabel: {
+        color: '#FFFFFF',
+        fontSize:16,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        color: '#FFFFFF',
+        fontSize:16,
+      },
+      splitLine: {
+        show: true,
+        lineStyle:{
+          type:'dashed',
+          color:'rgba(217, 231, 255, 0.2)'
+        }
+      }
+    },
+    series: [
+      {
+        data:ydata ,
+        type: 'bar',
+        barWidth: '20%',
+        itemStyle:{
+          color:new echarts.graphic.LinearGradient(
+              0, 0, 0, 1,
+              [
+                { offset: 0, color: '#008CFF' },
+                { offset: 1, color: '#33CBFE' }
+              ]
+          )
+        }
+      }
+    ]
+  }
+  myChart.setOption(options)
+}
 </script>
 <style scoped lang="less">
 .inner {
     height: calc(100% - 40px);
-
+    .line-chart{
+      margin: 0 auto;
+      width: 96%;
+      height: 80%;
+    }
 }
 </style>