From 84ced2e300e2bac45fc39029a6a0313b8266ac5e Mon Sep 17 00:00:00 2001
From: zzyuan <781948537@qq.com>
Date: Mon, 19 May 2025 13:01:04 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=95=B0=E6=8D=AE=E7=9C=8B?=
 =?UTF-8?q?=E6=9D=BF=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                   |  81 ++++
 src/assets/images/down.png         | Bin 0 -> 378 bytes
 src/assets/images/up.png           | Bin 0 -> 424 bytes
 src/views/dashboard/PanelGroup.vue | 181 +++++++-
 src/views/index_v1.vue             | 677 ++++++++++++++++++++++++++++-
 5 files changed, 930 insertions(+), 9 deletions(-)
 create mode 100644 src/api/index.js
 create mode 100644 src/assets/images/down.png
 create mode 100644 src/assets/images/up.png

diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 00000000..b0c4b31c
--- /dev/null
+++ b/src/api/index.js
@@ -0,0 +1,81 @@
+import request from '@/utils/request'
+
+// 获取数据总览（今日营业额、订单等）
+export function getDataScreeningModelApi(data) {
+    return request({
+        url: '/smart-canteen/dataScreening/getDataScreeningModel',
+        method: 'post',
+        headers: {
+            "merchant-id":"378915229716713472",
+        },
+        data: data
+    })
+}
+
+// 获取食堂订单及销量趋势
+export function getCanteenOrdersAndSalesTrendsApi(data) {
+    return request({
+        url: '/smart-canteen/dataScreening/getCanteenOrdersAndSalesTrends',
+        method: 'post',
+        headers: {
+            "merchant-id":"378915229716713472",
+        },
+        data: data
+    })
+} 
+
+// 获取商超订单及销量趋势
+export function getSupermarketOrderAndSalesTrendApi(data) {
+    return request({
+        url: '/smart-canteen/dataScreening/getSupermarketOrderAndSalesTrend',
+        method: 'post',
+        headers: {
+            "merchant-id":"378915229716713472",
+        },
+        data: data
+    })
+} 
+
+// 获取近30天菜品销量排名
+export function getThisMonthSDishSalesRankingApi(data) {
+    return request({
+        url: '/smart-canteen/dataScreening/getThisMonthSDishSalesRanking',
+        method: 'post',
+        headers: {
+            "merchant-id":"378915229716713472",
+        },
+        data: data
+    })
+}
+
+// 订单类型占比 
+export function getProportionOfOrderTypesApi(data) {
+    return request({
+        url: '/smart-canteen/dataScreening/getProportionOfOrderTypes',
+        method: 'post',
+        headers: {
+            "merchant-id":"378915229716713472",
+        },
+        data: data
+    })
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/images/down.png b/src/assets/images/down.png
new file mode 100644
index 0000000000000000000000000000000000000000..58e8b05ca528cb86c2500ed9d00ec7fe4d0f52c4
GIT binary patch
literal 378
zcmV-=0fqjFP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$G)Y83R9HvtmQ4<VFc5{O#-EipFl-HLJ%9($GYKctTadUU9>En6szpkMTIgVF
zyMZlD=HtzKuP_Mwu)y<S0;m<pqQwp>zK-wDtM8StY%@Qw+3X?)ziE<fUZg%DIsjrY
z2T0?*NPIywD_ABB;4FvwglJQcMPVR1F$@9m)dOQ7Zqe#kR^`JcJ=!9oK;Sbrp6PAE
zAqe%IO?n2aSO?McMVlBL*I$${-UYg^l|w~wRRC;kgmLp40X|jTji@R)#WNBbH!lai
zCjqDsI;p7;s(Hx(0>TtK3WOB^<$f?h{2f5&8N4zt07DSo0Qw+sj|gQ(nULZE^^DFF
zvNyZ{^!14B5~m8(4F~Mhrxb2X=K#3jsH<|ig5Ut{@BP3ERAt1^uTu|DrN`$cfZz(e
Y0RH94m(I@jiU0rr07*qoM6N<$f{CD-ssI20

literal 0
HcmV?d00001

diff --git a/src/assets/images/up.png b/src/assets/images/up.png
new file mode 100644
index 0000000000000000000000000000000000000000..22af5635242631c5928a4112faf9af4cae5fd9de
GIT binary patch
literal 424
zcmV;Z0ayNsP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$Vo5|nR9HvtmOE|&F%Up!T+u`dD5pS6l^lQrgfexY&k53Gsd9qUfar1wI0WGs
zK#?+GqFJ#UW4!iYmbHYSL$c?+`FOMlk$)JO4_ARoE6^F=-T%_ICvEF;uu3ZvNJh6^
zLN$}Z`5X}pFGqkga<xDyXcNJcUZF}W;3|DGX?>dT%3Dw-V8XMk5#DMMu)!Hzi+~Nz
z&#pacrDqp7fFq>K=hcw2Kf8bnezHI^X+FZ1z88bd+%|MR_(=kK=@96B(O<vn5@kI%
zMT1(PU-}P7A7B0T3;&nGv$NXDR-hidtJn_TX&_Azu%Ry*e&;;xuEoR~lj!G$Tj>-q
z;T&9l$0kGqH}8}R*x-3)wyK1{vt(?ga>4WS<}mrnUe=NW0SP=0=6jZsZ-YI7W8jkD
zk~4)s40tgEvEZ42`7IYZ&60B4&g==)4KG@tZ>G>pLhpH3acE%ay{ka<3j6_pYy~ZG
SL|-%j0000<MNUMnLSTY;>$s8t

literal 0
HcmV?d00001

diff --git a/src/views/dashboard/PanelGroup.vue b/src/views/dashboard/PanelGroup.vue
index 77305495..73aefe0e 100644
--- a/src/views/dashboard/PanelGroup.vue
+++ b/src/views/dashboard/PanelGroup.vue
@@ -1,16 +1,179 @@
 <template>
   <el-row :gutter="36" class="panel-group">
-    <el-col :span="4" class="card-panel-col">
+    <el-col :span="4" class="card-panel-col" v-for="(item,index) in topData" :key="index">
       <div class="card-panel"> 
         <div class="card-panel-description">
           <div class="card-panel-text">
-            今日食堂营业额（元）
+            {{item.name}}
+          </div>
+          <count-to :start-val="0" :end-val="item.num" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)>=0">
+            <div style="font-size: 12px;color: #07B78A;">
+              同比上次  +{{item.rate}}％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)<0">
+            <div style="font-size: 12px;color: #d81e06;">
+              同比上次  {{item.rate}}％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
           </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
         </div>
         
       </div>
     </el-col>
+    <!-- <el-col :span="4" class="card-panel-col">
+      <div class="card-panel"> 
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            今日食堂订单量（个）
+          </div>
+          <count-to :start-val="0" :end-val="360" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #07B78A;">
+              同比昨日  +1.6％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #d81e06;">
+              同比昨日  -05％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </el-col>
+    <el-col :span="4" class="card-panel-col">
+      <div class="card-panel"> 
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            今日就餐人数（人）
+          </div>
+          <count-to :start-val="0" :end-val="211" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #07B78A;">
+              同比昨日  +1.6％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #d81e06;">
+              同比昨日  -05％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </el-col>
+    <el-col :span="4" class="card-panel-col">
+      <div class="card-panel"> 
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            今日菜品数量（个）
+          </div>
+          <count-to :start-val="0" :end-val="14" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #07B78A;">
+              同比昨日  +1.6％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #d81e06;">
+              同比昨日  -05％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </el-col>
+    <el-col :span="4" class="card-panel-col">
+      <div class="card-panel"> 
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            今日商超营业额（元）
+          </div>
+          <count-to :start-val="0" :end-val="5200" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #07B78A;">
+              同比昨日  +1.6％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #d81e06;">
+              同比昨日  -05％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </el-col>
+    <el-col :span="4" class="card-panel-col">
+      <div class="card-panel"> 
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            今日商超订单
+          </div>
+          <count-to :start-val="0" :end-val="435" :duration="2000" class="card-panel-num" />
+        </div>
+        <div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #07B78A;">
+              同比昨日  +1.6％
+            </div>
+            <div>
+              <img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+          <div style="display: flex;justify-content: space-between;width: 70%;">
+            <div style="font-size: 12px;color: #d81e06;">
+              同比昨日  -05％
+            </div>
+            <div>
+              <img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </el-col> -->
      
   </el-row>
 </template>
@@ -22,6 +185,12 @@ export default {
   components: {
     CountTo
   },
+  props: {
+    topData: {
+      type: Array,
+      default: []
+    }
+  },
   methods: {
     
   }
@@ -42,7 +211,7 @@ export default {
 
   .card-panel {
     height: 140px;
-    cursor: pointer;
+    // cursor: pointer;
     font-size: 12px;
     position: relative;
     overflow: hidden;
@@ -65,10 +234,12 @@ export default {
       font-weight: bold;
       margin: 0px;
       margin-left: 0px;
+      margin-bottom: 10px;
 
       .card-panel-text {
         line-height: 18px;
-        color: rgba(0, 0, 0, 0.5);
+        // color: rgba(0, 0, 0, 0.5);
+        font-weight: normal;
         font-size: 16px;
         margin-bottom: 15px;
       }
diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue
index dc7b6c01..27146a1e 100644
--- a/src/views/index_v1.vue
+++ b/src/views/index_v1.vue
@@ -1,12 +1,36 @@
 <template>
   <div class="dashboard-editor-container">
     <h3 style="font-weight: 600;">数据总览</h3>
-    <panel-group/>
+    <panel-group :topData="topAreaOptions"/>
+    <el-row>
+      <el-col :span="16">
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
+          <div>食堂订单及销量趋势</div>
+          <div id="lineChartOne" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>  
+        </div>
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
+          <div>商超订单及销量趋势</div>
+          <div id="lineChartTwo" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>  
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
+          <div>本月菜品销量排名</div>
+          <div id="lineChartThree" style="width: 100%;height: 380px;margin-bottom: 20px;"></div>  
+        </div>
+        <div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
+          <div>订单类型占比</div>
+          <div id="barChartFour" style="width: 100%;height: 220px;margin-bottom: 20px;"></div>  
+        </div>
 
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
+
+
+      </el-col>
     </el-row>
 
+    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData" />
+    </el-row> 
     <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper">
@@ -23,7 +47,7 @@
           <bar-chart />
         </div>
       </el-col>
-    </el-row>
+    </el-row> -->
 
 
   </div>
@@ -31,6 +55,18 @@
 
 <script>
 import PanelGroup from './dashboard/PanelGroup'
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './dashboard/mixins/resize'
+import {  getDataScreeningModelApi,
+          getCanteenOrdersAndSalesTrendsApi,
+          getSupermarketOrderAndSalesTrendApi,
+          getThisMonthSDishSalesRankingApi,
+          getProportionOfOrderTypesApi 
+        } from "@/api/index";
+
+
+
 import LineChart from './dashboard/LineChart'
 import RaddarChart from './dashboard/RaddarChart'
 import PieChart from './dashboard/PieChart'
@@ -56,6 +92,7 @@ const lineChartData = {
 }
 
 export default {
+  mixins: [resize],
   name: 'Index',
   components: {
     PanelGroup,
@@ -66,10 +103,642 @@ export default {
   },
   data() {
     return {
+      topAreaOptions:[
+        {
+          "num": 27,
+          "rate": "92.86",
+          "name": "今日食堂营业额（元）",
+          "lastDate": "2025-05-15"
+        },{
+          "num": 3,
+          "rate": "50.00",
+          "name": "今日食堂订单量（个）",
+          "lastDate": "2025-05-15"
+        },
+        {
+          "num": 1,
+          "rate": "0.00",
+          "name": "今日就餐人数（个）",
+          "lastDate": "2025-05-15"
+        },
+        {
+          "num": 6,
+          "rate": "0.00",
+          "name": "今日菜品数量（个）",
+          "lastDate": "2025-05-15"
+        },
+        {
+          "num": 0,
+          "rate": "0.0",
+          "name": "今日超市营业额（元）",
+          "lastDate": "2025-05-15"
+        },
+        {
+          "num": 0,
+          "rate": "0.0",
+          "name": "今日超市订单量（个）",
+          "lastDate": "2025-05-15"
+        }
+      ],
       lineChartData: lineChartData.newVisitis
     }
   },
+  mounted(){
+    this.getTopData()
+    this.InitEChartsOne()
+    this.InitEChartsTwo()
+    this.InitEChartsThree()
+    this.InitEChartsFour()
+  },
   methods: {
+    getTopData(){ 
+      getDataScreeningModelApi({}).then((response) => {
+          this.topAreaOptions = response.data.data; 
+      }); 
+    },
+    InitEChartsOne() {
+      let chartData=[]
+      let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
+      let monthDate = []
+      let salesData = []
+      let orderData = []
+      getCanteenOrdersAndSalesTrendsApi({type:"1"}).then((response) => {
+          chartData = response.data;
+          chartData.forEach((item,index)=>{
+            monthDate.push(item.orderDate)
+            salesData.push(item.salesValue)
+            orderData.push(item.orderValue) 
+          })  
+          var option = {
+            // title: {
+            //   text: "食品经营情况", 
+            // },
+            tooltip: {
+              trigger: "axis",
+            },
+            legend: {
+              data: ["销售额", "订单量"],
+              bottom: "0%",
+            },
+            grid: {
+              left: "5%",
+              right: "5%",
+              top: "20%",
+              bottom: "10%",
+              containLabel: true,
+            },
+            color: ["#4FA7FF", "#58F5CE"], 
+            calculable: true,
+            xAxis: [
+              {
+                type: "category",
+                boundaryGap: false,
+                data: weekDate,
+              },
+            ],
+            yAxis: {
+              name: "销售额/订单量",
+              type: "value",
+            },
+            series: [
+              {
+                name: "销售额",
+                type: "line",
+                areaStyle: {
+                  normal: {
+                    type: "default",
+                    color: new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(79, 167, 255, 1)",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(79, 167, 255, 1)",
+                        },
+                      ],
+                      false
+                    ),
+                  },
+                },
+                smooth: true,
+                itemStyle: {
+                  normal: { areaStyle: { type: "default" } },
+                },
+                data: salesData,
+              },
+              {
+                name: "订单量",
+                type: "line",
+                areaStyle: {
+                  normal: {
+                    type: "default",
+                    color: new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(92, 255, 214, 1)",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(92, 255, 214, 1)",
+                        },
+                      ],
+                      false
+                    ),
+                  },
+                },
+                smooth: true,
+                itemStyle: { normal: { areaStyle: { type: "default" } } },
+                data: orderData,
+              },
+            ],
+          };
+          let myCharts = echarts.init(document.querySelector('#lineChartOne'));
+          myCharts.setOption(option)  
+          // 根据页面大小自动响应图表大小
+          window.addEventListener("resize", function () {
+              myCharts.resize(); 
+          });
+      }); 
+    },
+    InitEChartsTwo() {
+      let chartData=[]
+      let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
+      let monthDate = []
+      let salesData = []
+      let orderData = []
+      getSupermarketOrderAndSalesTrendApi({type:"1"}).then((response) => {
+          chartData = response.data;
+          chartData.forEach((item,index)=>{
+            monthDate.push(item.orderDate)
+            salesData.push(item.salesValue)
+            orderData.push(item.orderValue) 
+          })  
+          var option = {
+            // title: {
+            //   text: "食品经营情况", 
+            // },
+            tooltip: {
+              trigger: "axis",
+            },
+            legend: {
+              data: ["销售额", "订单量"],
+              bottom: "0%",
+            },
+            grid: {
+              left: "5%",
+              right: "5%",
+              top: "20%",
+              bottom: "10%",
+              containLabel: true,
+            },
+            color: ["#4FA7FF", "#58F5CE"], 
+            calculable: true,
+            xAxis: [
+              {
+                type: "category",
+                boundaryGap: false,
+                data: weekDate,
+              },
+            ],
+            yAxis: {
+              name: "销售额/订单量",
+              type: "value",
+            },
+            series: [
+              {
+                name: "销售额",
+                type: "line",
+                areaStyle: {
+                  normal: {
+                    type: "default",
+                    color: new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(79, 167, 255, 1)",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(79, 167, 255, 1)",
+                        },
+                      ],
+                      false
+                    ),
+                  },
+                },
+                smooth: true,
+                itemStyle: {
+                  normal: { areaStyle: { type: "default" } },
+                },
+                data: salesData,
+              },
+              {
+                name: "订单量",
+                type: "line",
+                areaStyle: {
+                  normal: {
+                    type: "default",
+                    color: new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(92, 255, 214, 1)",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(92, 255, 214, 1)",
+                        },
+                      ],
+                      false
+                    ),
+                  },
+                },
+                smooth: true,
+                itemStyle: { normal: { areaStyle: { type: "default" } } },
+                data: orderData,
+              },
+            ],
+          };
+          let myCharts = echarts.init(document.querySelector('#lineChartTwo'));
+          myCharts.setOption(option) 
+
+          // 根据页面大小自动响应图表大小
+          window.addEventListener("resize", function () {
+              myCharts.resize(); 
+          });
+      }); 
+    },
+    InitEChartsThree() { 
+      var getName = [];
+      var getValue = [];
+      var chartData=[]
+      getThisMonthSDishSalesRankingApi({type:"2"}).then((response) => {
+          chartData = response.data;
+          chartData.forEach((item,index)=>{
+            getName.push(item.name)
+            getValue.push(item.num) 
+          })  
+          var max = Math.max.apply(null, getValue);
+          var getMax = [];
+          for (var i = 0; i < getName.length; i++) {
+            getMax.push(max+20);
+          } 
+          var option = {
+            backgroundColor: "#fff",
+            grid: {
+              left: "4%",
+              right: "2%",
+              bottom: "2%",
+              top: "2%",
+              containLabel: true,
+            },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                type: "none",
+              },
+              formatter: function (params) {
+                return params[0].name + " : " + params[0].value;
+              },
+            },
+            xAxis: {
+              show: false,
+              type: "value",
+            },
+            yAxis: [
+              {
+                type: "category",
+                inverse: true,
+                offset: 100,
+
+                axisLabel: {
+                  show: true,
+                  align: "left",
+                  textStyle: {
+                    color: "#66cc00",
+                  },
+                  formatter: function (value, index) {
+                    var num = "";
+                    var str = "";
+                    var no = "NO.";
+                    num = index + 1;
+                    if (index === 0) {
+                      str = " {num1|" + num + "} {title1|" + value + "}";
+                    } else if (index === 1) {
+                      str = " {num2|" + num + "} {title2|" + value + "}";
+                    } else if (index === 2) {
+                      str = " {num3|" + num + "} {title3|" + value + "}";
+                    } else {
+                      str = " {num|" + num + "} {title|" + value + "}";
+                    }
+                    return str;
+                  },
+                  rich: {
+                    no: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    no1: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    no2: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    no3: {
+                      color: "#333",
+                      fontSize: 14,
+                    },
+                    num: {
+                      color: "#fff",
+                      backgroundColor: "#5281F8",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    num1: {
+                      color: "#fff",
+                      backgroundColor: "#EDA54F",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    num2: {
+                      color: "#fff",
+                      backgroundColor: "#EDA54F",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    num3: {
+                      color: "#fff",
+                      backgroundColor: "#EDA54F",
+                      width: 20,
+                      height: 20,
+                      fontSize: 14,
+                      align: "center",
+                      borderRadius: 100,
+                    },
+                    title: {
+                      color: "#333333",
+                    },
+                    title1: {
+                      color: "#333333",
+                    },
+                    title2: {
+                      color: "#333333",
+                    },
+                    title3: {
+                      color: "#333333",
+                    },
+                  },
+                },
+                splitLine: {
+                  show: false,
+                },
+                axisTick: {
+                  show: false,
+                },
+                axisLine: {
+                  show: false,
+                },
+                data: getName,
+              },
+              {
+                type: "category",
+                inverse: true,
+                offset: -50,
+                axisTick: "none",
+                axisLine: "none",
+                show: true,
+                axisLabel: {
+                  interval: 0,
+                  color: "#666",
+                  align: "left",
+                  margin: 20,
+                  fontSize: 13,
+                  formatter: function (value, index) {
+                    return (
+                      getValue[index]
+                    );
+                  },
+                },
+                data: getValue,
+              },
+            ],
+            series: [
+              {
+                name: "值",
+                type: "bar",
+                zlevel: 1,
+                itemStyle: {
+                  normal: {
+                    barBorderRadius: 30,
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0,
+                        color: "rgb(0, 111, 104, 1)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgb(0, 111, 104, 1)",
+                      },
+                    ]),
+                  },
+                },
+                barWidth: 14,
+                data: getValue,
+              },
+              {
+                name: "背景",
+                type: "bar",
+                barWidth: 14,
+                barGap: "-100%",
+                data: getMax,
+                itemStyle: {
+                  normal: {
+                    color: "rgba(224, 233, 255, 1)",
+                    barBorderRadius: 30,
+                  },
+                },
+              },
+            ],
+          }; 
+          let myCharts = echarts.init(document.querySelector('#lineChartThree'));
+          myCharts.setOption(option)  
+          // 根据页面大小自动响应图表大小
+          window.addEventListener("resize", function () {
+              myCharts.resize();
+          });
+      }); 
+    },
+    InitEChartsFour() {
+      var chartData=[]
+      getProportionOfOrderTypesApi({type:"2"}).then((response) => {
+          chartData = response.data;
+          var m2R2Data = []
+          var sumNum = 0
+          chartData.forEach((item,index)=>{
+            let obj = {}
+            sumNum=sumNum+item.num
+            if(index==0){
+              obj = {
+                value: item.num,
+                legendname: item.name,
+                name: item.name+' '+  item.num,
+                itemStyle: { color: "#5085f2" },
+              }
+            }
+            if(index==1){
+              obj = {
+                value: item.num,
+                legendname: item.name,
+                name: item.name+' '+  item.num,
+                itemStyle: { color: "#f2719a" },
+              }
+            }
+            if(index==2){
+              obj = {
+                value: item.num,
+                legendname: item.name,
+                name: item.name+' '+  item.num,
+                itemStyle: { color: "#fdb301" },
+              }
+            }
+            m2R2Data.push(obj)
+          }) 
+
+          // var m2R2Data = [
+          //   {
+          //     value: 310,
+          //     legendname: "种类02",
+          //     name: "种类02  310",
+          //     itemStyle: { color: "#5085f2" },
+          //   }, 
+          //   {
+          //     value: 335,
+          //     legendname: "种类05",
+          //     name: "种类05  335",
+          //     itemStyle: { color: "#f2719a" },
+          //   }, 
+          //   {
+          //     value: 335,
+          //     legendname: "种类08",
+          //     name: "种类08  335",
+          //     itemStyle: { color: "#fdb301" },
+          //   }
+          // ];
+
+          var option = {
+            title: [
+              {
+                text: "订单总数",
+                subtext: sumNum + "个",
+                textStyle: {
+                  fontSize: 20,
+                  color: "black",
+                },
+                subtextStyle: {
+                  fontSize: 20,
+                  color: "black",
+                },
+                textAlign: "center",
+                x: "34.5%",
+                y: "44%",
+              },
+            ],
+            tooltip: {
+              trigger: "item",
+              formatter: function (parms) {
+                var str =
+                  parms.seriesName +
+                  "</br>" +
+                  parms.marker +
+                  "" +
+                  parms.data.legendname +
+                  "</br>" +
+                  "数量：" +
+                  parms.data.value +
+                  "</br>" +
+                  "占比：" +
+                  parms.percent +
+                  "%";
+                return str;
+              },
+            },
+            legend: {
+              type: "scroll",
+              orient: "vertical",
+              left: "70%",
+              align: "left",
+              top: "middle",
+              textStyle: {
+                color: "#8C8C8C",
+              },
+              height: 250,
+            },
+            series: [
+              {
+                name: "标题",
+                type: "pie",
+                center: ["35%", "50%"],
+                radius: ["65%", "90%"],
+                clockwise: false, //饼图的扇区是否是顺时针排布
+                avoidLabelOverlap: false,
+                label: {
+                  normal: {
+                    show: false,
+                    position: "outter",
+                    formatter: function (parms) {
+                      return parms.data.legendname;
+                    },
+                  },
+                },
+                labelLine: {
+                  normal: {
+                    length: 5,
+                    length2: 3,
+                    smooth: true,
+                  },
+                },
+                data: m2R2Data,
+              },
+            ],
+          }; 
+          let myCharts = echarts.init(document.querySelector('#barChartFour'));
+          myCharts.setOption(option)  
+          // 根据页面大小自动响应图表大小
+          window.addEventListener("resize", function () {
+              myCharts.resize();
+          });
+      });
+    },
     handleSetLineChartData(type) {
       this.lineChartData = lineChartData[type]
     }