数据分析

package.json

@@ -16,7 +16,7 @@
     "axios": "^0.19.2",
     "babel-polyfill": "^6.26.0",
     "codemirror": "^5.45.0",
-    "echarts": "^4.2.1",
+    "echarts": "^4.8.0",
     "element-ui": "^2.11.1",
     "js-yaml": "^3.13.1",
     "json2yaml": "^1.1.0",

src/components/shopping-cart/shopping-cart-com.vue

@@ -125,7 +125,7 @@ export default {
       });
       this.$api.serviceShop.delShoppingCart(query).then(response => {
         console.log(response);
-        this.getList()
+        this.getList();
       });
     },
     changeCellMsg(val) {
@@ -136,7 +136,7 @@ export default {
       let query = [val.data.id];
       this.$api.serviceShop.delShoppingCart(query).then(response => {
         console.log(response);
-        this.getList()
+        this.getList();
       });
     },
     oneClickApplication() {
@@ -146,7 +146,8 @@ export default {
           arr.push(this.list[index]);
         }
       });
-      this.$store.commit("setShoppingCart", arr);
+      window.sessionStorage.setItem("shoppingCart", JSON.stringify(arr));
+      // this.$store.commit("setShoppingCart", arr);
       this.$router.push({ name: "shopCarApply" });
     }
   }

src/main.js

@@ -22,6 +22,9 @@ import "@/icons"
 
 import "./assets/css/index.css";
 
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts;
+
 import VueI18n from 'vue-i18n'
 Vue.use(VueI18n)
 

src/pages/data-analysis/my-service.vue

@@ -4,18 +4,254 @@
       <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item>
       <el-breadcrumb-item>{{ $t("lang.myServiceDataAnalysis") }}</el-breadcrumb-item>
     </el-breadcrumb>
+    <el-row class="in_analysis">
+      <!-- 可横向铺满 -->
+      <el-col :span="6" class="in_left">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block left_1">
+              <div ref="left_1_l" class="left_1_l"></div>
+              <div ref="left_1_r" class="left_1_r"></div>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block"></block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block"></block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12" class="in_center">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block"></block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block"></block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block"></block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6" class="in_right">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block"></block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block"></block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius class="block"></block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <!-- 不可横向铺满，一般为最后一行 -->
+      <el-col :span="6" class="in_block">
+        <block-radius class="block"></block-radius>
+      </el-col>
+      <el-col :span="18" class="in_block default">
+        <block-radius class="block">
+          <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
+        </block-radius>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import BlockRadius from "@/components/block-radius";
 export default {
-  components: {},
+  components: {
+    BlockRadius
+  },
   data: () => ({
     navList: []
   }),
-  mounted() {},
-  methods: {}
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(this.$refs.left_1_l);
+      // 绘制图表
+      myChart.setOption({
+        title: {
+          text: "20%",
+          subtext: "sssss",
+          x: "center",
+          y: "center",
+          textStyle: {
+            fontSize: 26,
+            fontWeight: "normal",
+            color: ["#67828c"]
+          },
+          subtextStyle: {
+            color: "#67828c",
+            fontSize: 16,
+            align: "center"
+          }
+        },
+        angleAxis: {
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          min: 0,
+          max: 160,
+          boundaryGap: ["0", "100"],
+          startAngle: 225
+        },
+        radiusAxis: {
+          type: "category",
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          }
+        },
+        polar: {
+          radius: "100%"
+        },
+        series: [
+          {
+            type: "bar",
+            data: [, 40],
+            // coordinateSystem: "polar",
+            barMaxWidth: 10,
+            z: 2,
+            name: "抢修项目",
+            roundCap: true,
+            color: "#1779ee",
+            barGap: "-100%",
+            label: {
+              show: true,
+              position: "inside",
+              label: {
+                normal: {
+                  show: true,
+                  fontSize: 18,
+                  fontWeight: "bold",
+                  color: "#333",
+                  position: "top"
+                }
+              }
+            }
+          },
+          {
+            type: "bar",
+            data: [, 120],
+            z: 0,
+            silent: true,
+            coordinateSystem: "polar",
+            barMaxWidth: 10,
+            name: "C",
+            roundCap: true,
+            color: "#ddd",
+            barGap: "-100%"
+          },
+          {
+            type: "gauge",
+            radius: "55%",
+            min: 0, //最小刻度
+            max: 100, //最大刻度
+            splitNumber: 10, //刻度数量
+            startAngle: 225,
+            endAngle: -45,
+            axisLabel: {
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: [[1, "rgba(0,0,0,0)"]]
+              }
+            }, //仪表盘轴线
+            axisLabel: {
+              show: false
+            }, //刻度标签。
+            axisTick: {
+              show: true,
+              splitNumber: 5,
+              lineStyle: {
+                color: "#468EFD", //用颜色渐变函数不起作用
+                width: 1
+              },
+              length: -8
+            }, //刻度样式
+            splitLine: {
+              show: true,
+              length: -10,
+              lineStyle: {
+                color: "#468EFD" //用颜色渐变函数不起作用
+              }
+            }, //分隔线样式
+            detail: {
+              show: false
+            },
+            pointer: {
+              show: false
+            }
+          }
+        ]
+      });
+    }
+  }
 };
 </script>
 <style scoped>
