Merge branch 'master' of http://gitlab.oytour.com/luochao/superman

src/App.vue

@@ -10,7 +10,9 @@
     </viewer>
     <chosen-open-mode v-if="haveOpenMode" :settingSys="settingSys"></chosen-open-mode>
     <!--  -->
-
+    <!-- <div class="showMyCareer">
+      <mycareer></mycareer>
+    </div> -->
   </div>
 </template>
 
@@ -27,10 +29,12 @@ var sUserAgent = navigator.userAgent;
       // document.html.style.minWidth = '1366px'
   }
 import chosenOpenMode from './components/commonPage/chosenOpenMode'
+import mycareer from './components/champion/mycareer'
 export default {
   name: 'App',
   components: {
-    chosenOpenMode
+    chosenOpenMode,
+    mycareer
   },
   created() {
     //注册禁止后退，并且不做卸载
@@ -124,6 +128,16 @@ export default {
   .BMap_cpyCtrl {display: none;}
   .anchorBL {display: none;}
   .viewer{display: none !important;}
-
+  .showMyCareer{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(0,0,0,.3);
+    align-items: center;
+    justify-content: center;
+    z-index: 999999999999999;
+  }
 
 </style>

src/components/champion/dashboard.vue

+<template>
+  <div class="inerank-container">
+    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
+  </div>
+</template>
+<script>
+export default {
+  props:{
+    score:{
+      type:Number,
+      default:0
+    },
+    title:{
+      type:String,
+      default:''
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let myChart = this.$echarts.init(this.$refs.myLineRank);
+
+      let option = {
+        series: [
+          {
+            name: "ze",
+            type: "gauge",
+            radius: "99%", //仪表大小
+            // startAngle: 200, //开始角度
+            // endAngle: -20, //结束角度
+            min: 0,
+            max: 100,
+            splitNumber: 5,
+            data: [{ value: this.score, name: "ze" }],
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: [
+                  [
+                    (this.score/100),
+                    new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                      { offset: 0, color: "#F7BF4Caa" },
+                      { offset: 1, color: "#F7BF4C00" }
+                    ])
+                  ],
+                  [1, "#00000000"]
+                ],
+                width: 25
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              //指针样式
+              length: "95%",
+              color: "#fff",
+              width: 0
+            },
+            title: {
+              show: false
+            },
+            detail: {
+              show: false
+            }
+          },
+          {
+            name: this.title,
+            type: "gauge",
+            radius: "100%", //仪表大小
+            // startAngle: 200, //开始角度
+            // endAngle: -20, //结束角度
+            min: 0,
+            max: 100,
+            splitNumber: 5,
+            data: [{ value: this.score, name: this.title}],
+            axisLine: {
+              show: false,
+              lineStyle: {
+                // 属性lineStyle控制线条样式
+                color: [[0.5, "#F7BF4C"], [0.8, "#F7BF4C"], [1, "#F7BF4C"]],
+                // shadowColor: "#F7BF4C",
+                // shadowBlur: 250,
+                width: 2
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                // 属性lineStyle控制线条样式
+                color: "#F7BF4C66",
+                width: 1
+              }
+            },
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              //指针样式
+              length: "95%",
+              color: "#fff",
+              width: 3
+            },
+            title: {
+              show: true,
+              offsetCenter: [0, "80%"],
+              color: "#FFF",
+              fontSize: 14,
+              padding: 5,
+              fontFamily: "pingfangR"
+            },
+            detail: {
+              formatter: "{score|{value}}",
+              offsetCenter: [0, 0],
+              backgroundColor: "#000000",
+              shadowColor: "#F7BF4C88",
+              shadowBlur: 5,
+              borderRadius: 22,
+              width: 20,
+              rich: {
+                score: {
+                  color: "#FFF",
+                  fontSize: 22,
+                  padding: 5,
+                  fontFamily: "pingfangR"
+                }
+              }
+            }
+          }
+        ]
+      };
+
+      myChart.setOption(option);
+    }
+  }
+};
+</script>
+<style scoped>
+.inerank-container {
+  height: 100%;
+  width: 100%;
+}
+</style>