近30天各小组任务类型修改为当日任务类型TOP5

src/components/BusinessTypeRatio.vue

@@ -12,240 +12,173 @@ export default {
     return {
       timer: null,
       myChart: null,
-      associationTypeProportion: [],
       associationTypeProportionNum: [],
-      associationTypeProportionName: [],
-      associationTypeProportionAll: []
+      associationTypeProportionName: []
     }
   },
   methods: {
     // 画图
     draw () {
-      const that = this
       this.myChart = echarts.init(this.$refs.BusinessTypeRatio)
+      var colorArray = [
+        {
+          top: '#c2ab70', // 第一
+          bottom: 'rgba(194, 171, 112, 0.5)',
+          borderColor: '#c2ab70'
+        },
+        {
+          top: '#70c282', // 第二
+          bottom: 'rgba(112, 194, 130, 0.5)'
+        },
+        {
+          top: '#709cc2', // 第三
+          bottom: 'rgba(112, 156, 194, 0.5)'
+        },
+        {
+          top: '#709cc2', // 第四
+          bottom: 'rgba(112, 156, 194, 0.5)'
+        },
+        {
+          top: '#709cc2', // 第五
+          bottom: 'rgba(112, 156, 194, 0.5)'
+        }
+      ]
       const option = {
         tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
+          show: false,
+          formatter: '{b}:{c}'
         },
         grid: {
-          show: false,
-          top: '5%',
           left: '5%',
+          top: '5%',
           right: '5%',
-          bottom: '0%'
+          bottom: '0%',
+          containLabel: true
         },
-        // legend: {
-        //   left: '20%',
-        //   orient: 'horizontal',
-        //   itemWidth: 8,
-        //   itemHeight: 8,
-        //   icon: 'rect',
-        //   bottom: '0%',
-        //   data: this.associationTypeProportionName,
-        //   textStyle: {
-        //     color: '#fff'
-        //   },
-        //   formatter (name) {
-        //     const arr = that.associationTypeProportionAll.filter(item => item[0] === name)
-        //     return `${name} ${arr[0][1]}单 ${arr[0][2]}%`
-        //   }
-        // },
-        legend: [
-          {
-            right: '55%',
-            orient: 'horizontal',
-            itemWidth: 8,
-            itemHeight: 8,
-            icon: 'rect',
-            bottom: '20%',
-            data: this.associationTypeProportionName.slice(
-              0,
-              Math.ceil(this.associationTypeProportionName.length / 2)
-            ),
-            textStyle: {
-              color: '#fff'
-            },
-            formatter (name) {
-              const arr = that.associationTypeProportionAll.filter(
-                (item) => item[0] === name
-              )
-              return `${name} ${arr[0][1]}单 ${arr[0][2]}%`
-            }
+        xAxis: {
+          type: 'value',
+          show: false,
+          position: 'top',
+          max: function (value) {
+            return value.max * 1.5
           },
-          {
-            left: '55%',
-            orient: 'horizontal',
-            itemWidth: 8,
-            itemHeight: 8,
-            icon: 'rect',
-            bottom: '24%',
-            data: this.associationTypeProportionName.slice(
-              Math.ceil(this.associationTypeProportionName.length / 2),
-              this.associationTypeProportionName.length
-            ),
-            textStyle: {
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
               color: '#fff'
-            },
-            formatter (name) {
-              const arr = that.associationTypeProportionAll.filter(
-                (item) => item[0] === name
-              )
-              return `${name} ${arr[0][1]}单 ${arr[0][2]}%`
             }
-          }
-        ],
-        color: [
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#c27073' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(194, 112, 115, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          },
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#c2ab70' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(194, 171, 112, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          },
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#70c2ab' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(112, 194, 171, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          },
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#70c282' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(112, 194, 130, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          },
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#9cc270' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(156, 194, 112, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          },
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#709cc2' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(112, 156, 194, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
           },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: [
           {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#c270b0' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(194, 112, 176, 0.5)' // 100% 处的颜色
+            type: 'category',
+            axisTick: {
+              show: false,
+              alignWithLabel: false,
+              length: 5
+            },
+            splitLine: {
+              // 网格线
+              show: false
+            },
+            inverse: 'true', // 排序
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
               }
-            ],
-            global: false // 缺省为 false
+            },
+            data: this.associationTypeProportionName
           }
         ],
         series: [
           {
-            name: '数据统计',
-            type: 'pie',
-            center: ['50%', '35%'],
-            roseType: 'radius',
+            name: 'xxx',
+            type: 'bar',
             label: {
               normal: {
-                show: false
-              },
-              emphasis: {
-                show: false
+                show: true,
+                position: [365, 0],
+                formatter: '{c}',
+                textStyle: {
+                  color: '#fff'
+                }
               }
             },
-            lableLine: {
+            itemStyle: {
               normal: {
-                show: false
-              },
-              emphasis: {
-                show: true
+                show: true,
+                color: function (params) {
+                  const num = colorArray.length
+                  return {
+                    type: 'linear',
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      },
+                      {
+                        offset: 0,
+                        color: colorArray[params.dataIndex % num].bottom
+                      },
+                      {
+                        offset: 1,
+                        color: colorArray[params.dataIndex % num].top
+                      }
+                    ]
+                  }
+                },
+                barBorderRadius: 70,
+                borderWidth: 0,
+                borderColor: '#333'
               }
             },
-            data: this.associationTypeProportion
+            barGap: '0%',
+            barCategoryGap: '70%',
+            barWidth: 8,
+            data: this.associationTypeProportionNum
           }
         ]
       }
