From cc66e4f298ba449a87b68b3c40138bf061112fad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E6=88=90=E5=BC=BA?= <xiongchengqiang@linzikg.com>
Date: Tue, 17 Nov 2020 14:55:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/report.js                       |   9 ++
 src/views/kpi/workbench/home/report.vue | 116 +++++++++++++-----------
 2 files changed, 72 insertions(+), 53 deletions(-)

diff --git a/src/api/report.js b/src/api/report.js
index 7519195..4b21ae4 100644
--- a/src/api/report.js
+++ b/src/api/report.js
@@ -27,6 +27,15 @@ export function getChartDetail (query) {
   })
 }
 
+// 获取绩效排名详情
+export function apiOwnResult (query) {
+  return request({
+    url: '/lz_management/performance/own/result',
+    method: 'POST',
+    data: query
+  })
+}
+
 // 获取部门信息
 export function getDepList (query) {
   return request({
diff --git a/src/views/kpi/workbench/home/report.vue b/src/views/kpi/workbench/home/report.vue
index 99f5034..75885f4 100644
--- a/src/views/kpi/workbench/home/report.vue
+++ b/src/views/kpi/workbench/home/report.vue
@@ -6,26 +6,44 @@
 </template>
 
 <script>
-// 引入基本模板
-let echarts = require('echarts/lib/echarts')
-// 引入柱状图组件
-require('echarts/lib/chart/bar')
-// 引入提示框和title组件
-require('echarts/lib/component/tooltip')
-require('echarts/lib/component/title')
+import echarts from 'echarts'
+import {apiOwnResult} from '@/api/report'
 export default {
-  name: 'hello',
+  name: '',
   data () {
     return {
-      option: {
+      charts: '',
+      opinionData: ['3', '2', '4', '4', '5'],
+      xAxis: [1, 2, 3, 4, 5]
+    }
+  },
+  methods: {
+    async handleData () {
+      let res = await apiOwnResult({})
+      if (res.code !== 200) {
+        this.$message.error(res.msg)
+        return []
+      }
+      this.opinionData = res.data.map(i => {
+        i.value = i.allScore
+        return i
+      })
+      if (res.data.length > 4) {
+        this.xAxis = res.data.map((i, index) => index + 1)
+      }
+      return res.data
+    },
+    async drawLine (id) {
+      await this.handleData()
+      this.charts = echarts.init(document.getElementById(id))
+      this.charts.setOption({
         title: {
-          text: '个人成长曲线'
-        },
-        color: ['#3398DB'],
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          text: '个人成长曲线',
+          textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
+            fontFamily: 'Arial, Verdana, sans...',
+            fontSize: 18,
+            fontStyle: 'normal',
+            fontWeight: 'normal'
           }
         },
         grid: {
@@ -34,54 +52,46 @@ export default {
           bottom: '3%',
           containLabel: true
         },
-        xAxis: [
-          {
-            type: 'category',
-            data: ['Mon', 'Tue'],
-            axisTick: {
-              alignWithLabel: true
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.xAxis
+        },
+        yAxis: {
+          minInterval: 1,
+          type: 'value'
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter (params) {
+            for (let x in params) {
+              return params[x].name + '<br/>绩效得分:' + params[x].value
             }
           }
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            axisLine: {show: false},
-            splitNumber: 3,
-            splitLine: {
-              show: true,
+        },
+        series: [{
+          type: 'line',
+          itemStyle: {
+            normal: {
+              color: '#09f',
               lineStyle: {
-                type: 'dashed'
+                color: '#09f'
               }
             }
-          }
-        ],
-        series: [
-          {
-            name: '直接访问',
-            type: 'bar',
-            barWidth: '60%',
-            data: [1, 3]
-          }
-        ]
-      }
+          },
+          data: this.opinionData
+        }]
+      })
     }
   },
+  // 调用
   mounted () {
-    this.drawLine()
-  },
-  methods: {
-    drawLine () {
-      // 基于准备好的dom，初始化echarts实例
-      let myChart = echarts.init(document.getElementById('myChart'))
-      // 绘制图表
-      myChart.setOption(this.option)
-    }
+    this.$nextTick(function () {
+      this.drawLine('myChart')
+    })
   }
 }
-
 </script>
-
 <style lang='' scoped>
 
 </style>