no message

src/views/bigViews/dataView1/components/orderAmountTrend.vue

@@ -1,18 +1,14 @@
 <template>
   <moduleEnclosure title="近30日订单金额趋势">
     <div class="dvScrollBoardView">
-      
+      <div id="orderEcharts2" style="width: 100%; height: 100%"></div>
     </div>
   </moduleEnclosure>
 </template>
 
 <script>
+import * as echarts from 'echarts';
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
-import img0 from '@/assets/xia.png';
-import img1 from '@/assets/shang.png';
-import img2 from '@/assets/y1.png';
-import img3 from '@/assets/y2.png';
-import img4 from '@/assets/y3.png';
 import { getQuery13, getQuery14 } from '@/api/bigView.js';
 var timeling = 5000;
 export default {
@@ -25,13 +21,108 @@ export default {
     };
   },
   mounted() {
-    
+    this.initEcharts();
   },
   beforeUnmount() {
     
   },
   methods: {
-    
+    initEcharts() {
+      var chartDom = document.getElementById('orderEcharts2');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: ''
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['新增销售金额', '新增辅材金额', '新增配件金额', '新增增值金额'],
+          textStyle: {
+            color: '#ffffff'
+          },
+          right: 0,
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          // feature: {
+          //   saveAsImage: {}
+          // }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff', // x轴文字颜色
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#666666', // x轴辅助线颜色
+            }
+          },
+          data: ['04/23', '04/24', '04/25', '04/26', '04/27', '04/28', '04/29']
+        },
+        yAxis: {
+          type: 'value',
+          name: "（万元）",
+          nameTextStyle: {
+            color: "#aaa",
+            nameLocation: "start",
+            align: 'right'
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff', // y轴文字颜色
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#666666', // y轴辅助线颜色
+            }
+          }
+        },
+        series: [
+          {
+            name: '新增销售金额',
+            type: 'line',
+            stack: 'Total',
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '新增辅材金额',
+            type: 'line',
+            stack: 'Total',
+            data: [220, 182, 191, 234, 290, 330, 310]
+          },
+          {
+            name: '新增配件金额',
+            type: 'line',
+            stack: 'Total',
+            data: [150, 232, 201, 154, 190, 330, 410]
+          },
+          {
+            name: '新增增值金额',
+            type: 'line',
+            stack: 'Total',
+            data: [320, 332, 301, 334, 390, 330, 320]
+          }
+        ]
+      };
+
+      option && myChart.setOption(option);
+    }
   },
 };
 </script>

src/views/bigViews/dataView1/components/orderStatistics.vue

@@ -9,15 +9,34 @@
         position: relative;
       "
     >
-      <div
-        id="echarts5"
-        style="width: 100%; height: 100%"
-        class="echarts5div"
-      ></div>
+      <div class="table-container">
+        <div class="th row">
+          <div>订单类型</div>
+          <div>累计订单数</div>
+          <div>累计订单金额</div>
+        </div>
+        <div class="td row">
+          <div>销售订单</div>
+          <div>12345</div>
+          <div>12345</div>
+        </div>
+        <div class="td row">
+          <div>辅材订单</div>
+          <div>12345</div>
+          <div>12345</div>
+        </div>
+        <div class="td row">
+          <div>配件订单</div>
+          <div>12345</div>
+          <div>12345</div>
+        </div>
+        <div class="td row">
+          <div>增值订单</div>
+          <div>12345</div>
+          <div>12345</div>
+        </div>
+      </div>
     </div>
-    <Teleport to="body">
-      <div class="niiono" v-if="aaaaa"></div>
-    </Teleport>
   </moduleEnclosure>
 </template>
 