@@ -253,22 +186,17 @@ export default {
     },
     // 获取数据
     async getData () {
-      const srartTime = this.$moment()
-        .subtract(29, 'days')
-        .format('YYYY-MM-DD') // 近三十天
+      const srartTime = this.$moment().format('YYYY-MM-DD') // 今天
       const endTime = this.$moment().format('YYYY-MM-DD') // 今天
       const result = await post(
-        `/largeScreen/getData/associationTypeProportion/${this.hospitalId}`,
+        `/largeScreen/getData/getTasktypeTop5/${this.hospitalId}`,
         { srartTime, endTime }
       )
       this.associationTypeProportionNum = []
       this.associationTypeProportionName = []
-      this.associationTypeProportion = []
-      this.associationTypeProportionAll = result.associationTypeProportion
-      result.associationTypeProportion.forEach((item) => {
+      result.list.forEach((item) => {
         this.associationTypeProportionNum.push(item[1]) // 获取到的数据
         this.associationTypeProportionName.push(item[0]) // 获取到的名称
-        this.associationTypeProportion.push({ value: item[1], name: item[0] }) // 获取到的名称
       })
       this.draw()
       this.polling()
@@ -292,7 +220,7 @@ export default {
 
 <style lang="less">
 .business-type-ratio {
-  height: 7rem;
+  height: 5rem;
   margin: 0 auto;
 }
 </style>

src/views/AppIndex.vue

@@ -79,9 +79,9 @@
               <h2 class="app-item__header">近三十天人员按时到达率排行榜</h2>
               <OnTimeArrivalRate></OnTimeArrivalRate>
             </div>
-            <!-- 近三十天各业务类型占比 -->
+            <!-- 当日任务类型TOP5 -->
             <div class="app-item">
-              <h2 class="app-item__header">近三十天各业务类型占比</h2>
+              <h2 class="app-item__header">当日任务类型TOP5</h2>
               <BusinessTypeRatio></BusinessTypeRatio>
             </div>
           </aside>
@@ -112,7 +112,7 @@ export default {
     OnDutyToday, // 今日当班情况
     TodayWorkOrder, // 当日工单趋势图
     PointsRanking, // 今日积分前三人员
-    BusinessTypeRatio, // 近三十天各业务类型占比
+    BusinessTypeRatio, // 当日任务类型TOP5
     ErrorWorkOrder, // 今日工单异常情况
     DeliveryRate, // 近三十天各类型工单按时送达率趋势
     TimeUtilization, // 近三十天各小组人员工作时间利用率