From 6442392983c65964f372bfeeab93a298c6d1d032 Mon Sep 17 00:00:00 2001
From: Bemege <bemege@163.com>
Date: Fri, 2 Jul 2021 17:58:06 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E5=8D=B7=E6=95=B0=E6=8D=AE=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/form/statistics/analysis.vue | 211 +++++++++++++++++++++++++
 src/views/form/statistics/index.vue    |   7 +-
 2 files changed, 217 insertions(+), 1 deletion(-)
 create mode 100644 src/views/form/statistics/analysis.vue

diff --git a/src/views/form/statistics/analysis.vue b/src/views/form/statistics/analysis.vue
new file mode 100644
index 0000000..526d6ae
--- /dev/null
+++ b/src/views/form/statistics/analysis.vue
@@ -0,0 +1,211 @@
+<template>
+    <div class="analysis">
+        <div v-for="(item, index) in list" :key="index">
+            <div class="content">
+                <div class="title">
+                    <span style="font-size: 16px">Q：{{ item.label }}（{{ item.type }}）</span>
+
+                    <div>
+                        <span>图表类型：</span>
+                        <el-select v-model="item.chartType" placeholder="请选择">
+                            <el-option
+                                v-for="item in options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </div>
+                </div>
+                <line-chart
+                    class="chart"
+                    :chart-option="getCharData(item)"
+                    :width="'90vw'"
+                />
+            </div>
+            <el-divider />
+        </div>
+    </div>
+</template>
+
+<script>
+import LineChart from '@/components/echarts/LineChart'
+export default {
+    components: {
+        LineChart
+    },
+    data() {
+        return {
+            barChartOptionData: {
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
+                    color: 'black',
+                    borderWidth: '1',
+                    borderColor: 'rgb(156,209,255)',
+                    textStyle: {
+                        color: 'black'
+                    },
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value'
+                    }
+                ],
+                series: [
+                    {
+                        name: '数量',
+                        type: 'line',
+                        barWidth: '40%',
+                        data: [10, 52, 200, 334, 390, 330, 220]
+                    }
+                ]
+            },
+            list: [],
+            options: [
+                {
+                    value: 'pie',
+                    label: '饼图'
+                },
+                /* {
+          value: "ring",
+          label: "环形图",
+        }, */
+                {
+                    value: 'bar',
+                    label: '柱状图'
+                },
+                {
+                    value: 'line',
+                    label: '折线图'
+                }
+            ]
+        }
+    },
+    mounted() {
+        this.getData()
+    },
+    methods: {
+        getData() {
+            this.$api
+                .get('/user/project/report/analysis', {
+                    params: { projectKey: this.$route.query.key }
+                })
+                .then(res => {
+                    this.list = res.data
+                })
+        },
+        getCharData(data) {
+            const config = {
+                tooltip: {
+                    backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
+                    color: 'black',
+                    borderWidth: '1',
+                    borderColor: 'rgb(156,209,255)',
+                    textStyle: {
+                        color: 'black'
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value'
+                    }
+                ],
+                series: [
+                    {
+                        name: '数量',
+                        type: 'pie',
+                        barWidth: '40%'
+                    }
+                ]
+            }
+            if (['bar', 'line'].includes(data.chartType)) {
+                config.tooltip.axisPointer = {
+                    type: 'line'
+                }
+                config.tooltip.trigger = 'axis'
+                config.xAxis[0].data = data.fieldName
+                config.series[0].data = data.data
+                config.series[0].type = data.chartType
+            } else {
+                // 环形图暂时不用   无法切换到饼图
+                /* if ("ring" === data.chartType) {
+          config.series[0].radius = ["40%", "70%"];
+          
+          config.series[0].emphasis = {
+                label: {
+                    show: true,
+                    fontSize: '25',
+                    fontWeight: 'bold'
+                }
+            }
+        }else{
+          delete config.series[0].radius
+          delete config.series[0].label
+        } */
+                config.series[0].data = []
+                Object.keys(data.map).forEach(key => {
+                    config.series[0].data.push({ name: key, value: data.map[key] })
+                })
+                // config.series[0].data = data.map
+            }
+            return config
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.analysis {
+  width: 100%;
+  // padding: 20px;
+  .content {
+    padding: 20px;
+    width: 100%;
+    .title {
+      font-size: 14px;
+      padding: 0 30px;
+      height: 54px;
+      line-height: 54px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      .select {
+        float: right;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/form/statistics/index.vue b/src/views/form/statistics/index.vue
index 179bd32..b67fcf7 100644
--- a/src/views/form/statistics/index.vue
+++ b/src/views/form/statistics/index.vue
@@ -7,6 +7,9 @@
             <el-tab-pane label="统计视图" name="chart">
                 <chart />
             </el-tab-pane>
+            <el-tab-pane label="数据分析" name="analysis">
+                <analysis />
+            </el-tab-pane>
         </el-tabs>
     </div>
 </template>
@@ -14,12 +17,14 @@
 <script>
 import list from './list'
 import chart from './chart'
+import analysis from './analysis'
 
 export default {
     name: 'ProjectStatistics',
     components: {
         list,
-        chart
+        chart,
+        analysis
     },
     data() {
         return {