update

src/components/monthIncome.vue

@@ -56,7 +56,7 @@ export default {
             // ],
             data: seriesData,
             coordinateSystem: 'polar',
-            roundCap: true,
+            // roundCap: true,
             itemStyle: { color: '#34A6D2' }
           }
         ]

src/components/monthIncomeTrend.vue

@@ -41,14 +41,20 @@ export default {
         tooltip: { trigger: 'axis', axisPointer: {} },
         dataset: { source: this.dataset.source },
         legend: {
-          top: 'bottom',
+          // top: 'bottom',
+          bottom: '10px',
           itemWidth: 13,
           itemHeight: 13,
           icon: 'rect',
           textStyle: { color: '#fff', fontSize: 16 }
         },
-        yAxis: { type: 'value', splitLine: { show: false } },
-        xAxis: { type: 'category', axisTick: { show: false }, axisLine: { show: false } },
+        yAxis: { type: 'value', splitLine: { show: false }, axisLabel: { color: '#0A7199' } },
+        xAxis: {
+          type: 'category',
+          axisTick: { show: false },
+          axisLine: { show: false },
+          axisLabel: { color: '#0A7199' }
+        },
         series: this.dataset.series
       }
     }

src/components/paymentStructure.vue

@@ -19,12 +19,20 @@ export default {
     option() {
       return {
         tooltip: { trigger: 'item' },
-        legend: { orient: 'vertical', left: 'left', top: 'middle', textStyle: { color: '#fff' } },
+        legend: {
+          orient: 'vertical',
+          right: 0,
+          top: 'middle',
+          itemWidth: 14,
+          itemHeight: 14,
+          icon: 'rect',
+          textStyle: { color: '#fff', fontSize: 16 }
+        },
         series: [
           {
             type: 'pie',
-            data: this.dataset,
-            emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
+            label: { alignTo: 'labelLine', color: '#fff' },
+            data: this.dataset
           }
         ]
       }

src/components/wekkIncome.vue → src/components/weekIncome.vue

@@ -5,69 +5,70 @@
 <script>
 import * as api from '@/api/index'
 export default {
-  name: 'MonthlyIncome',
+  name: 'MonthIncomeTrend',
   data() {
     return {
       loading: false,
-      response: { sell_data: [] }
+      response: []
     }
   },
   computed: {
-    option() {
-      const axisData = []
-      const seriesData = []
-      this.response.sell_data.forEach(item => {
-        axisData.push(item.project_name)
-        seriesData.push({ value: item.pay_money, name: item.project_name })
+    dataset() {
+      const dimensions = []
+      const source = {}
+      const series = []
+      this.response.forEach(item => {
+        if (!dimensions.includes(item.week)) {
+          dimensions.push(item.week)
+        }
+        console.log(item.week)
+        if (!source[item.project_name]) {
+          source[item.project_name] = []
+
+          const temp = { type: 'bar', name: item.project_name, stack: 'total', barWidth: 20 }
+          if (['当前周预测', 'T+1', 'T+2'].includes(item.week)) {
+            console.log(temp)
+            temp.itemStyle = { color: 'transparent', borderWidth: 1, borderColor: '#000' }
+          }
+          series.push(temp)
+        }
+        source[item.project_name].push(item.pay_money)
       })
-      const option = {
-        tooltip: {
-          trigger: 'axis'
-        },
-        grid: { left: 0, top: 0, right: 0, bottom: 0 },
-        angleAxis: {
-          show: false
+      source.product = dimensions
+      return { dimensions, source, series }
     },
-        radiusAxis: {
-          type: 'category',
-          // data: ['sofia', 'kelley'],
-          data: axisData,
-          z: 10,
-          axisLine: {
-            show: false
+    option() {
+      return {
+        tooltip: { trigger: 'axis', axisPointer: {} },
+        dataset: { source: this.dataset.source },
+        legend: {
+          show: false,
+          bottom: '10px',
+          itemWidth: 13,
+          itemHeight: 13,
+          icon: 'rect',
+          textStyle: { color: '#fff', fontSize: 16 }
         },
-          axisTick: {
-            show: false
-          }
+        yAxis: {
+          type: 'value',
+          splitLine: { show: false },
+          axisLabel: { color: '#0A7199', formatter: value => value / 10000 }
         },
-        textStyle: {
-          color: '#fff'
+        xAxis: {
+          type: 'category',
+          axisTick: { show: false },
+          axisLine: { show: false },
+          axisLabel: { color: '#0A7199' }
         },
-        polar: {},
-        series: [
-          {
-            type: 'bar',
-            barWidth: 10,
-            barCategoryGap: '0%',
-            // data: [
-            //   { value: 100, itemStyle: { color: '#34A6D2' } },
-            //   { value: 200, itemStyle: { color: '#34A6D2' } }
-            // ],
-            data: seriesData,
-            coordinateSystem: 'polar',
-            roundCap: true,
-            itemStyle: { color: '#34A6D2' }
-          }
-        ]
+        series: this.dataset.series
       }
-      return option
     }
   },
   methods: {
     getData() {
       this.loading = true
       api
-        .getMonthIncome()
+        .getPayMoneyByWeek()
         .then(response => {
           this.response = response
         })
@@ -84,6 +85,6 @@ export default {
 
 <style scoped>
 .chart {
-  height: 200px;
+  height: 300px;
 }
 </style>

src/components/yearIncome.vue

@@ -33,14 +33,13 @@ export default {
           orient: 'vertical',
           left: '200px',
           top: 'middle',
-          itemWidth: 13,
-          itemHeight: 13,
+          itemWidth: 14,
+          itemHeight: 14,
           icon: 'rect',
           textStyle: { color: '#fff', fontSize: 16, padding: [0, 0, 0, 12] }
         },
         series: [
           {
-            name: '年度总营收',
             type: 'pie',
             radius: ['60%', '90%'],
             width: 160,

src/pages/home/index.vue

 <template>
   <div>
     <month-dashboard style="margin-bottom: 24px"></month-dashboard>
+    <card>
+      <week-income></week-income>
+    </card>
     <card title="各项目月度营收">
       <month-income></month-income>
     </card>
@@ -45,9 +48,9 @@ import YearIncome from '@/components/yearIncome'
 import ProjectRanking from '@/components/projectRanking'
 // 各月营收走势
 import MonthIncomeTrend from '@/components/monthIncomeTrend'
-
 // 缴费结构
 import PaymentStructure from '@/components/PaymentStructure'
+import WeekIncome from '@/components/weekIncome'
 
 export default {
   name: 'Index',
@@ -61,7 +64,8 @@ export default {
     YearIncome,
     ProjectRanking,
     MonthIncomeTrend,
-    PaymentStructure
+    PaymentStructure,
+    WeekIncome
   },
   data() {
     return {}

src/store/index.js

@@ -6,6 +6,7 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
   state: {
+    colors: { sofia: '#FC654B', kelley: '#34A6D2', ciis: '#EFB1AE', cu: '#F9BD73', shms: '#9892F0' },
     user: {},
     isLogin: false,
     isIos: /iphone|ipad|ipod/i.test(navigator.userAgent),