update

.config.dev.js

 module.exports = {
   isHttps: false,
   domain: 'localhost',
-  url: 'http://172.16.3.11:8011/',
+  url: 'http://data-view.ezijing.com/',
   webpack: {
     externals: {
       CKEDITOR: 'window.CKEDITOR',

src/components/weekIncome.vue

@@ -5,7 +5,7 @@
 <script>
 import * as api from '@/api/index'
 export default {
-  name: 'MonthIncomeTrend',
+  name: 'WeekIncome',
   data() {
     return {
       loading: false,
@@ -13,29 +13,52 @@ export default {
     }
   },
   computed: {
+    colors() {
+      return this.$store.state.colors
+    },
     dataset() {
-      const dimensions = []
-      const source = {}
+      const legend = []
+      const axis = []
       const series = []
       this.response.forEach(item => {
-        if (!dimensions.includes(item.week)) {
-          dimensions.push(item.week)
+        // 类目
+        if (!legend.includes(item.project_name)) {
+          legend.push(item.project_name)
+        }
+        // X 轴
+        if (!axis.includes(item.week)) {
+          axis.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 }
+        const currentData = { name: item.project_name, value: item.pay_money }
+
+        // 去除颜色，显示边框
         if (['当前周预测', 'T+1', 'T+2'].includes(item.week)) {
-            console.log(temp)
-            temp.itemStyle = { color: 'transparent', borderWidth: 1, borderColor: '#000' }
+          const borderColor = this.colors[item.project_name] || '#000'
+          currentData.itemStyle = { color: 'transparent', borderWidth: 1, borderType: 'dashed', borderColor }
         }
-          series.push(temp)
+        const serisItem = { type: 'bar', name: item.project_name, stack: 'total', barWidth: 20, data: [] }
+        const found = series.find(data => data.name === item.project_name)
+        if (found) {
+          found.data.push(currentData)
+        } else {
+          serisItem.data.push(currentData)
+          series.push(serisItem)
         }
-        source[item.project_name].push(item.pay_money)
       })
-      source.product = dimensions
-      return { dimensions, source, series }
+      // 统计
+      const total = axis.map(week => {
+        return this.response.reduce((item, result) => {
+          if (item.week === week) {
+            result += item.pay_money
+          }
+          return result
+        }, 0)
+      })
+      // 统计
+      series.push({ type: 'bar', name: 'total', stack: 'total', barWidth: 20, data: total })
+
+      return { legend, axis, series }
     },
     option() {
       return {
@@ -47,18 +70,20 @@ export default {
           itemWidth: 13,
           itemHeight: 13,
           icon: 'rect',
-          textStyle: { color: '#fff', fontSize: 16 }
+          textStyle: { color: '#fff', fontSize: 16 },
+          data: this.dataset.legend
         },
         yAxis: {
           type: 'value',
           splitLine: { show: false },
-          axisLabel: { color: '#0A7199', formatter: value => value / 10000 }
+          axisLabel: { color: '#0A7199', width: 40, interval: 0, formatter: value => value / 10000 }
         },
         xAxis: {
           type: 'category',
           axisTick: { show: false },
           axisLine: { show: false },
-          axisLabel: { color: '#0A7199' }
+          axisLabel: { color: '#0A7199', rotate: 45 },
+          data: this.dataset.axis
         },
         series: this.dataset.series
       }