添加门店柱状图

src/api/sylive/activity/index.js

@@ -159,7 +159,7 @@ export async function getActivityPiechart(params) {
 }
 
 /**
- * 查询柱状图
+ * 查询大区柱状图
  * @param params 查询条件
  */
 export async function getActivityBarchart(params) {
@@ -171,3 +171,17 @@ export async function getActivityBarchart(params) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+/**
+ * 查询门店柱状图
+ * @param params 查询条件
+ */
+export async function getActivitystoreBarchart(params) {
+  const res = await request.get('/sylive/activity/statistics_storebarchart', {
+    params
+  });
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/sylive/activity/statistics/barchart/index.vue

@@ -6,6 +6,7 @@
           ref="barChart"
           style="height: 500px"
           :option="barChartOption"
+          @mousedown="barMousedown"
         />
       </div>
     </el-card>
@@ -19,15 +20,15 @@
 
   import { use } from 'echarts/core';
   import { CanvasRenderer } from 'echarts/renderers';
-  import { LineChart, BarChart } from 'echarts/charts';
+  import { BarChart } from 'echarts/charts';
   import { GridComponent, TooltipComponent } from 'echarts/components';
   import VChart from 'vue-echarts';
   import { echartsMixin } from '@/utils/echarts-mixin';
 
-  use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent]);
+  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);
 
   export default {
-    name: 'SyliveActivityStatisticsBAR',
+    name: 'SyliveActivityStatisticsRegion',
     components: {
       VChart
     },
@@ -37,6 +38,7 @@
         id: '',
         title: '',
         loading: true,
+        dataUrl: [],
         // 词云图表配置
         barChartOption: {}
       };
@@ -57,6 +59,7 @@
         getActivityBarchart(this.$route.query)
           .then((data) => {
             this.loading = false;
+            this.dataUrl = data.dataUrl;
             //饼状图
             if (data.dataTitle.length > 0) {
               this.barChartOption = {
@@ -70,7 +73,8 @@
                 series: [
                   {
                     data: data.dataValue,
-                    type: 'bar'
+                    type: 'bar',
+                    barMaxWidth: 40
                   }
                 ]
               };
@@ -84,6 +88,10 @@
             this.loading = false;
             this.$message.error(e.message);
           });
+      },
+      barMousedown(e) {
+        //通过鼠标点击事件，获取点击的索引值
+        this.$router.replace(this.dataUrl[e.dataIndex] + '&title=' + e.name);
       }
     },
     watch: {

src/views/sylive/activity/statistics/piechart/index.vue

@@ -29,7 +29,7 @@
   use([CanvasRenderer, PieChart, TooltipComponent, LegendComponent]);
 
   export default {
-    name: 'SyliveActivityStatistics',
+    name: 'SyliveActivityStatisticsPie',
     components: {
       VChart
     },

src/views/sylive/activity/statistics/storebarchart/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="ele-body ele-body-card" v-loading="loading">
+    <el-card shadow="never" :header="title">
+      <div>
+        <v-chart
+          ref="barChart"
+          style="height: 500px"
+          :option="barChartOption"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { getActivitystoreBarchart } from '@/api/sylive/activity';
+  const ROUTE_PATH = '/sylive/activity/statistics/storebarchart';
+
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { BarChart } from 'echarts/charts';
+  import { GridComponent, TooltipComponent } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import { echartsMixin } from '@/utils/echarts-mixin';
+
+  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);
+
+  export default {
+    name: 'SyliveActivityStatisticsStore',
+    components: {
+      VChart
+    },
+    mixins: [echartsMixin(['barChart'])],
+    data() {
+      return {
+        id: '',
+        title: '',
+        loading: true,
+        // 词云图表配置
+        barChartOption: {}
+      };
+    },
+    computed: {
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
+      }
+    },
+    methods: {
+      //进入加载数据
+      query() {
+        const id = this.$route.query.id;
+        this.id = id;
+        this.title = this.$route.query.title;
+        this.loading = true;
+        getActivitystoreBarchart(this.$route.query)
+          .then((data) => {
+            this.loading = false;
+            //饼状图
+            if (data.dataTitle.length > 0) {
+              this.barChartOption = {
+                xAxis: {
+                  type: 'category',
+                  data: data.dataTitle
+                },
+                yAxis: {
+                  type: 'value'
+                },
+                series: [
+                  {
+                    data: data.dataValue,
+                    type: 'bar',
+                    barMaxWidth: 40
+                  }
+                ]
+              };
+            }
+            // 修改页签标题
+            if (this.$route.path === ROUTE_PATH) {
+              setPageTabTitle(this.$route.query.title + '柱状图');
+            }
+          })
+          .catch((e) => {
+            this.loading = false;
+            this.$message.error(e.message);
+          });
+      }
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          const { path } = route;
+          if (path !== ROUTE_PATH) {
+            return;
+          }
+          this.query();
+        },
+        immediate: true
+      }
+    }
+  };
+</script>