From 907ec240c8512ffa59ccfd920125bd129e29bf20 Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Fri, 6 Mar 2020 14:29:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(lineChart,pieChart):=20=E5=8D=87=E7=BA=A7?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E9=85=8D=E8=89=B2=20=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E8=B6=85=E5=87=BA=E9=9A=90=E8=97=8F=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Charts/lineChart.vue | 143 +++++++++++++++++-----------
 src/components/Charts/pieChart.vue  |  91 +++++++++++-------
 2 files changed, 142 insertions(+), 92 deletions(-)

diff --git a/src/components/Charts/lineChart.vue b/src/components/Charts/lineChart.vue
index 1b03164..0b0af02 100644
--- a/src/components/Charts/lineChart.vue
+++ b/src/components/Charts/lineChart.vue
@@ -20,12 +20,11 @@
   <div
     :class="className"
     ref="chart"
-    :style="{height:height,width:width}"/>
+    :style="{height:'100%',width:width,minHeight:height}"/>
 </template>
 
 <script>
 import echarts from 'echarts';
-import 'echarts/theme/macarons';
 
 export default {
   props: {
@@ -44,6 +43,10 @@ export default {
       type: String,
       default: '300px',
     },
+    type: {
+      type: String,
+      default: 'bar',
+    },
     data: {
       type: Array,
       default: () => ([]),
@@ -84,86 +87,110 @@ export default {
     this.chart.dispose();
     this.chart = null;
   },
-
+  computed: {
+    legand() {
+      const arr = [];
+      this.data.forEach((item) => {
+        arr.push(item.name);
+      });
+      return arr;
+    },
+  },
   methods: {
     initChart() {
       this.chart = echarts.init(this.$refs.chart);
       this.chart.setOption({
-        color: ['#FF7744', '#87CEFA'],
+        color: ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7'],
         tooltip: {
           trigger: 'axis',
         },
+        title: {
+          text: this.title,
+          left: '15%',
+          top: '0',
+          textAlign: 'center',
+          textStyle: {
+            fontSize: 14,
+          },
+        },
         grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
           containLabel: true,
         },
-        legend: {
-          data: ['案件', '线索'],
-        },
         xAxis: [{
           type: 'category',
-          boundaryGap: false,
-
-          axisTick: {
-            alignWithLabel: true,
-          },
+          data: this.legand,
           axisLabel: { // 坐标轴刻度标签的相关设置。
-            interval: 0, // 横轴信息全部显示
-            rotate: -30, // -30度角倾斜显示
+            formatter(params) {
+              let newParamsName = '';// 最终拼接成的字符串
+              const paramsNameNumber = params.length;// 实际标签的个数
+              const provideNumber = 5;// 每行能显示的字的个数
+              const rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
+              /**
+                * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+              */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber > provideNumber) {
+                /** 循环每一行,p表示行 */
+                for (let p = 0; p < rowNumber; p += 1) {
+                  let tempStr = '';// 表示每一次截取的字符串
+                  const start = p * provideNumber;// 开始截取的位置
+                  const end = start + provideNumber;// 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p === rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber);
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = `${params.substring(start, end)}\n`;
+                  }
+                  newParamsName += tempStr;// 最终拼成的字符串
+                }
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName = params;
+              }
+              // 将最终的字符串返回
+              return newParamsName;
+            },
+
           },
-          data: this.date,
         }],
         yAxis: [{
           type: 'value',
-          name: '人数',
-          position: 'left',
-          // axisLabel: {
-          //    formatter: '{value} '
-          // }
+          name: '数量',
         }],
         series: [{
-          name: '线索',
-          type: 'line',
-          stack: '线索总量',
-          areaStyle: { normal: {} },
-
-          label: {
+          barWidth: 30, // 柱图宽度
+          name: '数量',
+          type: this.type,
+          data: this.data,
+          itemStyle: {
             normal: {
-              show: true,
-              position: 'top',
-            },
-          },
-          lineStyle: {
-            normal: {
-              width: 1,
-              shadowColor: 'rgba(0,0,0,0.4)',
-              shadowBlur: 2,
-              shadowOffsetY: 2,
-            },
-          },
-          data: this.data[0],
-        }, {
-          name: '案件',
-          type: 'line',
-          stack: '案件总量',
-          label: {
-            normal: {
-              show: true,
-              position: 'top',
-            },
-          },
-          areaStyle: { normal: {} },
+              lineStyle: {
+                color: '#8cd5c2', // 改变折线颜色
+              },
+              // 每根柱子颜色设置
+              color(params) {
+                const colorList = ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7'];
+                return colorList[params.dataIndex];
+              },
+              label: { show: true, color: '#000' },
 
-          lineStyle: {
-            normal: {
-              width: 1,
-              shadowColor: 'rgba(0,0,0,0.4)',
-              shadowBlur: 2,
-              shadowOffsetY: 2,
             },
           },
-          data: this.data[1],
         }],
-      });
+      }, true);
+    },
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler() {
+        this.initChart();
+      },
     },
   },
 };