@@ -31,198 +50,42 @@ export default {
   components: { moduleEnclosure },
   data() {
     return {
-      myChart: null,
       list: [],
-      aaaaa: false,
     };
   },
   watch: {
-    aaaaa() {
-      if (this.aaaaa) {
-        bus.emit('autoplay', false);
-      } else {
-        bus.emit('autoplay', true);
-      }
-    },
+    
   },
   mounted() {
-    this.timeId = getQuery8((res) => {
-      this.echarts_5(res.data);
-    }, 50000);
+    
   },
   beforeUnmount() {
-    this.timeId();
+    
   },
   methods: {
-    echarts_5(value = []) {
-      this.list = value.sort((a, b) => {
-        return b.cut - a.cut;
-      });
-      if (this.myChart) {
-        this.myChart.dispose();
-      }
-      this.myChart = new echarts.init(document.getElementById('echarts5'));
-      this.myChart.setOption({
-        tooltip: {
-          formatter: function (params) {
-            return `<div style="color:#fff;">${params.seriesName}: ${params.name} (${params.percent}%)</div>`;
-          },
-          trigger: 'item',
-          transitionDuration: 0,
-          backgroundColor: '#092a66',
-          borderColor: '#0462b5',
-          borderRadius: 8,
-          borderWidth: 2,
-          padding: [0, 0],
-          axisPointer: {
-            type: 'line',
-            lineStyle: {
-              type: 'dashed',
-              color: '#8AB1DC',
-            },
-          },
-        },
-        // visualMap: {
-        //   show: false,
-        //   min: 400,
-        //   max: 500,
-        //   inRange: {},
-        // },
-        series: [
-          {
-            name: '类型',
-            type: 'pie',
-            radius: ['50%', '70%'],
-            center: ['50%', '50%'],
-            color: ['#21c8fb', '#ffc737', '#ea539b', '#59cfe6', '#8061ff'],
-            data: this.list
-              .slice(0, 8)
-              .map((item) => {
-                return {
-                  name: item.btype,
-                  value: item.cut,
-                };
-              })
-              .filter((item) => item.value > 0),
-            roseType: 'radius',
-            label: {
-              normal: {
-                formatter: ['{b|{b}:{d}%}', '{c|{c}单}'].join('\n'),
-                rich: {
-                  b: {
-                    color: '#fff',
-                    fontSize: csize(11),
-                    lineHeight: csize(11),
-                  },
-                  c: {
-                    color: 'rgb(98,137,169)',
-                    fontSize: csize(11),
-                    lineHeight: csize(11),
-                    height: csize(11),
-                  },
-                },
-              },
-            },
-            labelLine: {
-              normal: {
-                lineStyle: {
-                  color: 'rgb(98,137,169)',
-                },
-                smooth: 0.2,
-                length: 10,
-                length2: 20,
-              },
-            },
-          },
-        ],
-      });
-    },
+    
   },
 };
 </script>
 <style scoped lang="scss">
-.niiono {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1999;
-}
-.biuhoij {
-  display: inline-block;
-  position: absolute !important;
-  top: -8px;
-  right: -18px;
-}
-.minwiuhdu {
-  width: 150px;
-  text-align: right;
-}
-.setwidth {
-  width: 200px;
-  text-align: center;
-}
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-table caption {
-  font-size: 2em;
-  font-weight: bold;
-  margin: 1em 0;
-}
-
-th,
-td {
-  border: 1px solid #ddd;
-  text-align: center;
-  padding: 6px 6px;
-}
-
-table thead tr {
-  background-color: #008c8c;
-  color: #fff;
-}
-
-table tbody tr:nth-child(odd) {
-  background-color: #eee;
-}
-
-table tbody tr:hover {
-  background-color: #ccc;
-}
-table tfoot tr td {
-  padding-right: 20px;
-}
-.echarts5div {
-  position: absolute;
-  left: 0;
-  bottom: -14px;
-}
-.classbtns {
-  width: 80px;
-  height: 28px;
+.table-container {
+  height: 100%;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  border: 2px solid #0e72e6;
-  cursor: pointer;
-  transform: translatex(-10px);
-  div {
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    line-height: 28px;
-  }
-
-  div:nth-child(1) {
-    border-right: 2px solid #0e72e6;
-  }
-  .select {
-    background: #0e72e6;
-    color: #bbd4ff;
+  flex-direction: column;
+  justify-content: space-between;
+  .row {
+    display: flex;
+    &.th {
+      font-weight: bold;
+      color: #26A3CE;
+    }
+    &.td {
+      color: #ffffff;
+    }
+    div {
+      flex: 1;
+      font-size: 14px;
+    }
   }
 }
 </style>

src/views/bigViews/dataView1/components/orderTrend.vue

@@ -1,6 +1,6 @@
 <template>
   <moduleEnclosure title="近30日订单趋势">
-    <div id="main3" style="width: 100%; height: 100%"></div>
+    <div id="orderEcharts1" style="width: 100%; height: 100%"></div>
   </moduleEnclosure>
 </template>
 
@@ -20,9 +20,9 @@ export default {
     };
   },
   mounted() {
-    this.timeId = getQuery10((res) => {
-      this.init_myChart2(res.data);
-    }, 40000);
+    // this.timeId = getQuery10((res) => {
+    //   this.init_myChart2(res.data);
+    // }, 40000);
   },
   beforeUnmount() {
     this.timeId();
@@ -42,7 +42,7 @@ export default {
       if (myChart4) {
         myChart4.dispose();
       }
-      myChart4 = new echarts.init(document.getElementById('main3'));
+      myChart4 = new echarts.init(document.getElementById('orderEcharts1'));
       myChart4.setOption({
         tooltip: {
           trigger: 'axis',