业绩竞赛

src/components/viitto/nianduduibi.vue

+<template>
+  <div class="inerank-container">
+    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    newdata: {
+      type: Number,
+      default: 0
+    },
+    olddata: {
+      type: Number,
+      default: 0
+    },
+    colors:{
+      type:Array,
+      default:[]
+    },
+    title:{
+      type:String,
+      default:""
+    }
+  },
+  data() {
+    return {
+      placeHolderStyle: {
+        normal: {
+          color: "rgba(0,0,0,0)",
+          label: { show: false },
+          labelLine: { show: false }
+        },
+        emphasis: {
+          color: "rgba(0,0,0,0)"
+        }
+      }
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let myChart = this.$echarts.init(this.$refs.myLineRank);
+      let dataAlias = ["今年", "去年"];
+      let data2 = [{
+        name:"今年",
+        value:this.newdata
+      }, {
+        name:"去年",
+        value:this.olddata,
+        itemStyle:this.placeHolderStyle
+      }];
+      let data3 = [{
+        name:"去年",
+        value:this.olddata
+      },{
+        name:"今年",
+        value:this.newdata,
+        itemStyle:this.placeHolderStyle
+      }];
+      let option = {
+        tooltip: {
+          show:false
+        },
+        graphic: [
+          {
+            type: "text",
+            left:'center',
+            top: "center",
+            style: {
+              text: this.title,
+              textAlign: "center",
+              fill: this.colors[0], //文字的颜色
+              fontSize: 16,
+              width: 120,
+              fontFamily: "pingfangR"
+            }
+          }
+        ],
+        calculable: true,
+        series: [
+          {
+            // center: ["25%", "45%"],
+            name: "订单来源",
+            type: "pie",
+            radius: ["80%", "90%"],
+            hoverAnimation: false,
+            legendHoverLink:false,
+            tooltip:false,
+            startAngle:90,
+            itemStyle: {
+              emphasis: {
+                barBorderRadius: 30
+              },
+              normal: {
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                  { offset: 0, color: "#2DA7D6" },
+                  { offset: 0.35, color: "#2DA7D6" },
+                  { offset: 1, color: "#2DA7D6" }
+                ])
+              }
+            },
+            data: data2
+          },
+          {
+            // center: ["25%", "45%"],
+            name: "订单来源",
+            type: "pie",
+            radius: ["60%", "70%"],
+            hoverAnimation: false,
+            legendHoverLink:false,
+            tooltip:false,
+            startAngle:90,
+            itemStyle: {
+              emphasis: {
+                barBorderRadius: 30
+              },
+              normal: {
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                  { offset: 0, color: "#FA9801"},
+                  { offset: 0.35, color:  "#FA9801" },
+                  { offset: 1, color:  "#FA9801"}
+                ])
+              }
+            },
+            data: data3
+          }
+        ]
+      };
+
+      myChart.setOption(option,true);
+    }
+  }
+};
+</script>
+<style>
+.inerank-container {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/router.js

@@ -5,6 +5,8 @@ import index from './views/index'
 import viittoData from './components/viitto/viittoData'
 import viittoData2 from './components/viitto/viittoData2'
 import dataLook from './components/viitto/dataLook'
+import PerCompetition from './components/viitto/PerCompetition'
+
 Vue.use(Router)
 
 export default new Router({
@@ -40,6 +42,11 @@ export default new Router({
       path: '/dataLook',
       name: 'dataLook',
       component: dataLook,
+    },
+    {
+      path: '/PerCompetition',
+      name: 'PerCompetition',
+      component: PerCompetition,
     }
   ]
 })