+.in_analysis {
+  padding: 0 10px 10px;
+  height: 100%;
+}
+.in_l {
+}
+.in_r {
+}
+.in_c {
+}
+.in_block {
+  height: 300px;
+  padding: 10px;
+}
+.block {
+  width: 100%;
+  height: 100%;
+}
+.left_1 {
+  display: flex;
+}
+.left_1_l {
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+}
+.left_1_r {
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+}
+.default {
+  text-align: center;
+}
+.default_img {
+  width: 330px;
+  height: 230px;
+}
 </style>
\ No newline at end of file

yarn.lock

@@ -1972,7 +1972,7 @@ commander@2.17.x:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@^2.18.0, commander@^2.20.0:
+commander@^2.18.0, commander@^2.20.0, commander@^2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -2279,6 +2279,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssfilter@0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae"
+  integrity sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=
+
 cssnano-preset-default@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
@@ -2696,12 +2701,12 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
-echarts@^4.2.1:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.6.0.tgz#b5a47a1046cec93ceeef954f9ee54751340558ec"
-  integrity sha512-xKkcr6v9UVOSF+PMuj7Ngt3bnzLwN1sSXWCvpvX+jYb3mePYsZnABq7wGkPac/m0nV653uGHXoHK8DCKCprdNg==
+echarts@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.8.0.tgz#b2c1cfb9229b13d368ee104fc8eea600b574d4c4"
+  integrity sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==
   dependencies:
-    zrender "4.2.0"
+    zrender "4.3.1"
 
 ee-first@1.1.1:
   version "1.1.1"
@@ -3513,6 +3518,16 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+highlight.js-async-webpack@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/highlight.js-async-webpack/-/highlight.js-async-webpack-1.0.4.tgz#c06b67bf99f049045d62b756e5855b0912ec616c"
+  integrity sha1-wGtnv5nwSQRdYrdW5YVbCRLsYWw=
+
+highlight.js@^9.11.0:
+  version "9.18.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"
+  integrity sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -4414,6 +4429,15 @@ material-design-icons-iconfont@^4.0.5:
   resolved "https://registry.yarnpkg.com/material-design-icons-iconfont/-/material-design-icons-iconfont-4.0.5.tgz#4107ba3b8a9d688a3d9325fc7363af51b17d3aee"
   integrity sha512-ByJJ1yz8+RfCx2uNiC5WjVCR7K3UWRb8ytWV3RMaoFRzQLNr/J5x7+Wg1+3OlIZahNXrId9Hu+BfXfQIo01v7g==
 
+mavon-editor@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/mavon-editor/-/mavon-editor-2.9.0.tgz#e51bbcdcde18b9236333a9ceb12fed2d84542900"
+  integrity sha512-eGEppkQwGg4Z9UOtCLwL5rcg1CQRw8HyaA8sWJeRJTjNJ4HwBMX6BH5XVnQeumUUVFqHr6cm7GjWgVkIxiSm+Q==
+  dependencies:
+    highlight.js "^9.11.0"
+    highlight.js-async-webpack "^1.0.4"
+    xss "^1.0.6"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -7460,6 +7484,14 @@ x-photoswipe@^4.1.3-rc.1:
   resolved "https://registry.yarnpkg.com/x-photoswipe/-/x-photoswipe-4.1.3-rc.1.tgz#e761901752dd3dd1f718e538514b609b5df5f7db"
   integrity sha512-ok+x+1ufLuBT9dfM5P2FcRefwNniQoVwwfBhGa5gLn8NrSTzNah2p4IElMLwzXuKLtyH4yb+z3IsdDef3FOL5A==
 
+xss@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/xss/-/xss-1.0.7.tgz#a554cbd5e909324bd6893fb47fff441ad54e2a95"
+  integrity sha512-A9v7tblGvxu8TWXQC9rlpW96a+LN1lyw6wyhpTmmGW+FwRMactchBR3ROKSi33UPCUcUHSu8s9YP6F+K3Mw//w==
+  dependencies:
+    commander "^2.20.3"
+    cssfilter "0.0.10"
+
 xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
@@ -7538,7 +7570,7 @@ yargs@13.2.4:
     y18n "^4.0.0"
     yargs-parser "^13.1.0"
 
-zrender@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.2.0.tgz#d001302e155f28de1f9fc7fcd5c254bad28471cf"
-  integrity sha512-YJ9hxt5uFincYYU3KK31+Ce+B6PJmYYK0Q9fQ6jOUAoC/VHbe4kCKAPkxKeT7jGTxrK5wYu18R0TLGqj2zbEOA==
+zrender@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.3.1.tgz#baf8aa6dc8187a2f819692d7d5f9bedfa2b90fa3"
+  integrity sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ==