提交

src/views/Portrait/Index.vue

@@ -146,12 +146,13 @@ let programChart = undefined;
 const createSex = (list = []) => {
   if (!sex.value || !list || list.length == 0) return;
   const p = {
-    ...config.sexOption
+    ...config.pieOption
   };
   p.series[0].data = list.map(v => {
     return {
       name: v.category,
-      value: v.ct
+      value: v.ct,
+      selected: true
     };
   });
   sexChart = createChart(sex.value, sex.value.offsetWidth / 2, p, sexChart);
@@ -159,24 +160,39 @@ 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 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 = {
-    ...config.ageOption
+    ...JSON.parse(JSON.stringify(config.pieOption))
   };
-  p.tooltip.formatter = v => {
-    const b = ((v[0].data / total) * 100).toFixed(2);
-    return `${v[0].name}: ${numform(v[0].data)} 占比${b}%`;
+  p.series[0].radius = ['40%', '70%'];
+  p.series[0].itemStyle = {
+    borderRadius: 5,
+    borderColor: '#fff',
+    borderWidth: 1
   };
-  p.yAxis.data = keys;
-  p.series[0].data = values;
+  p.series[0].data = list.map(v => {
+    return {
+      name: v.category,
+      value: v.ct,
+      selected: true
+    };
+  });
   ageChart = createChart(age.value, age.value.offsetWidth / 2, p, ageChart);
 };
 
@@ -221,47 +237,44 @@ const createCity = (list = []) => {
   tableProData.value = list;
   let max = -Infinity,
     min = Infinity,
-    keys = [],
     values = [];
   for (let i = 0; i < list.length; i++) {
     const v = list[i];
     if (v.ct > max) max = v.ct;
     if (v.ct < min) min = v.ct;
-    keys.push(v.category);
     values.push({
       name: v.category,
-      value: v.ct,
-      selected: true
+      value: v.ct
+      //   distribution: ((v.ct / t) * 100).toFixed(2) - 0 + '%'
     });
   }
+
   const p = {
     ...config.cityOption
   };
+  p.visualMap.min = min;
+  p.visualMap.max = max;
+  p.tooltip.formatter = data => {
+    if(isNaN(data.value)) return ''
+    return `${data.name}<br/>${numform(data.value)}`
+  };
+  p.visualMap.text = [max, min];
   p.series[0].data = values;
   cityChart = createChart(city.value, city.value.offsetWidth, p, cityChart);
 };
 
 const createPhone = (list = []) => {
   if (!phone.value || !list || list.length == 0) return;
-  const keys = [],
-    values = [];
-  let total = 0;
   list = list.reverse();
-  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.phoneOption
   };
-  p.tooltip.formatter = v => {
-    const b = ((v[0].data / total) * 100).toFixed(2);
-    return `${v[0].name}: ${numform(v[0].data)} 占比${b}%`;
-  };
-  p.yAxis.data = keys;
-  p.series[0].data = values;
+  p.series[0].data = list.map(v=>{
+    return {
+        value: v.ct,
+        name: v.category
+    }
+  })
   phoneChart = createChart(
     phone.value,
     phone.value.offsetWidth / 2,
@@ -272,25 +285,16 @@ const createPhone = (list = []) => {
 
 const createCategory = (list = []) => {
   if (!category.value || !list || list.length == 0) return;
-  const keys = [],
-    values = [];
-  let total = 0;
   list = list.reverse();
-  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.categoryOption
-  };
-  p.tooltip.formatter = v => {
-    const b = ((v[0].data / total) * 100).toFixed(2);
-    return `${v[0].name}: ${numform(v[0].data)} 占比${b}%`;
+    ...config.phoneOption
   };
-  p.yAxis.data = keys;
-  p.series[0].data = values;
+  p.series[0].data = list.map(v=>{
+    return {
+        value: v.ct,
+        name: v.category
+    }
+  })
   categoryChart = createChart(
     category.value,
     category.value.offsetWidth / 2,

src/views/Portrait/config.js

@@ -1,44 +1,20 @@
 import { numform } from './tool';
 
+const color = [
+  '#1891FF',
+  '#12C3C3',
+  '#FBCD14',
+  '#F14864',
+  '#8542E1',
+  '#7DA6FF',
+  '#4AC312',
+  '#FB8F14',
+  '#F148E7'
+]
+
 export default {
-  sexOption: {
-    tooltip: {
-      trigger: 'item',
-      formatter: '{b}：{c}({d}%)'
-    },
-    color: [
-      '#1891FF',
-      '#12C3C3',
-      '#FBCD14',
-      '#F14864',
-      '#8542E1',
-      '#7DA6FF',
-      '#4AC312',
-      '#FB8F14',
-      '#F148E7'
-    ],
-    grid: {
-      top: '20%',
-      left: '53%',
-      right: '10%',
-      bottom: '6%',
-      containLabel: true
-    },
-    series: [
-      {
-        label: {
-          normal: {
-            formatter: '{b}\n{d}%'
-          }
-        },
-        type: 'pie',
-        radius: '50%',
-        center: ['50%', '50%'],
-        data: []
-      }
-    ]
-  },
   ageOption: {
+    color,
     tooltip: {
       trigger: 'axis',
       formatter: '',
@@ -89,9 +65,7 @@ export default {
           }
         },
         label: {
-          formatter: data => {
-            return numform(data.data);
-          },
+          formatter: '',
           show: true,
           position: 'right',
           textStyle: {
@@ -108,6 +82,7 @@ export default {
       trigger: 'item',
       formatter: '{b} : {c}'
     },
+    color,
     xAxis: {
       max: 0,
       splitLine: {
@@ -273,7 +248,7 @@ export default {
       }
     ]
   },
-  cityOption: {
+  pieOption: {
     tooltip: {
       formatter: '{b} : {c} ({d}%)'
     },
@@ -284,17 +259,7 @@ export default {
       bottom: '6%',
       containLabel: true
     },
-    color: [
-      '#1891FF',
-      '#12C3C3',
-      '#FBCD14',
-      '#F14864',
-      '#8542E1',
-      '#7DA6FF',
-      '#4AC312',
-      '#FB8F14',
-      '#F148E7'
-    ],
+    color,
     series: [
       {
         type: 'pie',
@@ -302,7 +267,7 @@ export default {
         center: ['50%', '50%'],
         label: {
           normal: {
-            formatter: '{b}：{c}   {per|{d}%} ',
+            formatter: '{b} {per|{d}%} ',
             rich: {
               per: {
                 color: '#eee',
@@ -315,12 +280,9 @@ export default {
         },
         data: [],
         itemStyle: {
-          normal: {},
-          emphasis: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.3)'
         },
         labelLine: {
           normal: {
@@ -332,125 +294,73 @@ export default {
       }
     ]
   },
-  phoneOption: {
+  cityOption: {
+    color,
     tooltip: {
-      trigger: 'axis',
-      formatter: '',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    grid: {
-      left: '10%',
-      right: '10%',
-      top: '10%',
-      bottom: '10%',
-      containLabel: true
+      confine: true,
+      trigger: 'item',
+      formatter: '{b} {c}'
     },
-    xAxis: {
-      type: 'value',
-      boundaryGap: [0, 0.01],
-      splitLine: { show: true },
-      axisLabel: {
-        textStyle: {
-          color: '#9B9B9B'
-        }
+    visualMap: {
+      min: 0,
+      max: 0,
+      text: [0, 0],
+      realtime: false,
+      calculable: true,
+      inRange: {
+        color: ['lightskyblue', 'yellow', 'orangered']
       }
     },
-    yAxis: {
-      type: 'category',
-      data: [],
-      splitLine: { show: false },
-      axisLabel: {
-        textStyle: {
-          color: '#9B9B9B'
-        }
-      },
-      axisTick: { show: false }
-    },
     series: [
       {
-        type: 'bar',
-        data: [],
-        itemStyle: {
-          color: '#409eff30',
-          borderColor: '#409eff'
-        },
+        type: 'map',
+        map: 'ShanXi',
+
         label: {
-          formatter: data => {
-            return numform(data.data);
-          },
-          show: true,
-          position: 'right',
-          textStyle: {
-            fontFamily: 'Noto Sans SC',
-            fontSize: 14,
-            color: '#000'
-          }
-        }
+          show: true
+        },
+
+        data: []
       }
     ]
   },
-  categoryOption: {
-    tooltip: {
-      trigger: 'axis',
-      formatter: '',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    grid: {
-      left: '10%',
-      right: '10%',
-      top: '10%',
-      bottom: '10%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'value',
-      boundaryGap: [0, 0.01],
-      splitLine: { show: true },
-      axisLabel: {
-        textStyle: {
-          color: '#9B9B9B'
-        }
-      }
-    },
-    yAxis: {
-      type: 'category',
-      data: [],
-      splitLine: { show: false },
-      axisLabel: {
-        textStyle: {
-          color: '#9B9B9B'
-        }
-      },
-      axisTick: { show: false }
-    },
+  phoneOption: {
+    color,
     series: [
       {
-        type: 'bar',
-        data: [],
+        type: 'pie',
+        radius: [30, 130],
+        center: ['50%', '50%'],
+        roseType: 'area',
         itemStyle: {
-          color: '#409eff30',
-          borderColor: '#409eff'
+          borderRadius: 2
         },
         label: {
-          formatter: data => {
-            return numform(data.data);
-          },
-          show: true,
-          position: 'right',
-          textStyle: {
-            fontFamily: 'Noto Sans SC',
-            fontSize: 14,
-            color: '#000'
+          normal: {
+            formatter: '{b} {per|{d}%} ',
+            rich: {
+              per: {
+                color: '#eee',
+                backgroundColor: '#334455',
+                padding: [2, 4],
+                borderRadius: 13
+              }
+            }
           }
-        }
+        },
+        labelLine: {
+          normal: {
+            length: 1,
+            length2: 1,
+            smooth: true
+          }
+        },
+        data: []
       }
     ]
   },
   publisherOption: {
+    color,
     grid: {
       left: '5%',
       top: 15,

src/views/Portrait/tool.js

@@ -12,10 +12,12 @@ import {
   LegendComponent,
   GridComponent,
   TitleComponent,
-  VisualMapComponent
+  VisualMapComponent,
+  ToolboxComponent
 } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 echarts.use([
+  ToolboxComponent,
   ScatterChart,
   PieChart,
   MapChart,
@@ -60,3 +62,12 @@ export const createChart = (el, height, option, obj) => {
     return obj;
   }
 };
+
+export const formatterTootip = (v, total) => {
+  const b = (v[0].data / total * 100).toFixed(2);
+  return ` ${numform(v[0].data)} 占比${b}%`;
+};
+export const formatterLabel = (v, total) => {
+  const b = (v.data / total * 100).toFixed(2);
+  return ` ${b}%`;
+};