提交

src/views/Portrait/Index.vue

@@ -160,25 +160,9 @@ const createSex = (list = []) => {
 
 const createAge = (list = []) => {
   if (!age.value || !list || list.length == 0) return;
-  //   const keys = [],
-  //     values = [];
-  //   let total = 0;
-  //   for (let i = 0; i < list.length; i++) {
-  //     const v = list[i];
-  //     keys.push(v.category);
-  //     values.push(v.ct);
-  //     total += v.ct;
-  //   }
-  //   const p = {
-  //     ...config.ageOption
-  //   };
-  //   p.series[0].label.formatter = data => formatterLabel(data, total);
-  //   p.tooltip.formatter = v => v[0].name + formatterTootip(v, total);
-  //   p.yAxis.data = keys;
-  //   p.series[0].data = values;
 
   const p = {
-    ...JSON.parse(JSON.stringify(config.pieOption))
+    ...config.pieOption
   };
   p.series[0].radius = ['40%', '70%'];
   p.series[0].itemStyle = {
@@ -255,8 +239,8 @@ const createCity = (list = []) => {
   p.visualMap.min = min;
   p.visualMap.max = max;
   p.tooltip.formatter = data => {
-    if(isNaN(data.value)) return ''
-    return `${data.name}<br/>${numform(data.value)}`
+    if (isNaN(data.value)) return '';
+    return `${data.name}<br/>${numform(data.value)}`;
   };
   p.visualMap.text = [max, min];
   p.series[0].data = values;
@@ -269,12 +253,12 @@ const createPhone = (list = []) => {
   const p = {
     ...config.phoneOption
   };
-  p.series[0].data = list.map(v=>{
+  p.series[0].data = list.map(v => {
     return {
-        value: v.ct,
-        name: v.category
-    }
-  })
+      value: v.ct,
+      name: v.category
+    };
+  });
   phoneChart = createChart(
     phone.value,
     phone.value.offsetWidth / 2,
@@ -287,14 +271,22 @@ const createCategory = (list = []) => {
   if (!category.value || !list || list.length == 0) return;
   list = list.reverse();
   const p = {
-    ...config.phoneOption
+    ...config.pieOption
+  };
+
+  p.series[0].radius = ['40%', '70%'];
+  p.series[0].itemStyle = {
+    borderRadius: 5,
+    borderColor: '#fff',
+    borderWidth: 1
   };
-  p.series[0].data = list.map(v=>{
+  p.series[0].data = list.map(v => {
     return {
-        value: v.ct,
-        name: v.category
-    }
-  })
+      name: v.category,
+      value: v.ct,
+      selected: true
+    };
+  });
   categoryChart = createChart(
     category.value,
     category.value.offsetWidth / 2,
@@ -306,25 +298,19 @@ const createCategory = (list = []) => {
 const createPublisher = (list = []) => {
   if (!publisher.value || !list || list.length == 0) return;
   const keys = [],
-    values = [],
-    dataBg = [];
+    values = [];
   let max = -Infinity;
   for (let i = 0; i < list.length; i++) {
     const v = list[i];
     keys.push(v.category);
     values.push(v.ct);
-    dataBg.push(1);
     if (max < v.ct) max = v.ct;
   }
   const p = {
     ...config.publisherOption
   };
-  p.xAxis[0].max = max;
-  p.yAxis[0].data = keys;
-  p.yAxis[1].data = values;
+  p.xAxis[0].data = keys;
   p.series[0].data = values;
-  p.series[1].data = dataBg;
-  p.series[2].data = values;
   publisherChart = createChart(
     publisher.value,
     publisher.value.offsetWidth,
@@ -336,25 +322,38 @@ const createPublisher = (list = []) => {
 const createProgram = (list = []) => {
   if (!program.value || !list || list.length == 0) return;
   const keys = [],
-    values = [],
-    dataBg = [];
+    values = [];
   let max = -Infinity;
+  list = list.reverse();
   for (let i = 0; i < list.length; i++) {
     const v = list[i];
     keys.push(v.category);
     values.push(v.ct);
-    dataBg.push(1);
     if (max < v.ct) max = v.ct;
   }
   const p = {
-    ...config.publisherOption
+    ...JSON.parse(JSON.stringify(config.publisherOption))
   };
-  p.xAxis[0].max = max;
-  p.yAxis[0].data = keys;
-  p.yAxis[1].data = values;
+  p.xAxis[0].data = keys;
   p.series[0].data = values;
-  p.series[1].data = dataBg;
-  p.series[2].data = values;
+  const xAxis = JSON.parse(JSON.stringify(p.xAxis));
+  const yAxis = JSON.parse(JSON.stringify(p.yAxis));
+  p.yAxis = xAxis;
+  p.xAxis = yAxis;
+  p.grid = {
+    top: '5%',
+    left: 5,
+    right: 5,
+    bottom: '6%',
+    containLabel: true
+  };
+  p.series[0].label.offset = [50, 0];
+  p.series[0].label.position = 'right';
+  p.series[0].label.align = 'right';
+  p.series[0].label.formatter = data => {
+    if (isNaN(data.value)) return '';
+    return numform(data.value);
+  };
   programChart = createChart(
     program.value,
     publisher.value.offsetWidth,