提交

src/api/portrait.js

@@ -95,24 +95,35 @@ export function getCategoryData(data) {
  * @return {AxjxPromise}
  */
 export function getPublisherData(data) {
-    return ajax({
-      urlType: 'url2',
-      url: '/portrait/publisher',
-      method: 'GET',
-      data
-    });
-  }
+  return ajax({
+    urlType: 'url2',
+    url: '/portrait/publisher',
+    method: 'GET',
+    data
+  });
+}
 
 /**
  * 获取重点栏目
  * @return {AxjxPromise}
  */
 export function getProgramData(data) {
-    return ajax({
-      urlType: 'url2',
-      url: '/portrait/program',
-      method: 'GET',
-      data
-    });
-  }
-    
+  return ajax({
+    urlType: 'url2',
+    url: '/portrait/program',
+    method: 'GET',
+    data
+  });
+}
+/**
+   * 获取重点栏目
+   * @return {AxjxPromise}
+   */
+export function getBehaviorData(data) {
+  return ajax({
+    urlType: 'url2',
+    url: '/portrait/behavior',
+    method: 'GET',
+    data
+  });
+}

src/views/Portrait/Index.vue

@@ -101,6 +101,13 @@
           </el-card>
         </el-col>
       </el-row>
+      <br />
+      <el-card>
+        <template #header>
+          <span>兴趣分布</span>
+        </template>
+        <div ref="behavior"></div>
+      </el-card>
     </el-main>
   </el-container>
 </template>
@@ -115,7 +122,8 @@ import {
   getPhoneData,
   getCategoryData,
   getPublisherData,
-  getProgramData
+  getProgramData,
+  getBehaviorData
 } from '@/api/portrait.js';
 import { ref, onMounted } from 'vue';
 
@@ -133,6 +141,7 @@ const phone = ref(null);
 const category = ref(null);
 const publisher = ref(null);
 const program = ref(null);
+const behavior = ref(null);
 
 let sexChart = undefined;
 let ageChart = undefined;
@@ -142,6 +151,7 @@ let phoneChart = undefined;
 let categoryChart = undefined;
 let publisherChart = undefined;
 let programChart = undefined;
+let behaviorChart = undefined;
 
 const createSex = (list = []) => {
   if (!sex.value || !list || list.length == 0) return;
@@ -392,6 +402,45 @@ const createProgram = (list = []) => {
   );
 };
 
+const createBehavior = (list = []) => {
+  if (!behavior.value || !list || list.length == 0) return;
+  const keys = [],
+    values = [];
+  let max = -Infinity;
+  for (let i = 0; i < list.length; i++) {
+    const v = list[i];
+    keys.push(v.category);
+    values.push(v.ct);
+    if (max < v.ct) max = v.ct;
+  }
+  const p = {
+    ...config.publisherOption
+  };
+  p.xAxis[0].data = keys;
+  p.series[0].data = values;
+  p.series[0].itemStyle = {
+    normal: {
+      borderRadius: [5, 5, 0, 0],
+      color: new chart.graphic.LinearGradient(0, 0, 1, 0, [
+        {
+          offset: 0,
+          color: '#8ba6d6'
+        },
+        {
+          offset: 1,
+          color: '#a085ee'
+        }
+      ])
+    }
+  };
+  behaviorChart = createChart(
+    behavior.value,
+    behavior.value.offsetWidth / 3,
+    p,
+    behaviorChart
+  );
+};
+
 const getData = () => {
   Promise.all([
     getSexData({ appid: appSelect.value }),
@@ -401,7 +450,8 @@ const getData = () => {
     getPhoneData({ appid: appSelect.value }),
     getCategoryData({ appid: appSelect.value }),
     getPublisherData({ appid: appSelect.value }),
-    getProgramData({ appid: appSelect.value })
+    getProgramData({ appid: appSelect.value }),
+    getBehaviorData({ appid: appSelect.value })
   ]).then(list => {
     createSex(list[0]);
     createAge(list[1]);
@@ -411,6 +461,7 @@ const getData = () => {
     createCategory(list[5]);
     createPublisher(list[6]);
     createProgram(list[7]);
+    createBehavior(list[8]);
   });
 };