diff --git a/src/components/Charts/pieChart.vue b/src/components/Charts/pieChart.vue
index 9cc2ab1..9dc595d 100644
--- a/src/components/Charts/pieChart.vue
+++ b/src/components/Charts/pieChart.vue
@@ -16,36 +16,30 @@
 
  -->
 <template>
-  <div
-    :class="className"
-    ref="chart"
-    :style="{height:height,width:width}"/>
+  <div :class="className"
+       ref="chart"
+       :style="{height:'100%',minHeight:height,width:width}" />
 </template>
 
 <script>
 import echarts from 'echarts';
-import 'echarts/theme/macarons';
 
 export default {
   props: {
     className: {
       type: String,
     },
-    id: {
-      type: String,
-      default: 'chart',
-    },
     width: {
       type: String,
       default: '500px',
     },
     height: {
       type: String,
-      default: '300px',
+      default: '250px',
     },
     data: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     title: {
       type: String,
@@ -91,24 +85,12 @@ export default {
     initChart() {
       this.chart = echarts.init(this.$refs.chart);
       this.chart.setOption({
-        color: [
-          '#1890FF',
-          '#13C2C2',
-          '#2FC25B',
-          '#FACC14',
-          '#F04864',
-          '#8543E0',
-          '#CA8622',
-          '#CBB6B0',
-          '#6E7074',
-          '#C4CCD3',
-
-        ],
+        color: ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7'],
         title: {
           text: this.title,
           subtext: this.subtitle,
           left: '29%',
-          top: '43%',
+          top: '44%',
           textAlign: 'center',
           textStyle: {
             fontSize: 14,
@@ -116,30 +98,62 @@ export default {
         },
         tooltip: {
           trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)',
+          formatter: '{a}{b} : {c} ({d}%)',
         },
 
-
         legend: {
           type: 'scroll',
+          icon: 'circle',
           orient: 'vertical',
           show: true,
+          itemWidth: 10, // 设置宽度
+          itemHeight: 10, // 设置高度
           right: 0,
-          top: 35,
+          top: 40,
           bottom: 20,
           textStyle: {
             fontSize: 12,
           },
-
           data: this.legand,
+          formatter: (params) => {
+            let newParamsName = '';// 最终拼接成的字符串
+            const paramsNameNumber = params.length;// 实际标签的个数
+            const provideNumber = 20;// 每行能显示的字的个数
+            const rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
+            /**
+              * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+            */
+            // 条件等同于rowNumber>1
+            if (paramsNameNumber > provideNumber) {
+              /** 循环每一行,p表示行 */
+              for (let p = 0; p < rowNumber; p += 1) {
+                let tempStr = '';// 表示每一次截取的字符串
+                const start = p * provideNumber;// 开始截取的位置
+                const end = start + provideNumber;// 结束截取的位置
+                // 此处特殊处理最后一行的索引值
+                if (p === rowNumber - 1) {
+                  // 最后一次不换行
+                  tempStr = params.substring(start, paramsNameNumber);
+                } else {
+                  // 每一次拼接字符串并换行
+                  tempStr = `${params.substring(start, end)}\n`;
+                }
+                newParamsName += tempStr;// 最终拼成的字符串
+              }
+            } else {
+              // 将旧标签的值赋给新标签
+              newParamsName = params;
+            }
+            // 将最终的字符串返回
+            return `${newParamsName} (${this.data.find(item => item.name === params).value})`;
+          },
         },
 
-
         series: [
           {
             name: '',
             type: 'pie',
-            radius: ['50%', '80%'],
+            radius: ['40%', '64%'],
             center: ['30%', '50%'],
             data: this.data,
             label: {
@@ -149,7 +163,6 @@ export default {
                   fontSize: 16,
                 },
                 show: false,
-
               },
             },
             labelLine: {
@@ -162,14 +175,24 @@ export default {
               normal: {
                 borderWidth: 3,
                 borderColor: '#fff',
-
               },
-
             },
           },
         ],
+      }, true);
+      // 此处绑定饼图点击事件,把图例内容抛出,用于数据钻取
+      this.chart.on('click', (obj) => {
+        this.$emit('click', obj);
       });
     },
   },
+  watch: {
+    data: {
+      deep: true,
+      handler() {
+        this.initChart();
+      },
+    },
+  },
 };
 </script>